Select Grid Rows Programmatically Based on the DataItem

Environment

Product Progress Kendo UI Grid
Progress Kendo UI version Tested up to version 2017.2 621

Description

I want to have a Grid with some of its checkboxes checked by default when it loads. How can I check checkboxes programmatically by using the selectable column in the Kendo UI Grid?

Solution

  1. In the dataBound event handler, get the rows with the items() method of the grid.
  2. Loop through the rows by using the jQuery each method.
  3. Get every row data by using the dataItem method.
  4. Set the current row as selected by using the select method.
<div id="example">
    <div id="grid"></div>

    <script>
        $(document).ready(function() {
            $("#grid").kendoGrid({
                dataSource: {
                    pageSize: 10,
                    transport: {
                        read: {
                            url: "https://demos.telerik.com/kendo-ui/service/Products",
                            dataType: "jsonp"
                        }
                    },
                    schema: {
                        model: {
                            id: "ProductID"
                        }
                    }
                },
                pageable: true,
                dataBound: function(e) {
                    var grid = this;
                    var rows = grid.items();

                    $(rows).each(function(e) {
                        var row = this;
                        var dataItem = grid.dataItem(row);

                        if (dataItem.UnitPrice >= 22) {
                            grid.select(row);
                        }

                    });
                },
                scrollable: false,
                persistSelection: true,
                sortable: true,
                columns: [{
                        selectable: true,
                        width: "50px"
                    },
                    {
                        field: "ProductName",
                        title: "Product Name"
                    },
                    {
                        field: "UnitPrice",
                        title: "Unit Price",
                        format: "{0:c}"
                    },
                    {
                        field: "UnitsInStock",
                        title: "Units In Stock"
                    },
                    {
                        field: "Discontinued"
                    }
                ]
            });
        });
    </script>
</div>

Notes

The checkbox selectable column is available as of the Kendo UI R2 2017 SP1 release.

See Also

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