Griglia Kendo - Come ottenere i dettagli della riga su RowSelected?

Question

Come parte del Kendo aggiornamento griglia, alcuni dei miei vecchio codice non sembra essere di lavoro dovute al mutamento di realizzazione

ho usato events.Change per attivare un evento fila click (codice di esempio riportato di seguito)

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

nel mio metodo onRowSelected(e), mi stava accedendo membro colonna chiave usando

e.row.cells[0].innerHTML 

e.row non è definito ora. Qual è il modo giusto per utilizzare ora? L'utilizzo di events.Change per le funzionalità selezionate di riga è il modo giusto per farlo?

Answer 1

qui è un riferimento su come ottenere il dettaglio di riga selezionato jsfiddle. clicca sulla riga per ottenere i suoi dettagli.

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

Answer 2

Esempio - ottenere il dato selezionato (s) quando si utilizza la selezione fila

Lo stesso si può fare usando l'helper HTML. evento 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> 

Esempio - ottenere il dato selezionato (s) quando si utilizza la selezione delle cellule

<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

devo usare events.change per sparare un evento fila click

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

quindi gestire la funzione onRowSelected come:

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

quindi, la variabile oggetto contiene tutti i dettagli necessari.

Answer 4

Per quelli con 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); 
    }; 
}; 

Assicurarsi di avere selectable: 'row' o selectable: 'multiple, row' nelle opzioni della griglia.

Answer 5

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