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

- Ram

---

数据源设置为服务器还是Ajax？请发布整个网格。 - ataravati

Answer 1

请执行以下操作：

@{
   int counter = 1;
}

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

或者，如果您的数据源设置为 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"))
)

- ataravati

---

columns.Template(t => { }).ClientTemplate("#= renderNumber(data) #").Title("#");出现错误："无法将 lambda 表达式转换为 'string' 类型，因为它不是委托类型"。 - sina_Islam

Answer 2

尝试这种方法，在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);
...

- Adel

Answer 3

Column ClientTemplate 是客户端功能，您不能在其中使用服务器端变量。您应该定义 Javascript 变量：

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

然后，在网格内使用以下内容：

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

更新：应该使用ClientTemplate而不是Template

- Gene R

---

column.Template 是服务器端功能。ClientTemplate 是客户端。 - ataravati

我的错，应该是ClientTemplate，我不小心粘贴了自己的kendo mvc包装器代码。 - Gene R