如何在kendo ui grid中选择关键行

时间:2013-06-24 08:16:51

标签: asp.net-mvc kendo-ui kendo-grid kendo-asp.net-mvc

我在asp.net mvc

中使用kendo Ui为create Grid编写此代码
  @(Html.Kendo().Grid(Model)
      .Name("Grid")

      .Columns(columns =>
                   {
                       columns.Bound(p => p.Id).Groupable(false).Visible(false);
                       columns.Bound(p => p.BrandName);
                       columns.Bound(p => p.BrandAbbr);
                       columns.Bound(p => p.SrcImage);

                       columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
                      })

    .ToolBar(toolbar =>
                    {
                        toolbar.Custom().Action("Create","Users").Text("add");                          
                    }
        )
        .Groupable()
        .Pageable()
        .Sortable()
.Scrollable()

        .Filterable()
        .HtmlAttributes(new {style = "height:500px;"})
        .Selectable(selectable => selectable
            .Mode(GridSelectionMode.Multiple)
            .Type(GridSelectionType.Row))  

        .DataSource(dataSource => dataSource
                                    .Server()                           
                                    .Model(model => model.Id(item => item.Id))

      ))   

我希望当用户点击ViewDetails提醒BrandId值列时,请帮助我。谢谢所有

2 个答案:

答案 0 :(得分:15)

你只需要添加javascript函数。

<script type="text/javascript">
    function showDetails(e) {
        e.preventDefault();
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        alert(dataItem.Id);  //considering Id = BrandId
    }
</script>

以下是Kendo Grid Custom Command

的演示

答案 1 :(得分:5)

我也成功地使用了它:

<script type="text/javascript">

function showDetails(e)
{
e.preventDefaults();
 var grid = $("#Grid").data("kendoGrid");

     var selectedItem = grid.dataItem(grid.select());


//you can get the value of any column  after that

alert("Brand Id is : " + selectedItem.Id);
alert("Brand Name is: " + selectedItem.BrandName);

}

</script>