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。

执行此操作

我可以问你为什么需要这个？

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

1 个答案: