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

Get the Selected Grid Rows Data

Environment

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

Description

I want to create a shopping list by using the selected Grid rows and a Kendo UI ListBox. How can I achieve this functionality?

The following example obtains the selected rows of the current page only.

Solution

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.
  4. Push the dataItem to an array.
  5. Add the selected items to the ListBox widget by using the data method.
    <div id="example">
      <div id="grid"></div>
      <select id="listBox" style="width:856px;"></select>

      <script>
        function onChange(e) {
          var rows = e.sender.select(),
              items = [];

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

          var listBox = $("#listBox").data("kendoListBox");
          listBox.dataSource.data(items);
        };

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

          $("#listBox").kendoListBox({
            dataSource: {
              data: []
            },
            template: "<div>#:ProductName# - $#:UnitPrice#</div>"
          });
        });
      </script>
    </div>

Notes

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

Get the Selected Rows Data Across All Grid Pages

  1. Get the id field values of the selected rows through the selectedKeyNames() method.
  2. Traverse the Grid data to match the data items holding these id values.
  3. Push the dataItems of the selected rows to an array.
  4. Add the selected items to the ListBox widget by using the data method.
    <div id="example">
      <button class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" onclick="getSelectedRowsData()"><span class="k-button-text">Update List</span></button>
      <div id="grid"></div>
      <h4>Shopping List</h4>
      <select id="listBox" style="width:856px;"></select>

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

          $("#listBox").kendoListBox({
            dataSource: {
              data: []
            },
            template: "<div>#:ProductName# - $#:UnitPrice#</div>"
          });
        });

        function getSelectedRowsData() {
          //Get the id field values of the selected rows
          var keyNames = $("#grid").data("kendoGrid").selectedKeyNames();
          // convert string values to number
          var ids = keyNames.map(function (x) { 
            return parseInt(x, 10); 
          });
          var gridData = $("#grid").data("kendoGrid").dataSource.data();
          var selected =[];
          ids.forEach(function(number) {
            gridData.forEach(function(dataItem) {
              if(number === dataItem.id) {
                selected.push(dataItem)
              }
            }) 
          });
          var listBox = $("#listBox").data("kendoListBox");
          listBox.dataSource.data(selected);
        }
      </script>
    </div>

See Also

In this article