Kendo UI MVC Grid Row Number with Server DataSource - asp.net-mvc

Question

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
here is some of ways that i've tried
First Attempt, using databound
#{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)
)
)
Second attempt using template
#{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>
Third Attempt, using client template
#{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>
And not even one of them show something in html, it's empty
Any suggestions?

Answer 1

In sortable and pageable grid, row numbers kinda don't make sense. But if you insist, Kendo does not really have a way to do row-numbers. I've tried.
If you only need client-side display, you can do this with css and javascript.
May I ask you why do you need this?