Asp.net-Mvc
Kendo UI - 將命令工具欄放在網格底部
在我的應用程序的某些區域中,將網格命令工具欄中的自定義命令放在網格底部而不是頂部會更加使用者友好。
我想知道這是否可以在 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) ))
不,這不支持開箱即用。可以使用以下程式碼行來完成:
$("#grid").find(".k-grid-toolbar").insertAfter($("#grid .k-grid-content"));這是一個展示:http: //jsbin.com/ahifiz/2/edit
在回答 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); } }; } ]);