The Grid Toolbar disappears when using setOptions

Progress® Telerik® UI for ASP.NET MVC Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Unplanned

Last Updated: 30 Aug 2023 23:32 by Dialog

Meliton Pablo

Created on: 07 Jan 2021 11:55

Category: Grid

Type: Feature Request

The Grid Toolbar disappears when using setOptions

I use getOptions() and setOptions() to persist the state of the ajax bound grid that I have.

My toolbar is not a server one, it is this:

.ToolBar(toolbar =>toolbar.Create().HtmlAttributes(new { @class ="k-primary"}))

When I call the setOptions() method, it removes the Add button from the grid header.

5 comments

Dialog

Posted on: 30 Aug 2023 23:32

The following is what worked for me in version 2023.2.718

var parsedOptions = JSON.parse(options);
parsedOptions.toolbar = kendo.template($("#toolbarTemplate").html());;
grid.setOptions(parsedOptions);

Just inside the toolbar template you can wrap your content in another div element to ensure styling is the same as the original, as in Brandons example some odd styling is being added.

@helper ToolbarTemplate()
{
<div class="k-toolbar k-grid-toolbar k-toolbar-resizable k-toolbar-md" style="width:100%" >

....
}

Brandon

Posted on: 09 Jun 2022 18:27

I was on the phone with support and they mentioned this and they voted for me. I want to add a different spin to this. In my opinion I do not need to request the feature that the toolbar is serialized as a part of getOptions. Rather I think setOptions needs to be fixed to not overwrite things that are not intended on being serialized. The problem might be that for the toolbar it is sometimes supported and sometimes not....this I'm not sure. If the grid knew the toolbar shouldn't be updated when setOptions is called you can use a similar approve to one in another comment to ensure it isn't. You simply get the stored options and before you call setOptions you do the following:

options.toolbar = [{
template: kendo.template($(transfersGrid.element).find(".k-grid-toolbar").html())
}];

In this example transfersGrid is a variable in which I set using jquery and the .data method to get the grid object. I have it referenced for other reasons but you could use jquery to just go straight to the element. Either way this gets the existing toolbar (defined currently on the server in my case) and puts in the options so the options never touch the toolbar. In my case the toolbar definition is not part of the state therefore I wouldn't want it saved anyways.

ADMIN

Ivan Danchev

Posted on: 07 Mar 2022 15:34

Hello Logan,

A general way to save all the settings is not yet available. Consider casting your vote for this feature. Currently it has gathered only 3 votes. If it gets traction, we will consider it for a future release.

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Logan

Posted on: 28 Feb 2022 17:01

So does that mean there is no way to generalize this? I have a general savegrid that saves everything about the grid. It used to work, but not it loses the toolbar which basically makes it useless unless i re-write every instance in which case i will have more code to keep synchronized when a change to the grid is made.

ADMIN

Alex Hajigeorgieva

Posted on: 07 Jan 2021 12:08

Hello, Meliton Pablo,

Thank you for your feedback.

Until we implement the toolbar serialization in such a way that it works out of the box, you can use the following workaround to restore the button.

var grid = $("#grid").getKendoGrid();
var options = grid.getOptions();
options.toolbar = [{ name: "create", attr: { "class": "k-primary"} }];
grid.setOptions(options);

Any of the other alternatives in the Grid API will also work. For a reference of the expected structure, check this section of the API:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/toolbar

Kind Regards,
Alex Hajigeorgieva
Progress Telerik