带有服务器数据源的 Kendo UI MVC 网格行号

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

在可排序和可分页的网格中，行号有点没有意义。但是，如果您坚持，剑道并没有真正的方法来做行号。我试过了。

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

请问你为什么需要这个？