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

Select Rows on Conditions

Environment

Product Version 2017.3 1026
Product Progress® Kendo UI® Grid for jQuery

Description

How can I disable the selection of specific rows in the Grid?

Solution

  1. Handle the change event of the Grid.
  2. In the event handler, based on a condition, remove the k-selected class from the desired rows.
<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        columns: [{
                field: "name"
            },
            {
                field: "canSelect"
            }
        ],
        dataSource: [{
                name: "Name0",
                canSelect: true
            },
            {
                name: "Name1",
                canSelect: false
            },
            {
                name: "Name2",
                canSelect: false
            },
            {
                name: "Name3",
                canSelect: true
            },
            {
                name: "Name4",
                canSelect: true
            },
            {
                name: "Name5",
                canSelect: false
            }
        ],
        selectable: "multiple, row",
        change: function(e) {
            var items = e.sender.select();
            var grid = e.sender;

            items.each(function(i, e) {
                var dataItem = grid.dataItem(e);
                if (dataItem.canSelect === false) {
                    $(e).removeClass("k-selected");
                }
            });
        }
    });
</script>
In this article