SetOptions clearing the toolbar

1 Answer 18 Views
Grid
Alex
Top achievements
Rank 1
Alex asked on 04 May 2021, 04:56 PM

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:

  1. toolbarArray(1)
    1. 0:
      1. templateundefined
      2. __proto__:
        1. constructorƒ Object()
        2. hasOwnPropertyƒ hasOwnProperty()
        3. isPrototypeOfƒ isPrototypeOf()
        4. propertyIsEnumerableƒ propertyIsEnumerable()
        5. toLocaleStringƒ toLocaleString()
        6. toStringƒ toString()
        7. valueOfƒ valueOf()
        8. __defineGetter__ƒ __defineGetter__()
        9. __defineSetter__ƒ __defineSetter__()
        10. __lookupGetter__ƒ __lookupGetter__()
        11. __lookupSetter__ƒ __lookupSetter__()
        12. get __proto__ƒ __proto__()
        13. set __proto__ƒ __proto__()
    2. length1
    3. __proto__Array(0)

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.

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 07 May 2021, 11:55 AM

Hi, Alex,

As mentioned in the post that you've found, the disappearance of the Toolbar when the Server template is used, is a Known Limitation.

The solution to the problem is to use an external template to set the toolbar as demonstrated in the following sample project:

https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/how-to/state/grid-preserve-server-toolbar-template-after-set-options 

The code you are looking for is located in the Index view in the GitHub project:

https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/grid-preserve-server-toolbar-template-after-set-options/GridPerserveToolbarServerTemplate/Views/Home/Index.cshtml 

Let me know if you have any questions.

Best Regards,
Georgi Denchev
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
Asked by
Alex
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or