Kendo UI MVC Grid Row Number with Server DataSource

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?