Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Kendo grid - How to get the row details on RowSelected?

As part of Kendo grid upgrade, some of my old code seems to be not working due to change in implementation

I have 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 was accessing key column member using

e.row.cells[0].innerHTML

e.row is undefined now. What is the right way to use now? Using events.Change for row selected functionality the right way to do so?

like image 527
KeenUser Avatar asked May 09 '14 08:05

KeenUser


People also ask

How do I get the edited row in kendo grid?

dataSource. get(e. model. get("Id")) gets the newly added row, but if multiple rows were added before saving, it will always get the first added row ("Id" is set to auto increment and is automatically generated by the database server, therefore all newly created rows will initially have 0 before saving).

How do I find row number in kendo grid?

var selectedRow = grid. select(); var selectedRowIndex = selectedRow. index();

How do I get column values in kendo grid?

You can get the cell value from the model of a grid. Option 1: $("#grid"). data("kendoGrid").


4 Answers

here is reference on how to get selected row detail jsfiddle . click on row to get its detail.

var gview = $("#grid").data("kendoGrid");
//Getting selected item
var selectedItem = gview.dataItem(gview.select());
alert(selectedItem.ShipName);
like image 186
Dave Avatar answered Sep 22 '22 11:09

Dave


For those with 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 to have selectable: 'row' or selectable: 'multiple, row' in the grid options.

like image 39
Nelu Avatar answered Sep 22 '22 11:09

Nelu


Example - get the selected data item(s) when using row selection

The same you can do using the html helper as well. onchange event.

<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 the selected data item(s) when using cell selection

<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>
like image 21
Amit Avatar answered Sep 19 '22 11:09

Amit


I have to use events.change to fire a row click event

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

then handle the onRowSelected function as :

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

so, the item variable contain all details you needs.

like image 22
Mohammad Jihad Helal Avatar answered Sep 22 '22 11:09

Mohammad Jihad Helal