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
Not finding the help you need? Improve this article