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("#"); 

更新：它應該是代替模板