如何獲得劍道格行選擇

Question

如何啓用劍道UI網格行的選擇。我使用HTML輔助函數創建一個劍道電網通過JavaScript訪問，並啓用了行selction，但沒有運氣代碼如下所示

@(Html.Kendo().Grid((IEnumerable<Gridkendo.Models.Model>)Model) 
    .Name("grid") 
    .Columns(columns => 
    { 
     // Create a column bound to the ProductID property 
     columns.Bound(product => product.Name); 
     // Create a column bound to the ProductName property 
     columns.Bound(product => product.Description); 

和訪問它在JavaScript

<script> 
    $(function() { 
     // Notice that the Name() of the grid is used to get its client-side instance 
     var grid = $("#grid").data("kendoGrid"); 
     var selectedItem = grid.dataItem(grid.select()); 
     alert(selectedItem.ShipName); 
    }); 
</script> 

Answer 1

您需要添加Selectable()配置方法。這將使默認的行選擇，

@(Html.Kendo().Grid((IEnumerable<Gridkendo.Models.Model>)Model) 
    .Name("grid") 
    .Columns(columns => 
    { 
     // Create a column bound to the ProductID property 
     columns.Bound(product => product.Name); 
     // Create a column bound to the ProductName property 
     columns.Bound(product => product.Description); 
    }) 
    .Selectable() 
) 

注意，你得到的document ready事件所選擇的項目。這意味着網格剛剛初始化，並且不可能選擇任何行。更好的方法是使用「選擇」事件，在輔助配置：

@(Html.Kendo().Grid((IEnumerable<Gridkendo.Models.Model>)Model) 
    .Name("grid") 
    .Columns(columns => 
    { 
     // Create a column bound to the ProductID property 
     columns.Bound(product => product.Name); 
     // Create a column bound to the ProductName property 
     columns.Bound(product => product.Description); 
    }) 
    .Selectable() 
    .Events(ev => ev.Change("doOnRowSelect")) 
) 

然後，您需要定義doOnRowSelect JavaScript函數：

function doOnRowSelect(e) { 
    var selectedItem = this.dataItem(this.select()); 
    alert(selectedItem.ShipName); 
} 

編輯：上述方法（在至少JavaScript部分）只在數據通過AJAX加載時才起作用。然而，當從Model加載數據時，行選擇也應該起作用。在這種護理，所選擇的行會有k-state-selected類：

function getSelectedItem() { 
    var grid = $("#grid").data("kendoGrid"); 
    var selectedRows = $(".k-state-selected", "#grid"); 
    if (selectedRows.length > 0) { 
     var selectedItem = grid.dataItem(selectedRows[0]); 
     alert(selectedItem.ShipName); 
    } 
}