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

Dynamic User Defined Grid Row Styles

Environment

Product Progress Kendo UI Grid
Created with version 2019.2.619

Description

We have requirement to change the kendo grid style (background color, font color,active row color etc.). We could achieve changing the style of kendo grid by overriding the kendo classes in a CSS file. But we want to achieve the same via javascript to allow our users to make their own style changes to the rows.

Solution

To apply the custom background to odd and even rows, you can use the built-in functionality. The Kendo UI Grid decorates every other row with the .k-alt class. To make the styling dynamic and based on user selection we could:

  1. Use a couple of ColorPickers
  2. Handle their change event
  3. Add the color via inline styles on mousover and then again on mouseout events

        var background = $("#background").kendoColorPicker({
          value: "grey",
          change: function(e){
            $("tr.k-alt").css({
              backgroundColor: e.value
            }).on("mouseover", function(){
              this.style.backgroundColor =  hover.value();
            });
          }
        }).data("kendoColorPicker");
    
        var hover = $("#hover").kendoColorPicker({
          value: "red",
          change: function(e){
            $("tr.k-alt").on("mouseover", function(){
              this.style.backgroundColor = e.value;
            }).on("mouseout", function(){
              this.style.backgroundColor = background.value();
            });
          }
        }).data("kendoColorPicker");
    
    <style>
      tr.k-alt {
        color: white;
        background-color: grey !important; 
      }

      tr.k-alt:active,
      tr.k-alt:hover {
        color: white;
        background-color: red;
      }
    </style>
    <div>
        Background<div id="background"></div>
        Hover<div id="hover">< /div>
        </div><br /><br />
        <div id="grid"></div>
        <script>
            var background = $("#background").kendoColorPicker({
              value: "grey",
              change: function(e){
                $("tr.k-alt").css({
                  backgroundColor: e.value
                }).on("mouseover", function(){
                  this.style.backgroundColor =  hover.value();
                });
              }
            }).data("kendoColorPicker");

            var hover = $("#hover").kendoColorPicker({
              value: "red",
              change: function(e){
                $("tr.k-alt").on("mouseover", function(){
                  this.style.backgroundColor = e.value;
                }).on("mouseout", function(){
                  this.style.backgroundColor = background.value();
                });
              }
            }).data("kendoColorPicker");

            $("#grid").kendoGrid({
              columns: [ {
                field: "name",
                title: "Name"
              },{
                field : "age"
              }],
              dataSource: [ { name: "Jane Doe", age : 42 }, 
                           { name: "John Doe" ,age : 13},
                           { name: "Sam Smith",age : 23 },
                           { name: "Robert" ,age : 45},
                           { name: "Tom" ,age : 14}]
            });
        </script>

See Also

In this article
Not finding the help you need? Improve this article