9

アプリケーションの特定の領域では、グリッド コマンド ツールバー内のカスタム コマンドをグリッドの上部ではなく下部に配置する方がユーザー フレンドリーです。

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)
)

)

4

2 に答える 2

23

いいえ、これはそのままではサポートされていません。次のコード行で実行できます。

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

ここにデモがあります: http://jsbin.com/ahifiz/2/edit

于 2012-09-20T13:46:30.060 に答える
3

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);
            }
        };
    }
]);
于 2016-11-19T18:46:19.647 に答える