Tooltips in grid not showing after Grid.setOptions call

2 posts, 1 answers
  1. Jiri
    Jiri avatar
    1 posts
    Member since:
    Jun 2015

    Posted 09 Nov 2020 Link to this post

    Hello,

    I have a grid and I display tooltips on some of its columns. It works OK. I also have a DropdownList. After DropdownList change I read data for the grid again. The grid then shows new data, but the tooltips are never visible.

    This is the function for DropDownList change event:

    function ViewChanged() {
      $('#AccountGrid').data('kendoGrid').setOptions(initialAccountGridOptions);
      $('#AccountGrid').data('kendoGrid').dataSource.filter({});
      $('#AccountGrid').data('kendoGrid').dataSource.read();
    }

    I figured out that the tooltips are displaying when I delete the first line with setOptions function. But I need the setOptions function.

    Is there a way how to use this function and still see the tooltips?

    Thanks for answers.

  2. Answer
    Aleksandar
    Admin
    Aleksandar avatar
    265 posts

    Posted 12 Nov 2020 Link to this post

    Hello Jiri,

    As discussed in this forum thread when the setOptions() method is used the old tooltip has to be destroyed and initialized again after changing the Grid options.

              $("#load").click(function (e) {
                e.preventDefault();
                $("#grid").data("kendoTooltip").destroy();
                
                var options = localStorage["kendo-grid-options"];
                if (options) {
                  grid.setOptions(JSON.parse(options));
                }
                
                $("#grid").kendoTooltip({
                  filter: "td", 
                  position: "right",
                  content: function(e){
                    var dataItem = $("#grid").data("kendoGrid").dataItem(e.target.closest("tr"));
                    var content = dataItem.ContactName;
                    return content;
                  }
                }).data("kendoTooltip");
              });

    I modified the Persist State Grid Demo to demonstrate a possible approach to handle the scenario. You can review the example in this dojo and apply similar logic in ASP.NET environment.

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

Back to Top