Edit this page

Select Grid Rows Programmatically Based on the DataItem

Environment

Product Grid for Progress Kendo UI
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 and save all the rows.
  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 rows = e.sender.tbody[0].rows;

                    $(rows).each(function(e) {
                        var grid = $("#grid").data("kendoGrid");
                        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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy