Get the Selected Grid Rows Data

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	Tested up to version 2017.2 621

Description

How can I create a shopping list by using the selected Grid rows and a Kendo UI for jQuery ListBox?

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 component 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 component 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

• Frequently Asked Questions on Checkbox Selection
• Grid Checkbox Selection Demo
• API Reference for the columns.selectable Configuration