Buttons in toolbar template are smashed together after loading a saved grid state

[Anders]

Hi, buttons in toolbar template are smashed together after loading a saved grid state. The problem can be reproduced in demo application https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/grid-preserve-server-toolbar-template-after-set-options

I have used the same code for at long time without issues but this was just noticed during testing. Please see attached images to see how the buttons are smashed together after pressing Save-/Load Settings.

Please advise.

/Br. Anders

[Anton Mironov]

Hello Anders,

Thank you for the images and details provided.

The sample project in the pointed repository was added 9 years ago. Since then there were many changes and updates in the components, their rendering, and behavior.

I am not sure which version was used before in your application, but here is a list of the changes in the compatibility releases for the last three years:

• https://docs.telerik.com/aspnet-mvc/backwards-compatibility/2023-backwards-compatibility
• https://docs.telerik.com/aspnet-mvc/backwards-compatibility/2022-backwards-compatibility
• https://docs.telerik.com/aspnet-mvc/backwards-compatibility/2021-backwards-compatibility

There have been major changes throughout the 2022 and 2023 releases, so you won't be able to upgrade without coming across these changes. The latest big change is the drop of the LESS themes in R1 2023 SP1 (version 2023.1.314). Going forward, the old LESS theme will not be compatible with the new versions of Telerik UI for ASP.NET MVC, and migrating to the SASS themes is recommended. We have a migration article that explains the process in more detail:

• https://docs.telerik.com/aspnet-mvc/styles-and-layout/less-themes/less-themes-migration

The R1 2022 release introduces new rendering for several components. The following article provides detailed information about these changes:

• https://docs.telerik.com/aspnet-mvc/styles-and-layout/components-rendering-overview

I hope this information helps.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Anders]

Hi Anton, 

Thanks for the response.

I see now I was unclear. What I used from the repository was the save- and load state logic (same as I use in my production code that also have the same symptom). I put it in a newly created project with the currently latest MVC version 2023.2.718.545 using SASS, just to test the save- and load button functionality. I have attached the test project so you can see how the buttons behave when clicked. I had to remove Telerik files due to upload size restrictions. Please advise.

Best Regards,
Anders

[Anton Mironov]

Hi Anders,

Thank you for the kind words, sample project, and additional details provided.

In order to achieve the desired result, I would recommend using the new rendering classes for the button. Here is an example:

@helper ToolbarTemplate()
{
    <a href="#" class="k-button k-button-md k-rounded-md k-button-solid-base" id="save">Save State</a>
    <a href="#" class="k-button k-button-md k-rounded-md k-button-solid-base" id="load">Load State</a>
}

Attached is the reworked sample project that includes the Toolbar Template above.

Feel free to make the needed tests on your side and let me know if this achieves the desired result.


Best Regards,
Anton Mironov

 

[Anders]

Hi Anton,

Thanks for the sample, but your example does not invoke the save- or load function. After changing it to do that I can replicate the same error.

@helper ToolbarTemplate()

{
    <a href="#" class="k-button k-button-md k-rounded-md k-button-solid-base savesetting" id="save">Save State</a>
    <a href="#" class="k-button k-button-md k-rounded-md k-button-solid-base loadsetting" id="load">Load State</a>
}

Please advise.

/Br. Anders

[Ivan Danchev]

Hi Anders,

Since the rendering of the Grid changes after loading the settings and an extra div is added to the toolbar template, consider using the following CSS rule to apply gap between the buttons:

<style>
    .k-grid .k-toolbar-item {
        gap: 8px;
    }
</style>

 

[Anders]

Hi Ivan,

Thank you so much for this. The buttons are now rendered beautifully after loadsetting is called.

/ Br. Anders