title: Kendo UI MVC Grid Row Number with Server DataSource
body: <p>I'm trying to create a column to show row number using Kendo UI MVC with datasource from server. I've tried several ways, but the number column doesn't show anything, it's just plain empty</p>
  
  <p>here is some of ways that i've tried</p>
  
  <p>First Attempt, using databound</p>
  
  <pre><code>@{var counter = 1;}
  &lt;div id="roleContainer"&gt;
  @(Html.Kendo().Grid(Model)
  .Name("RoleGrid")
  .Columns(columns =&gt;
      {
          columns.Template(t =&gt; { }).ClientTemplate(@&lt;text&gt;&lt;span class="row-number"&gt;&lt;/span&gt;&lt;/text&gt;).Title("No");
          columns.Bound(p =&gt; p.RoleName).Title("User Role");
          columns.Bound(p =&gt; p.RoleDescription).Title("Description");
          columns.Bound(p =&gt; p.RoleCopadUserGroup).Title("COPAD User Group");
          columns.Command(command =&gt;
          {
              command.Custom("View Details").Click("showDetails");
              command.Custom("Edit").Click("edit");
              command.Destroy();
          }).Title("Actions");
  
      })
          .Events(events =&gt; events.DataBound(
                  @&lt;text&gt;
                      function(e){
                           var rows = this.items();
                           $(rows).each(function(){
                              var index = $(this).index() + 1;
                              var rowLabel = $(this).find(".row-number");
                              $(rowLabel).html(index);
                           })
                      }
                  &lt;/text&gt;
              ))
          .ToolBar(toolBar =&gt; toolBar.Template("&lt;a class='k-button k-button-icontext' onclick='createCommand()' href='#'&gt;&lt;/span&gt;Create&lt;/a&gt;"))
          .Pageable()
          .Sortable()
          .Filterable()
          .DataSource(datasource =&gt; datasource
              .Ajax()
              .Model(model =&gt; model.Id(p =&gt; p.UserId))
              .PageSize(20)
              .Destroy(update =&gt; update.Action("Delete", "Role"))
              .ServerOperation(false)
           )
      )
  </code></pre>
  
  <p>     </p>
  
  <p>Second attempt using template</p>
  
  <pre><code>@{var counter = 1;}
  &lt;div id="roleContainer"&gt;
  @(Html.Kendo().Grid(Model)
  .Name("RoleGrid")
  .Columns(columns =&gt;
      {
          columns.Template(@&lt;text&gt;@counter @{@counter++;}).Title("No");
          columns.Bound(p =&gt; p.RoleName).Title("User Role");
          columns.Bound(p =&gt; p.RoleDescription).Title("Description");
          columns.Bound(p =&gt; p.RoleCopadUserGroup).Title("COPAD User Group");
          columns.Command(command =&gt;
          {
              command.Custom("View Details").Click("showDetails");
              command.Custom("Edit").Click("edit");
              command.Destroy();
          }).Title("Actions");
  
      })            
          .ToolBar(toolBar =&gt; toolBar.Template("&lt;a class='k-button k-button-icontext' onclick='createCommand()' href='#'&gt;&lt;/span&gt;Create&lt;/a&gt;"))
          .Pageable()
          .Sortable()
          .Filterable()
          .DataSource(datasource =&gt; datasource
              .Ajax()
              .Model(model =&gt; model.Id(p =&gt; p.UserId))
              .PageSize(20)
              .Destroy(update =&gt; update.Action("Delete", "Role"))
              .ServerOperation(false)
           )
      )
  &lt;/div&gt;
  </code></pre>
  
  <p>Third Attempt, using client template</p>
  
  <pre><code>@{var counter = 1;}
  &lt;div id="roleContainer"&gt;
  @(Html.Kendo().Grid(Model)
  .Name("RoleGrid")
  .Columns(columns =&gt;
      {
          columns.Template(t =&gt; { }).ClientTemplate(" #= counter++ #").Title("No");
          columns.Bound(p =&gt; p.RoleName).Title("User Role");
          columns.Bound(p =&gt; p.RoleDescription).Title("Description");
          columns.Bound(p =&gt; p.RoleCopadUserGroup).Title("COPAD User Group");
          columns.Command(command =&gt;
          {
              command.Custom("View Details").Click("showDetails");
              command.Custom("Edit").Click("edit");
              command.Destroy();
          }).Title("Actions");
  
      })            
          .ToolBar(toolBar =&gt; toolBar.Template("&lt;a class='k-button k-button-icontext' onclick='createCommand()' href='#'&gt;&lt;/span&gt;Create&lt;/a&gt;"))
          .Pageable()
          .Sortable()
          .Filterable()
          .DataSource(datasource =&gt; datasource
              .Ajax()
              .Model(model =&gt; model.Id(p =&gt; p.UserId))
              .PageSize(20)
              .Destroy(update =&gt; update.Action("Delete", "Role"))
              .ServerOperation(false)
           )
      )
  &lt;/div&gt;
  </code></pre>
  
  <p>And not even one of them show something in html, it's empty
  Any suggestions?</p>