Lưới Kendo - Cách lấy chi tiết hàng trên RowSelected?

Question

Là một phần của nâng cấp lưới Kendo, một số mã cũ của tôi có vẻ là không làm việc do thay đổi trong việc thực hiện

Tôi đã sử dụng events.Change để kích hoạt một sự kiện hàng nhấp chuột (Mẫu mã bên dưới)

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

trong phương pháp onRowSelected(e) của tôi, tôi đã tiếp cận thành viên cột quan trọng sử dụng

e.row.cells[0].innerHTML 

e.row là undefined bây giờ. Cách đúng để sử dụng ngay bây giờ là gì? Sử dụng events.Change cho chức năng được chọn hàng đúng cách để làm như vậy?

Answer 1

đây là tham chiếu về cách lấy chi tiết hàng đã chọn jsfiddle. bấm vào hàng để có được chi tiết của nó.

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

Answer 2

Ví dụ - được mục dữ liệu đã chọn (s) khi sử dụng lựa chọn hàng

Cùng bạn có thể làm bằng cách sử dụng helper html là tốt. sự kiện trao đổi.

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

Ví dụ - được mục dữ liệu đã chọn (s) khi sử dụng lựa chọn ô

<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

tôi phải sử dụng events.change bắn một sự kiện hàng nhấp chuột

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

sau đó xử lý chức năng onRowSelected là:

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

vì vậy, biến mục chứa tất cả chi tiết bạn cần.

Answer 4

Đối với những người 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); 
    }; 
}; 

Hãy chắc chắn để có selectable: 'row' hoặc selectable: 'multiple, row' trong các tùy chọn lưới.

Answer 5

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