This is a follow up question of this question:
https://www.telerik.com/forums/cannot-read-property-'removeclass'-error-after-calling-setoptions
I made that work, and I'm calling the setOptions method and it is setting the Height, PageSize and PageSizes properties.
But now, I'm having a different issue. I'm working on a grid that has a button on the toolbar. This is the code for the toolbar.
.ToolBar(t =>
{
t.Template(@<text>
<div class="grid-toolbar-primary">
@(Html.Kendo().Button()
.Name("appSettingItemAddButton")
.Content(HtmlLocaleHelper.GetLabelText(CoreConstants.Localization.Labels.Grid.CreateNew).ToString())
.HtmlAttributes(new { @type = "button" })
.Events(e => e.Click("onAppSettingGridOnAdd")))
</div>
</text>);
})
This code is working fine, and the toolbar and the button are being displayed. But with my new code, that call the setOptions method, the toolbar and the button are not being displayed anymore.
I found this post on the forum Save/Load - Custom Toolbar Disappears in UI for ASP.NET MVC | Telerik Forums, and it looks like it is a known issue. According to what I found, the workaround is to get the options and save them somehow, and then use that value to set the options again.
In my case, I will need to also change the Height, PageSize and PageSizes, so I started by trying to just get the toolbar and set it, but is not working:
//Get the settings to set the toolbar
var options = kendo.stringify(grid.getOptions());
console.log("options = " + options);
if (options) {
var parsedOptions = JSON.parse(options);
console.log("parsedOptions: ");
console.log(parsedOptions);
console.log("#grid-toolbar-primary: ");
console.log($("#grid-toolbar-primary").html());
parsedOptions.toolbar = [
{ template: $("#grid-toolbar-primary").html() }
];
var optToolbar = parsedOptions.toolbar;
console.log("optToolbar: ");
console.log(optToolbar);
}
grid.setOptions({
groupable: true
, pageable: {
pageSizes: selPageSizes,
pageSize: selDefaultPageSize
}
, dataSource: { pageSize: selDefaultPageSize }
, height: selGridHeight
, toolbar: optToolbar
});
Just to test it, I also tried to just get the options and then set them again (no changes at all), but I still can't see the toolbar after setting the options:
//Get the settings to set the toolbar
var options = kendo.stringify(grid.getOptions());
console.log("options = " + options);
if (options) {
var parsedOptions = JSON.parse(options);
console.log("parsedOptions: ");
console.log(parsedOptions);
console.log("#grid-toolbar-primary: ");
console.log($("#grid-toolbar-primary").html());
parsedOptions.toolbar = [
{ template: $("#grid-toolbar-primary").html() }
];
var optToolbar = parsedOptions.toolbar;
console.log("optToolbar: ");
console.log(optToolbar);
grid.setOptions(parsedOptions);
}
If I look at the console, the parsedOptions object has a toolbar object, but it looks empty:
In summary, what I need to do is to modify a grid for the three properties (Height, PageSize, PageSizes) and make sure that the grid will still work as it was designed originally.
Is there a way to do this?
Thanks.