web-dev-qa-db-fra.com

Kendo grid - Comment obtenir les détails d'une ligne sur RowSelected?

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?

javascriptjquerykendo-uikendo-gridkendo-asp.net-mvc
8
KeenUser

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);
12
Dave

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

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.

5
Mohammad Jihad Helal

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.

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