Edit this page

Get the Data of the Last Selected Grid Row

Environment

Product Grid for Progress Kendo UI
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);
            var className = row.className;

            if(className.indexOf("k-state-selected") != -1){
                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

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

Give article feedback

Tell us how we can improve this article

close
Dummy