Get the Data of the Last Selected Grid Row

Environment

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

Description

How can I get the data item of the last selected row by using the checkbox selectable column in the Kendo UI Grid?

Solution

To get the dataItem for the last selected row:

  1. Subscribe for the click event of the checkboxes by using a jQuery selector.
  2. In the click event handler, get the row by using the closest jQuery method.
  3. Get the row data by using the dataItem method of the Grid.
<div id="example">
    <div id="grid"></div>

    <script>
        function onClick(e) {
            var grid = $("#grid").data("kendoGrid");
            var row = $(e.target).closest("tr");
            var dataItem = grid.dataItem(row);

            if(row.hasClass("k-state-selected")){
                console.log("Deselecting");
            }else{
                console.log("Selecting");
            }

            console.log(dataItem);
        };

        $(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,
                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"
                    }
                ]
            });

            var grid = $("#grid").data("kendoGrid");

            grid.tbody.on("click", ".k-checkbox", onClick);
        });
    </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