This is a migrated thread and some comments may be shown as answers.
Kendo grid tooltip not working on getOptions() and setOPtions()
11 Answers 24 Views
This is a migrated thread and some comments may be shown as answers.
Venkata
Top achievements
Rank 1
Venkata asked on 01 May 2020, 06:25 AM

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);                        
                     }
                 }                    

11 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 04 May 2020, 12:24 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Anders
Top achievements
Rank 1
answered on 01 Dec 2020, 04:44 PM

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

 

0
Ianko
Telerik team
answered on 02 Dec 2020, 05:34 AM

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

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/.

0
Anders
Top achievements
Rank 1
answered on 02 Dec 2020, 09:41 AM

Hi Ianko,

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

Regards,

Anders

0
Ianko
Telerik team
answered on 03 Dec 2020, 05:34 AM

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

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/.

0
Anders
Top achievements
Rank 1
answered on 03 Dec 2020, 09:23 AM

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

0
Ianko
Telerik team
answered on 04 Dec 2020, 02:42 PM

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

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/.

0
Anders
Top achievements
Rank 1
answered on 04 Dec 2020, 03:36 PM

Hi Ianko,

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

Regards Anders

0
Ianko
Telerik team
answered on 07 Dec 2020, 07:51 AM

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

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/.

0
Anders
Top achievements
Rank 1
answered on 07 Dec 2020, 04:15 PM
Hi Ianko, I will look into it. Thanks for all the help. Regards Anders
0
Ianko
Telerik team
answered on 08 Dec 2020, 05:10 AM

Hi Anders,

You are welcome.

Regards,
Ianko
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/.

Asked by
Venkata
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Anders
Top achievements
Rank 1
Share this question
or