web-dev-qa-db-ja.com

剣道グリッド-RowSelectedで行の詳細を取得する方法？

剣道グリッドのアップグレードの一環として、実装の変更が原因で古いコードの一部が機能していないようです

_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.rowは現在未定義です。現在の正しい使用方法は何ですか？行選択機能に_events.Change_を使用する正しい方法は？

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

これは、選択された行の詳細を取得する方法のリファレンス jsfiddle です。行をクリックして詳細を取得します。

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

例-行選択を使用するときに選択したデータ項目を取得する

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

行クリックイベントを発生させるには、events.changeを使用する必要があります。

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

次に、onRowSelected関数を次のように処理します。

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

したがって、項目変数には必要なすべての詳細が含まれています。

5
Mohammad Jihad Helal

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'グリッドオプション。

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