Kendo UI Grid - 显示行号

Question

如何显示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 }) 
)) 

Answer 1

ClientTemplate这样做：

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

Answer 2

柱ClientTemplate是客户端功能。你不能在其中使用服务器端的变量。你应该定义JavaScript变量：

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

然后，网格内使用：

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

更新：它应该是代替模板