Kendo grid tooltip not working on getOptions() and setOPtions()

[Venkata]

Hi,

I am trying to persist my MVC Kendo Grid using getOptions() and setOptions(). I am successfully able to save and get.

Now I am facing problem with Kendo grid columns tooptip and data tooltip while setOptions() loading to my page.

I need to get tooptip on Account Code after loading my user preferences by using setOptions(). Please help me.

Here my code

 @(Html.Kendo()
.Grid<Models.TransactionSummary>()
.Name("TransactionDetailGrid")
.Columns(c =>
{ 

     c.Bound(p => p.Account.Code).Width(60);
    c.Bound(p => p.VendorInvoiceNumber).Width(80);

}

function SaveUserPrererences() {
        var grid = $("#" + SearchResultGridId()).data().kendoGrid;
        var resources = kendo.stringify(grid.getOptions());
        $.ajax(
            {
                url: "@Url.Action("SaveUserPreferences", "Review", new { area = "Transaction" })",
                type: 'POST',
                async: false,
                contentType: "application/json; charset:utf",
                dataType: 'json',
                data: JSON.stringify({ gridResources: resources, isActive: isActive }),
                success: function (data) { }

       }

 

 $("#load").click(function (e) {
        var grid = $("#" + SearchResultGridId()).data().kendoGrid;
        e.preventDefault(); 

         $.ajax(
             {
                 url: "@Url.Action("GetUserPreferences", "Review", new { area = "Transaction" })",
                 async: false,
                 type: "POST",
                 dataType: 'json',
                 success: function (data){
                     if (data) {
                         var parsedOptions = JSON.parse(data);
                         parsedOptions.toolbar = [
                             { template: $("#toolbarTemplate").html() }
                         ];
                         parsedOptions.columns[0].headerTemplate = $("#headerTemplate").html();                        
                         grid.setOptions(parsedOptions);                        
                     }
                 }                    

[Ianko]

Hello Venkata,

I emulated the same scenario in a simple dojo example. Generally, a button to apply a headerTemplate to the first column. In the dojo it worked accurately. https://dojo.telerik.com/OJItedof. The MVC helper also utilizes the Kendo Grid widget and the same code should work for the MVC application as well.

If the above dojo does not help you out, can you provide a simple, locally runnable project so that I can see what the problem might be?  

Regards,
Ianko
Progress Telerik

[Anders]

Hi,

I am facing the same issue. When calling getOptions and setOptions to save grid state (same as on https://demos.telerik.com/aspnet-mvc/grid/persist-state) the tooltip I set using ClientTemplate on the column is not working. Reloading the page fixes the issue, but as soon as I load the state the tooltip disappears. 

Please help.

Regards Anders

 

[Ianko]

Hi Anders,

Check if the following solution will help with the situation: 

After calling the setOptions options destroy and reinitialize the Kendo Tooltip. That way the Tooltip will be recreated and the events will be attached again to the newly created DOM elements.

Regards,
Ianko
Progress Telerik

[Anders]

Hi Ianko,

Thanks for your answer. Could you please elaborate and show the recommended way by means of providing an example?

Regards,

Anders

[Ianko]

Hi Anders,

Can you please show how you are creating the Tooltip using the ClientTemplate so that I can follow the same setup and provide an example with the tooltip recreation? 

Regards,
Ianko
Progress Telerik

[Anders]

Hi Ianko,

Sorry, I explained it badly - I do not actually set it using ClientTemplate. I attach some example code to illustrate it.

 

Regards Anders

[Ianko]

Hi Anders,

Here you are a code snippet that might work for your case: 

            $("#grid").on("click", ".loadsetting", function (e) {
                var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
                e.preventDefault();

                var tooltip = grid.element.data("kendoTooltip");
                var ttpOptions = tooltip.options;

                var options = localStorage["settings"];
                if (options) {
                    var parsedOptions = JSON.parse(options);
                    parsedOptions.toolbar = [
                        { template: $("#toolbarTemplate").html() }
                    ];
                    parsedOptions.columns[0].headerTemplate = $("#headerTemplate").html();

                    tooltip.destroy();

                    grid.setOptions(parsedOptions);
                    grid.element.kendoTooltip(ttpOptions);
                }
            });

 

In general, you should get the tooltip options from the grid element and reinitialize the Kendo Tooltip after calling setOptions of the Grid. 

 

Regards,
Ianko
Progress Telerik

[Anders]

Hi Ianko,

Now the tooltip is visible - nice! - but, on the column one position to the left... Can you tell why?

Regards Anders

[Ianko]

Hi Anders,

In your code, I see that tooltip is filtered to be shown at the 8th column. You can check if the same column is the 8th child and if it is not you should consider the new position when setting the options to the Tooltip during setting the new state. 

Regards,
Ianko
Progress Telerik

[Anders]

Hi Ianko, I will look into it. Thanks for all the help. Regards Anders

[Ianko]

Hi Anders,

You are welcome.

Regards,
Ianko
Progress Telerik