Kendo UI Grid - 显示行号

Posted

技术标签:

【中文标题】Kendo UI Grid - 显示行号【英文标题】:Kendo UI Grid - Show row number 【发布时间】:2016-02-23 04:35:00 【问题描述】:

如何在 Kendo UI Grid 中显示行号?我的代码不起作用。该页面显示该列,但它是空的。

@int counter = 1;

@(html.Kendo().Grid<QueueViewModel>()
      .Name("Queue")
      .Columns(columns =>
      
          columns.Template(@<text><span>@counter @ counter++; </span></text>).Title("#");
      )
     .DataSource(dataSource => dataSource
     .Ajax()
     .PageSize(10) 
     .Read(read => read.Action("GetOpenQueue", "DataSource", new  GeneralQueue = true )
))

【问题讨论】:

DataSource 设置为 Server 还是 Ajax?发布整个网格。 【参考方案1】:

这样做:

@
   int counter = 1;


@(Html.Kendo().Grid<QueueViewModel>()
      .Name("Queue")
      .Columns(columns =>
      
          columns.Template(@<text><span>@(counter++)</span></text>).Title("#");
      )

或者,如果您的 DataSource 设置为 Ajax(客户端),请执行以下操作:

<script>
    var counter = 1;

    function onDataBound(e) 
        counter = 1;
    

    function renderNumber(data) 
        return counter++;
        
</script>

@(Html.Kendo().Grid()   
    .Name("Queue")
    .Columns(columns => 
        columns.Template(t =>  ).ClientTemplate("#= renderNumber(data) #").Title("#");
    )
    .Events(ev => ev.DataBound("onDataBound"))
)

【讨论】:

【参考方案2】:

列 ClientTemplate 是客户端功能。您不能在其中使用服务器端变量。你应该定义 javascript 变量:

<script>
    var i = 1;
</script>

然后,在网格内使用这个:

columns.Template(t =>  ).ClientTemplate(#=i++#).Title("#");

更新:应该是 ClientTemplate 而不是 Template

【讨论】:

column.Template 是服务器端功能。 ClientTemplate 是客户端。 我的错,应该是ClientTemplate,我不小心粘贴了自己的kendo mvc包装代码【参考方案3】:

试试这种方式在javascript中,代码也会支持分页

        <script type="text/javascript"> 
            var CountIt = 0 
            function GetCountIt()  
                var page = $("#YourGrid").data("kendoGrid").dataSource.page();
                var pageSize = $("#YourGrid").data("kendoGrid").dataSource.pageSize();
                CountIt++;
                return (page * pageSize) - pageSize + CountIt 
            

            function YourGrid_DataBound()  
                CountIt = 0; $('#YourGrid').data('kendoGrid').pager.unbind("change").bind('change', function (e) 
                    CountIt = 0
                )
            

        </script>

然后添加到您的 kindo 网格中

       .Events(events =>
       
          events.DataBound("YourGrid_DataBound"); 
       )
       .Columns(columns =>
        
    columns.Bound("").ClientTemplate("#=GetCountIt()#").Title("Sr.").Width(50);
...

【讨论】:

以上是关于Kendo UI Grid - 显示行号的主要内容,如果未能解决你的问题,请参考以下文章

fine ui grid控件添加行号

dev 显示行号

Easy UI行号位数多显示有问题

Kendo UI Grid 使用总结

Kendo UI Grid:自定义下拉提供程序在视图模式下不显示文本

从下拉列表中选择选项后,Kendo UI Grid 中的下拉菜单显示对象-对象