Toolbar both at top and bottom of the grid.

1 Answer 98 Views
Grid Toolbar
Pribadi
Top achievements
Rank 1
Iron
Iron
Pribadi asked on 16 Mar 2022, 12:55 PM | edited on 16 Mar 2022, 01:04 PM

Hi,

I have kendo mvc grid in my application and I am using toolbar to save the changes in the grid, Toolbar is coming on the top of the kendo grid. I want to add Toolbar at both top and bottom of the grid, please  suggest me to achieve  it.

1 Answer, 1 is accepted

Sort by
0
Yanislav
Telerik team
answered on 21 Mar 2022, 06:41 AM

Hello Pribadi,

In order to achieve this, you could declare an external toolbar, and insert it after the content of the Grid. Thus, since the default Toolbar is positioned at the top, the Grid will be displayed with two different toolbars, one at the top and the other at the bottom. 

This could be done by using the jQuery insertAfter() function :

@(Html.Kendo().ToolBar()
    .Name("ToolBar")
    .Items(items => {
        items.Add().Type(CommandType.Button).Text("Button");
        items.Add().Type(CommandType.Button).Text("Toggle Button").Togglable(true);
    })
)
<script>
    $(document).ready(function () {
        $(document).find("#ToolBar").insertAfter($("#grid .k-grid-content"));
    });
</script>

I hope this helps!

Regards,
Yanislav
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid Toolbar
Asked by
Pribadi
Top achievements
Rank 1
Iron
Iron
Answers by
Yanislav
Telerik team
Share this question
or