Styling Rows

Generally, to apply some style to a specific row, you may use the $change key of the scheme parameter. The key is a function that runs each time data are changed in the grid. As a parameter, the function takes the data item object.

// General styling of rows
<style>
  .highlight{
    background-color:#FFAAAA;
  }
</style>

<script>
webix.grid({
    scheme:{
    $change:function(item){
      if (item.year > 1980)
        item.$css = "highlight";
    }
  },
  columns:[
    { id:"title", header:"Film title"},
        { id:"votes", header:"Votes"}
    ]
});
</script>

If you specify data directly inside the DataGrid constructor, you have one more way to set the desired style for a row.

You can use the $css attribute inside the data parameter to set the desired style.

Note

We don’t recommend to dynamically change attributes with the ’$’ prefix (e.g. $css, $cellCss). Please, use the addCellCss, addRowCss methods instead.

// Setting rows style directly in the dataset
<style>
  .my_style{
    background-color:#FFAAAA;
  }
</style>

<script>
webix.grid({
  columns:[
    { id:"title",  header:"Film title"},
    { id:"votes",  header:"Votes"}
  ],
  data:[
    {
      id:1,
          $css:"my_style",
          title:"The Shawshank Redemption",
          votes:678790
        },
    {
      id:2,
          $css:{ "text-align":"right" },
          title:"The Godfather",
          votes:511495,
    }
  ]
});
</script>

you can check the full snippet Rows Styling

Applying hover styles

You can specify a custom style for selection of a row when the mouse pointer is over it.

For this purpose, you should define your CSS style in the hover property.

<style>
  .myhover{
    background: #F0DCB6;
  }
</style>

<script>
webix.grid({
  columns:[
    { id:"title",  header:"Film title",  width:200},
    { id:"year",  header:"Released",     width:80},
    { id:"votes",  header:"Votes",     width:100}
  ],
  hover:"myhover"
});
</script>

you can check the full snippet Row Hover