Kendo grid - How to get row information in RowSelected?

Question

As part of the Kendo grid update, some of my old code does not seem to work due to changes in implementation

I used events.Change to trigger a row click event (sample code below)

 @(Html.Kendo().Grid(Model.BankSearchList).Name("Grid") .Events(events => { events.Change("onRowSelected"); events.DataBound("onGrindBound"); }) 

In my onRowSelected(e) method, I accessed the key element of a column using

 e.row.cells[0].innerHTML 

e.row is now undefined. What is the correct way to use now? Using events.Change for a selected string sequence is the right way to do this?

Answer 1

here is a link on how to get the selected jsfiddle row detail . Click on the line to get detailed information.

 var gview = $("#grid").data("kendoGrid"); //Getting selected item var selectedItem = gview.dataItem(gview.select()); alert(selectedItem.ShipName); 

Answer 2

Example - get selected data items when selecting rows

You can do the same with the html helper. onchange.

 <div id="grid"></div> <script> $("#grid").kendoGrid({ columns: [ { field: "name" }, { field: "age" } ], dataSource: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ], selectable: "multiple, row", change: function(e) { var selectedRows = this.select(); var selectedDataItems = []; for (var i = 0; i < selectedRows.length; i++) { var dataItem = this.dataItem(selectedRows[i]); selectedDataItems.push(dataItem); } // selectedDataItems contains all selected data items } }); </script> 

Example - get selected data items using cell select

 <div id="grid"></div> <script> function grid_change(e) { var selectedCells = this.select(); var selectedDataItems = []; for (var i = 0; i < selectedCells.length; i++) { var dataItem = this.dataItem(selectedCells[i].parentNode); if ($.inArray(dataItem, selectedDataItems) < 0) { selectedDataItems.push(dataItem); } } // selectedDataItems contains all selected data items } $("#grid").kendoGrid({ columns: [ { field: "name" }, { field: "age" } ], dataSource: [ { name: "Jane Doe", age: 30 }, { name: "John Doe", age: 33 } ], selectable: "multiple, cell" }); var grid = $("#grid").data("kendoGrid"); grid.bind("change", grid_change); </script> 

Answer 3

I need to use event.change to fire a row click event

 @(Html.Kendo().Grid(Model.BankSearchList).Name("Grid") .Events(events => { events.Change("onRowSelected"); }) 

then process the onRowSelected function as follows:

  <script> var selectedRow = null; //onRowSelected function onRowSelected(e) { var row = this.select(); if (row.length > 0 ) { selectedRow = e.sender.select(); var item = e.sender.dataItem(selectedRow); } } </script> 

therefore, the item variable contains all the data you need.

Answer 4

For those who have AngularJS:

 $scope.gridOptions = { dataSource: gridDataSource, columns: [ { field: 'name' }, { field: 'phone' } ], selectable: 'row', change: function () { var selectedRows = this.select(); var rowData = this.dataItem(selectedRows[0]); console.log(rowData.name + ' ' + rowData.phone); }; }; 

Make sure that the grid settings have selectable: 'row' or selectable: 'multiple, row' .

Answer 5

 function onRowSelected(e) { var gview = $("#grid").data("kendoGrid"); //Getting selected item var selectedItem = gview.dataItem(gview.select()); var colValue = selectedItem["<columnName>"]; }