Kendo UI MVC Grid Row Number с сервером DataSource

Question

Я пытаюсь создать столбец для отображения номера строки с использованием Kendo UI MVC с источником данных с сервера. Я попробовал несколько способов, но номер столбец не показывает ничего, это просто пустой

вот некоторые из способов, которые я пробовал

Первую попытку, используя

с привязкой к данным

@{var counter = 1;} 
<div id="roleContainer"> 
@(Html.Kendo().Grid(Model) 
.Name("RoleGrid") 
.Columns(columns => 
    { 
     columns.Template(t => { }).ClientTemplate(@<text><span class="row-number"></span></text>).Title("No"); 
     columns.Bound(p => p.RoleName).Title("User Role"); 
     columns.Bound(p => p.RoleDescription).Title("Description"); 
     columns.Bound(p => p.RoleCopadUserGroup).Title("COPAD User Group"); 
     columns.Command(command => 
     { 
      command.Custom("View Details").Click("showDetails"); 
      command.Custom("Edit").Click("edit"); 
      command.Destroy(); 
     }).Title("Actions"); 

    }) 
     .Events(events => events.DataBound(
       @<text> 
        function(e){ 
         var rows = this.items(); 
         $(rows).each(function(){ 
          var index = $(this).index() + 1; 
          var rowLabel = $(this).find(".row-number"); 
          $(rowLabel).html(index); 
         }) 
        } 
       </text> 
      )) 
     .ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='createCommand()' href='#'></span>Create</a>")) 
     .Pageable() 
     .Sortable() 
     .Filterable() 
     .DataSource(datasource => datasource 
      .Ajax() 
      .Model(model => model.Id(p => p.UserId)) 
      .PageSize(20) 
      .Destroy(update => update.Action("Delete", "Role")) 
      .ServerOperation(false) 
     ) 
    ) 

Вторая попытка с помощью шаблона

@{var counter = 1;} 
<div id="roleContainer"> 
@(Html.Kendo().Grid(Model) 
.Name("RoleGrid") 
.Columns(columns => 
    { 
     columns.Template(@<text>@counter @{@counter++;}).Title("No"); 
     columns.Bound(p => p.RoleName).Title("User Role"); 
     columns.Bound(p => p.RoleDescription).Title("Description"); 
     columns.Bound(p => p.RoleCopadUserGroup).Title("COPAD User Group"); 
     columns.Command(command => 
     { 
      command.Custom("View Details").Click("showDetails"); 
      command.Custom("Edit").Click("edit"); 
      command.Destroy(); 
     }).Title("Actions"); 

    })    
     .ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='createCommand()' href='#'></span>Create</a>")) 
     .Pageable() 
     .Sortable() 
     .Filterable() 
     .DataSource(datasource => datasource 
      .Ajax() 
      .Model(model => model.Id(p => p.UserId)) 
      .PageSize(20) 
      .Destroy(update => update.Action("Delete", "Role")) 
      .ServerOperation(false) 
     ) 
    ) 
</div> 

Третья попытка, используя Шаблон клиента

@{var counter = 1;} 
<div id="roleContainer"> 
@(Html.Kendo().Grid(Model) 
.Name("RoleGrid") 
.Columns(columns => 
    { 
     columns.Template(t => { }).ClientTemplate(" #= counter++ #").Title("No"); 
     columns.Bound(p => p.RoleName).Title("User Role"); 
     columns.Bound(p => p.RoleDescription).Title("Description"); 
     columns.Bound(p => p.RoleCopadUserGroup).Title("COPAD User Group"); 
     columns.Command(command => 
     { 
      command.Custom("View Details").Click("showDetails"); 
      command.Custom("Edit").Click("edit"); 
      command.Destroy(); 
     }).Title("Actions"); 

    })    
     .ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='createCommand()' href='#'></span>Create</a>")) 
     .Pageable() 
     .Sortable() 
     .Filterable() 
     .DataSource(datasource => datasource 
      .Ajax() 
      .Model(model => model.Id(p => p.UserId)) 
      .PageSize(20) 
      .Destroy(update => update.Action("Delete", "Role")) 
      .ServerOperation(false) 
     ) 
    ) 
</div> 

И даже не один из них что-то показать в HTML, это пустые Любые предложения?

Answer 1

В сортируемой и доступной для просмотра сетке номера строк не имеют смысла. Но если вы настаиваете, у Kendo действительно нет возможности делать номера строк. Я пробовал.

Если вам нужен только клиентский дисплей, вы можете сделать это с помощью css and javascript.

Могу ли я спросить вас, зачем вам это нужно?