Kendo grid-как получить сведения о строке на RowSelected?

в рамках обновления сетки Kendo некоторые из моих старых кодов, похоже, не работают из-за изменения в реализации

я использовал events.Change чтобы вызвать событие щелчка строки (пример кода ниже)

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

в своем onRowSelected(e) метод, я получал доступ к ключевому члену столбца, используя

e.row.cells[0].innerHTML

e.строка теперь не определена. Как правильно использовать сейчас? Используя events.Change для выбранной строки функциональности правильный способ сделать это?

5 ответов


вот ссылка на то, как получить выбранную строку detail jsfiddle . нажмите на строку, чтобы получить его детали.

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

пример-получить выбранный элемент(ы) данных при использовании выбора строки

то же самое вы можете сделать с помощью помощника html. событие 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>

пример-получить выбранный элемент(ы) данных при использовании выбора ячейки

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

Я должен использовать события.измените, чтобы запустить событие щелчка строки

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

затем обрабатывать


для тех, кто с 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);
    };
};

обязательно selectable: 'row' или selectable: 'multiple, row' в "параметры сетки".


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