Kendo UI网格-显示行号 [英] Kendo UI Grid - Show row number

问题描述

如何在Kendo UI网格中显示行号?我的代码无法正常工作.该页面显示该列，但该列为空.

How do I show the row number in a Kendo UI Grid? The code I have is not working. The page displays the column but it's empty.

@{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 })
))

推荐答案

执行以下操作:

@{
   int counter = 1;
}

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

或者，如果您的数据源设置为Ajax(客户端)，请执行以下操作:

Or, if your DataSource is set to Ajax (client-side), do this:

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

这篇关于Kendo UI网格-显示行号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！