javascript - kendo - telerik

Rejilla Kendo: cómo obtener los detalles de la fila en RowSelected?

Question

Como parte de la actualización de la red Kendo, parte de mi código anterior parece no funcionar debido a cambios en la implementación

He utilizado events.Change para desencadenar un evento de clic de fila (código de ejemplo a continuación)

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

En mi onRowSelected(e) , estaba accediendo al miembro clave de la columna usando

e.row.cells[0].innerHTML

e.row no está definido ahora. ¿Cuál es la forma correcta de usar ahora? Usar events.Change funcionalidad seleccionada de la fila de la manera correcta para hacerlo?

Answer 1

aquí hay una referencia sobre cómo obtener el detalle de la fila jsfiddle seleccionado. haga clic en la fila para obtener su detalle.

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

Answer 2

Ejemplo: obtener los elementos de datos seleccionados al usar la selección de filas

Lo mismo puedes hacer usando el helper html también. evento de cambio

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

Ejemplo: obtener los elementos de datos seleccionados al usar la selección de celda

<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

Tengo que usar events.change para activar un evento de clic de fila

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

luego maneje la función onRowSelected como:

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

por lo tanto, la variable del elemento contiene todos los detalles que necesita.

Answer 4

Para aquellos 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);
};
};

Asegúrese de tener selectable: ''row'' o selectable: ''multiple, row'' en las opciones de la cuadrícula.

Answer 5

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