CODEWITHSUNDEEP
asp.net-mvckendo-ui
Jark Monster
Jark Monster

Reputation: 763

Kendo UI - Place Command Toolbar at bottom of grid

In certain areas of my application, it is more user friendly to have custom commands within the grid command toolbar be at the bottom of the grid instead of the top.

I was wondering if this was possible within Kendo UI or if there was some other work around for it.

Below is the code for a standard read-only BUT selectable grid.

Thanks in advance!

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

)

Upvotes: 10

Views: 14843

Answers (2)

samneric
samneric

Reputation: 3218

In answer to the Angular question, I created a directive to do the same thing. It currently checks for the paging control and moves the toolbar after that, or if the pager doesn't exist, after the grid content.

[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);
            }
        };
    }
]);

Upvotes: 3

Atanas Korchev
Atanas Korchev

Reputation: 30671

No, this is not supported out of the box. Can be done with the following line of code:

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

Here is a demo: http://jsbin.com/ahifiz/2/edit

Upvotes: 24

Related Questions