Kendo UI - 将命令工具栏放在网格底部

Posted 2023-05-07

【中文标题】Kendo UI - 将命令工具栏放在网格底部

【英文标题】：Kendo UI - Place Command Toolbar at bottom of grid

【发布时间】：2012-09-12 03:48:06

【问题描述】：

在我的应用程序的某些区域中，将网格命令工具栏中的自定义命令放在网格底部而不是顶部会更加用户友好。

我想知道这是否可以在 Kendo UI 中实现，或者是否有其他解决方法。

以下是标准只读但可选择网格的代码。

提前致谢！

@(html.Kendo().Grid(Model)
.Name("AddressBookGrid")
.Columns(columns =>

    columns.Bound(i => i.IsOrigin).ClientTemplate("<input name='Origin' id='origin' type='radio' value='Origin' />").Width(70);
    columns.Bound(i => i.IsDestination).ClientTemplate("<input name='Destination' id='destination' type='radio' value='Destination' />").Width(70);
    columns.Bound(i => i.CompanyName).Width(120).HtmlAttributes(new  id = "CompanyName" );
    columns.Bound(i => i.AddressLine1).Width(150).HtmlAttributes(new  id = "AddressLine1" );
    columns.Bound(i => i.AddressLine2).Width(150).HtmlAttributes(new  id = "AddressLine2" );
    columns.Bound(i => i.City).Width(100).HtmlAttributes(new  id = "City" );
    columns.Bound(i => i.StateProvince).Width(70).HtmlAttributes(new  id = "StateProvince" );
    columns.Bound(i => i.PostalCode).Width(70).HtmlAttributes(new  id = "PostalCode" );
    columns.Bound(i => i.CountryCode).Width(70).HtmlAttributes(new  id = "CountryCode" );
)
.ToolBar(toolbar =>

    //Want to place this at the bottom
    toolbar.Custom().Text("Add").Url("#_").HtmlAttributes(new  onclick = "PopulateAddressForm()" );
)
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
    .ServerOperation(false)
)

)

【参考方案1】：

不，不支持开箱即用。可以通过以下代码行来完成：

$("#grid").find(".k-grid-toolbar").insertAfter($("#grid .k-grid-content"));

这是一个演示：http://jsbin.com/ahifiz/2/edit

【讨论】：

非常感谢！这个确切的问题在剑道论坛上发布了一个多星期，而您不到一天就解决了！因为我需要这个用于多个网格，所以我制作了一个传入网格名称的通用函数。感谢您快速而精彩的回复！

function MoveCommandBar(gridName) $("#" + gridName.toString()).find(".k- grid-toolbar").insertAfter($("#" + gridName.toString () + ".k-grid-content"));

使用angular js的时候怎么样？我有同样的问题。

我把insertAfter改成insertBefore，然后把k-grid-content改成k-grid-pager。这将工具栏放在我网格上的寻呼机上方。 :)

我被这个问题困扰了一段时间，后来发现在我的情况下，.k-grid-content 不存在，所以我不得不将它更改为网格中的不同类。然后这又起作用了。

【参考方案2】：

在回答 Angular 问题时，我创建了一个指令来做同样的事情。它当前检查分页控件并在之后移动工具栏，或者如果分页器不存在，则在网格内容之后移动。

[YourApp].directive("toolbarOnBottom", ["$timeout",
    function ($timeout) 
        return 
            restrict: "A",
            link: function link(scope, element, attrs) 
                $timeout(function () 
                    element.find(".k-grid-toolbar").insertAfter(element.find(".k-grid-pager").length === 1 ? element.find(".k-grid-pager") : element.find(".k-grid-content"));
                , 1);
            
        ;
    
]);