如何在 kendo ui 网格中选择关键行

Posted

技术标签:

【中文标题】如何在 kendo ui 网格中选择关键行【英文标题】:how to get key row selected in kendo ui grid 【发布时间】:2013-06-20 16:28:32 【问题描述】:

我编写这段代码是为了在 asp.net mvc 中使用剑道 Ui 创建网格

  @(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值列时,请帮助我。谢谢大家

【问题讨论】:

【参考方案1】:

你只需要添加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的demo

【讨论】:

【参考方案2】:

我也成功使用了这个:

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

【讨论】:

以上是关于如何在 kendo ui 网格中选择关键行的主要内容,如果未能解决你的问题,请参考以下文章

Kendo UI:Kendo 网格的惰性绑定

编辑网格时,如何按行禁用特定字段? Kendo UI ASP.Net MVC 包装器

弹出窗口在 Kendo UI 网格中的工作原理以及如何在 MVC4 的 Kendo UI ajax 网格中将控件带入弹出窗口

Angular 的 Kendo UI:如何在网格中定义最小宽度

Kendo UI网格行中弹出窗口中的文件附件

使用cypress在Kendo UI网格中选择一行