javascript - Getting checked rows from kendo grid

Javascript - Getting checked rows from kendo grid

To retrieve the checked rows from a Kendo UI Grid using JavaScript, you can follow these steps. Kendo UI Grid provides methods to iterate over rows and check their selection status. Here's how you can achieve this:

Example HTML and JavaScript Setup

Assume you have a Kendo UI Grid initialized and you want to retrieve checked rows:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kendo UI Grid - Get Checked Rows</title> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.914/styles/kendo.common.min.css"> <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.3.914/styles/kendo.default.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://kendo.cdn.telerik.com/2021.3.914/js/kendo.all.min.js"></script> </head> <body> <div id="grid"></div> <script> $(document).ready(function() { $("#grid").kendoGrid({ dataSource: { data: [ { id: 1, name: "John Doe", age: 30, isChecked: false }, { id: 2, name: "Jane Smith", age: 25, isChecked: true }, { id: 3, name: "Michael Johnson", age: 35, isChecked: false } ], schema: { model: { id: "id", fields: { id: { type: "number" }, name: { type: "string" }, age: { type: "number" }, isChecked: { type: "boolean" } } } } }, columns: [ { selectable: true, width: "50px" }, { field: "name", title: "Name" }, { field: "age", title: "Age" } ], selectable: "multiple", change: function(e) { var selectedRows = this.select(); // Get selected rows var checkedRows = []; selectedRows.each(function(index, row) { var dataItem = $("#grid").data("kendoGrid").dataItem(row); if (dataItem.isChecked) { checkedRows.push(dataItem); } }); console.log("Checked Rows:", checkedRows); } }); }); </script> </body> </html>

Explanation:

  1. HTML and JavaScript Setup:

    • Include necessary Kendo UI CSS and JavaScript files.
    • Define a div with id="grid" where the Kendo UI Grid will be initialized.

  2. Kendo UI Grid Initialization:

    • Initialize the Kendo UI Grid using $("#grid").kendoGrid({...});.
    • Provide a dataSource with sample data (data array).
    • Define columns (columns array) for the grid (selectable: true enables row selection).

  3. Event Handling (change event):

    • Use the change event to handle selection changes in the grid.
    • this.select() retrieves all selected rows.
    • Iterate over selected rows using selectedRows.each(function(index, row) {...});.
    • Access each row's data item using $("#grid").data("kendoGrid").dataItem(row);.
    • Check isChecked property to determine if the row is checked.
    • Collect checked rows into the checkedRows array.

  4. Console Output:

    • Log checkedRows array to the console, displaying all rows that are checked.

Notes:

  • Customization: Adjust dataSource configuration, column definitions (columns), and event handling (change) according to your specific requirements.

  • Data Binding: Ensure your dataSource schema (model and fields) matches the structure of your data to enable proper binding and access using dataItem.

  • Dependencies: Ensure that jQuery and Kendo UI JavaScript and CSS files are included and accessible in your project.

This example demonstrates how to retrieve checked rows from a Kendo UI Grid using JavaScript. Adapt and extend this approach based on your application's needs and further interaction requirements with the grid.

Examples

  1. Kendo Grid get selected rows checkbox

    Description: This query demonstrates how to retrieve selected rows (checkboxes checked) from a Kendo Grid.

    var grid = $("#grid").data("kendoGrid"); var selectedRows = grid.select(); var checkedRows = []; selectedRows.each(function (index, row) { var dataItem = grid.dataItem(row); checkedRows.push(dataItem); }); console.log(checkedRows);

    Code Explanation: Retrieves the selected rows from the Kendo Grid #grid, iterates over them, and pushes the corresponding data items into the checkedRows array.

  2. Kendo Grid get checked rows checkbox

    Description: This query shows how to get rows with checkboxes checked in a Kendo Grid.

    var grid = $("#grid").data("kendoGrid"); var checkedRows = []; grid.tbody.find('input[type="checkbox"]:checked').each(function () { var row = $(this).closest("tr"); var dataItem = grid.dataItem(row); checkedRows.push(dataItem); }); console.log(checkedRows);

    Code Explanation: Finds checkboxes that are checked within the Kendo Grid #grid, retrieves the corresponding rows, and pushes the data items into the checkedRows array.

  3. Kendo Grid get checked items

    Description: This query demonstrates how to get checked items from a Kendo Grid, assuming checkboxes are used for selection.

    var grid = $("#grid").data("kendoGrid"); var checkedItems = grid.dataSource.data().filter(function (item) { return item.Selected; // Assuming 'Selected' is a boolean property }); console.log(checkedItems);

    Code Explanation: Filters the dataSource of the Kendo Grid #grid to get items where the Selected property is true, assuming checkboxes represent selection.

  4. Kendo Grid get selected rows

    Description: This query shows how to get selected rows from a Kendo Grid when using row selection.

    var grid = $("#grid").data("kendoGrid"); var selectedRows = grid.select(); var selectedDataItems = []; selectedRows.each(function (index, row) { var dataItem = grid.dataItem(row); selectedDataItems.push(dataItem); }); console.log(selectedDataItems);

    Code Explanation: Retrieves selected rows from the Kendo Grid #grid and pushes corresponding data items into the selectedDataItems array.

  5. Kendo Grid get checked rows using MVVM

    Description: This query demonstrates how to get checked rows in a Kendo Grid using MVVM (Model-View-ViewModel) pattern.

    var viewModel = kendo.observable({ selectedRows: [], gridData: new kendo.data.DataSource({ data: [] }), updateSelectedRows: function () { var selectedRows = this.get("gridData").data().filter(function (item) { return item.Selected; // Assuming 'Selected' is a boolean property }); this.set("selectedRows", selectedRows); } }); var grid = $("#grid").kendoGrid({ dataSource: viewModel.gridData, selectable: "multiple, row", change: function (e) { viewModel.updateSelectedRows(); } }).data("kendoGrid"); console.log(viewModel.selectedRows);

    Code Explanation: Uses MVVM pattern with a Kendo Observable object (viewModel) to track selected rows in the Kendo Grid. The updateSelectedRows function filters gridData based on the Selected property and updates selectedRows.

  6. Kendo Grid get checked rows using checkboxes

    Description: This query shows how to get checked rows in a Kendo Grid when using checkboxes for selection.

    var grid = $("#grid").data("kendoGrid"); var checkedRows = []; grid.tbody.find('input[type="checkbox"]:checked').each(function () { var row = $(this).closest("tr"); var dataItem = grid.dataItem(row); checkedRows.push(dataItem); }); console.log(checkedRows);

    Code Explanation: Finds checkboxes that are checked within the Kendo Grid #grid, retrieves the corresponding rows, and pushes the data items into the checkedRows array.

  7. Kendo Grid get checked rows using custom command

    Description: This query demonstrates how to get checked rows in a Kendo Grid using a custom command.

    var grid = $("#grid").kendoGrid({ dataSource: { data: [ { Id: 1, Name: "Item 1", Selected: false }, { Id: 2, Name: "Item 2", Selected: true }, { Id: 3, Name: "Item 3", Selected: false } ] }, columns: [ { selectable: true, width: "50px" }, { field: "Name", title: "Name" } ], selectable: "multiple", change: function (e) { var selectedDataItems = this.select().map(function (idx, elem) { return grid.dataItem(elem); }).toArray(); console.log(selectedDataItems); } }).data("kendoGrid");

    Code Explanation: Defines a Kendo Grid #grid with a custom command that handles row selection. Retrieves selected rows and logs them to the console.

  8. Kendo Grid get selected rows using checkbox column

    Description: This query shows how to get selected rows in a Kendo Grid using a checkbox column for selection.

    var grid = $("#grid").kendoGrid({ dataSource: { data: [ { Id: 1, Name: "Item 1", Selected: false }, { Id: 2, Name: "Item 2", Selected: true }, { Id: 3, Name: "Item 3", Selected: false } ] }, columns: [ { selectable: true, width: "50px" }, { field: "Name", title: "Name" } ], selectable: "multiple", change: function (e) { var selectedRows = []; this.tbody.find('input[type="checkbox"]:checked').each(function () { var row = $(this).closest("tr"); var dataItem = grid.dataItem(row); selectedRows.push(dataItem); }); console.log(selectedRows); } }).data("kendoGrid");

    Code Explanation: Defines a Kendo Grid #grid with a checkbox column for selection. Retrieves selected rows based on checkboxes checked and logs them to the console.

  9. Kendo Grid get checked rows on button click

    Description: This query demonstrates how to get checked rows in a Kendo Grid when a button is clicked.

    $("#getCheckedRowsBtn").click(function () { var grid = $("#grid").data("kendoGrid"); var checkedRows = []; grid.tbody.find('input[type="checkbox"]:checked').each(function () { var row = $(this).closest("tr"); var dataItem = grid.dataItem(row); checkedRows.push(dataItem); }); console.log(checkedRows); });

    Code Explanation: Defines a button with id="getCheckedRowsBtn" that, when clicked, retrieves checked rows from the Kendo Grid #grid and logs them to the console.

  10. Kendo Grid get selected rows on row select

    Description: This query shows how to get selected rows in a Kendo Grid when rows are selected.

    var grid = $("#grid").kendoGrid({ dataSource: { data: [ { Id: 1, Name: "Item 1", Selected: false }, { Id: 2, Name: "Item 2", Selected: true }, { Id: 3, Name: "Item 3", Selected: false } ] }, columns: [ { selectable: true, width: "50px" }, { field: "Name", title: "Name" } ], selectable: "multiple", change: function (e) { var selectedDataItems = this.select().map(function (idx, elem) { return grid.dataItem(elem); }).toArray(); console.log(selectedDataItems); } }).data("kendoGrid");

    Code Explanation: Defines a Kendo Grid #grid with rows selectable. Retrieves selected rows when rows are selected and logs them to the console.

More Tags

migration heatmap android-nestedscrollview vhosts hsts system flatpickr aem fragment-tab-host pinterest

More Programming Questions

More Stoichiometry Calculators

More Fitness-Health Calculators

More Mortgage and Real Estate Calculators

More Organic chemistry Calculators