New to Kendo UI for jQuery? Download free 30-day trial

Set Cell Color Based on ForeignKey Values in the Grid

Environment

Product Progress® Kendo UI® Grid for jQuery
Operating System Windows 10 64bit
Preferred Language JavaScript

Description

How can I set the color of a text cell based on ForeignKey values in the Grid?

Solution

The following example demonstrates how to set the color of a text cell based on ForeignKey values in the Grid.

    <style>
    .red{
        color:red;
    }

    .green {
        color:green;
    }
    </style>
    <script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js" type="text/javascript"></script>
    <div id="example">
      <div id="grid"></div>

      <script>
        var categories = [{
          "value": 1,
          "text": "Beverages"
        },{
          "value": 2,
          "text": "Condiments"
        },{
          "value": 3,
          "text": "Confections"
        },{
          "value": 4,
          "text": "Dairy Products"
        },{
          "value": 5,
          "text": "Grains/Cereals"
        },{
          "value": 6,
          "text": "Meat/Poultry"
        },{
          "value": 7,
          "text": "Produce"
        },{
          "value": 8,
          "text": "Seafood"
        }];

        $(document).ready(function () {
          var dataSource = new kendo.data.DataSource({
            pageSize: 20,
            data: products,
            autoSync: true,
            schema: {
              model: {
                id: "ProductID",
                fields: {
                  ProductID: { editable: false, nullable: true },
                  ProductName: { validation: { required: true} },
                  CategoryID: { field: "CategoryID", type: "number", defaultValue: 1 },
                  UnitPrice: { type: "number", validation: { required: true, min: 1} }
                }
              }
            }
          });

          $("#grid").kendoGrid({
            dataSource: dataSource,
            filterable: true,
            groupable: true,
            pageable: true,
            height: 540,
            toolbar: ["create"],
            columns: [
              { field: "ProductName", title: "Product Name" },
              { field: "CategoryID", width: "200px", values: categories, title: "Category",attributes: {
                class: "#=ProductID % 2 ? 'red' : 'green' # #console.log(data)#"
              },
               template:  function(dataItem) {
                 var value = dataItem.CategoryID;

                 var text = $.grep(categories, function(item) {                                 
                   return item.value == value;
                 })[0].text;

                 return text;
               }
              },
              { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "200px" },
              { command: "destroy", title: " ", width: "150px"}],
            editable: true
          });
        });
      </script>
    </div>

See Also

In this article