Kendo UI - Place Command Toolbar at bottom of grid

Question

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

)

Answer 1

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

Answer 2

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