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

Get the Selected Grid Rows Data


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


How can I get all the data items of the selected rows when using the selectable column in the Kendo UI Grid?


To get the dataItem for each selected row:

  1. In the change event handler, get and save the rows in a variable by using the select method.
  2. Loop through the rows by using the each jQuery method.
  3. Get every row data by using the dataItem method.
<div id="example">
    <div id="grid"></div>

        function onChange(e) {
            var rows =;
            rows.each(function(e) {
                var grid = $("#grid").data("kendoGrid");
                var dataItem = grid.dataItem(this);


        $(document).ready(function() {
                dataSource: {
                    pageSize: 10,
                    transport: {
                        read: {
                            url: "",
                            dataType: "jsonp"
                    schema: {
                        model: {
                            id: "ProductID"
                pageable: true,
                scrollable: false,
                persistSelection: true,
                sortable: true,
                change: onChange,
                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"


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