Dans le cadre de la mise à niveau de la grille de Kendo, une partie de mon ancien code semble ne pas fonctionner en raison d'un changement de mise en œuvre.
J'ai utilisé events.Change
pour déclencher un événement de clic de ligne (exemple de code ci-dessous)
@(Html.Kendo().Grid(Model.BankSearchList).Name("Grid")
.Events(events =>
{
events.Change("onRowSelected");
events.DataBound("onGrindBound");
})
Dans ma méthode onRowSelected(e)
, j'accédais au membre de la colonne clé à l'aide de
e.row.cells[0].innerHTML
e.row est indéfini maintenant. Quelle est la bonne façon d'utiliser maintenant? Utiliser events.Change
pour la fonctionnalité de ligne sélectionnée est la bonne façon de le faire?
voici comment obtenir le détail de la ligne sélectionnée jsfiddle . Cliquez sur la ligne pour obtenir son détail.
var gview = $("#grid").data("kendoGrid");
//Getting selected item
var selectedItem = gview.dataItem(gview.select());
alert(selectedItem.ShipName);
Exemple - Obtenir le ou les éléments de données sélectionnés lors de l'utilisation de la sélection de ligne
Vous pouvez également faire de même avec l’aide HTML. événement 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>
Exemple - Obtenir le ou les éléments de données sélectionnés lors de l'utilisation de la sélection de 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>
Je dois utiliser events.change pour déclencher un événement de clic de ligne
@(Html.Kendo().Grid(Model.BankSearchList).Name("Grid")
.Events(events =>
{
events.Change("onRowSelected");
})
puis manipulez la fonction onRowSelected
comme:
<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>
alors, la variable item contient tous les détails dont vous avez besoin.
Pour ceux avec 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);
};
};
Assurez-vous d'avoir selectable: 'row'
ou selectable: 'multiple, row'
dans les options de la grille.
function onRowSelected(e) {
var gview = $("#grid").data("kendoGrid");
//Getting selected item
var selectedItem = gview.dataItem(gview.select());
var colValue = selectedItem["<columnName>"];
}