带有服务器DataSource的Kendo网格行号

Question

我正在尝试创建一个列，使用来自服务器的数据源使用Kendo来显示行号。我试过几种方法，但是数字列没有显示任何东西，它只是普通的空

以下是我尝试过的一些方法

第一次尝试，使用数据库

@{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

在可排序和可分页的网格中，行号有点不合理。但如果你坚持，肯多实际上没有办法做行号。我试过了。

如果您只需要客户端显示，则可以使用css and javascript进行此操作。

我能问你为什么需要这个吗？