I just upgraded to version 2022.1412 from 2020.3.915. I have a tooltip that loads dynamic content. It used to show a loading panel to the user while it was reaching out the server. After I upgraded it doesn't show it anymore and sometimes it seems like it's not doing anything because the load can take a few seconds. Is there anyway to get this back?
This is what it used to look like...
Thanks
Hello Dave,
А possible way to show/hide a loading icon in the scenario you described is:
1. Call the progress method in the Tooltip's requestStart event handler:
var element = $(target); kendo.ui.progress(element, true);where "element" points at the Tooltip itself.
2. To hide the loading icon after the content has loaded, call the progress method in the Tooltip's contentLoad event handler:
var element = $(target); kendo.ui.progress(element, false);Could you share the declaration of the Tooltip component and the respective logic for showing/hiding the loading icon? I will test it with version 2022.1.412 and investigate why it is not showing.
Ivan,
The tooltip doesn't even display until it's completely loaded so adding a loading panel to it won't help. It used to work fine with the old control. It would display the tooltip right after the mouse event and the window would show with the loading gif. How can I get it to work like this again? I'm using MVC and it's declared as the following.
Dave,
I don't see anything problematic in the configuration of the Tooltip.
The Tooltip is attached to an element with id "datafields" and in the Filter option you specify an anchor element: .Filter("a")
So the page should contain an element with id "datafields" that has nested <a> elements in it, and on clicking them the Tooltip should show up. Could you check whether the respective Html (container and nested anchor element) exists on the page? Is the Tooltip's RequestStart handler hit? Could you post the "datafields" element, along with its content? We will then test the Tooltip you posted with it and check how it behaves.
On a side note, when posting code snippets, please do so in a Code Block, instead of screenshots, since we cannot copy the code from them.
Ivan,
Yes, the tooltip does show up and is on the page. The issue is that it takes like 5-10 seconds to display after the click event and there is no loading panel. It used to show the tooltip with the loading panel directly after you clicked the action link. Now after you click nothing is shown until the tooltip is completely loaded, so it seems to the user that nothing is happening.
Below is the "datafields" element.
<div id="datafields" data-role="tooltip"> <div id="fieldWrapper999" name="fieldWrapper999" style="text-align:left; padding-top:10px; padding-bottom:10px; display: block "> <div id="comboWrapper999" class="clearfix"> <div id="comboLabel999" class="pull-left" style="margin-bottom:3px;">Document Type </div> </div> </div> <div id="fieldWrapper4" name="fieldWrapper4" style="text-align:left; padding-top:10px; padding-bottom:10px; display: block "> <div id="comboWrapper4" class="clearfix"> <div id="comboLabel4" class="pull-left" style="margin-bottom:3px;">Category </div> </div> </div> <div id="fieldWrapper5" name="fieldWrapper5" style="text-align:left; padding-top:10px; padding-bottom:10px; display: block "> <div id="comboWrapper5" class="clearfix"> <div id="comboLabel5" class="pull-left" style="margin-bottom:3px;">Sub Category </div> </div> </div> <div id="fieldWrapper12" name="fieldWrapper12" style="text-align:left; padding-top:10px; padding-bottom:10px; display: block "> <div id="comboWrapper12" class="clearfix"> <div id="comboLabel12" class="pull-left" style="margin-bottom:3px;">Investment </div> <div id="filterLabel12" class="pull-right"><a data-id="12" style="cursor:pointer;" href="javascript:void(0);" class="">Filter</a></div> </div> </div> <div id="fieldWrapper18" name="fieldWrapper18" style="text-align:left; padding-top:10px; padding-bottom:10px; display: block "> <div id="comboWrapper18" class="clearfix"> <div id="comboLabel18" class="pull-left" style="margin-bottom:3px;">Binder </div> </div> </div> <div id="fieldWrapper1" name="fieldWrapper1" style="text-align:left; padding-top:10px; padding-bottom:10px; display: block "> <div id="comboWrapper1" class="clearfix"> <div id="comboLabel1" class="pull-left" style="margin-bottom:3px;">Employee </div> <div id="filterLabel1" class="pull-right"><a data-id="1" style="cursor:pointer;" href="javascript:void(0);" class="">Filter</a></div> </div> </div> <div id="fieldWrapper2" name="fieldWrapper2" style="text-align:left; padding-top:10px; padding-bottom:10px; display: block "> <div id="comboWrapper2" class="clearfix"> <div id="comboLabel2" class="pull-left" style="margin-bottom:3px;">Company </div> <div id="filterLabel2" class="pull-right"><a data-id="2" style="cursor:pointer;" href="javascript:void(0);" class="k-state-border-down" aria-describedby="datafields_tb_active">Filter</a></div> </div> </div> <div id="fieldWrapper19" name="fieldWrapper19" style="text-align:left; padding-top:10px; padding-bottom:10px; display: block "> <div id="comboWrapper19" class="clearfix"> <div id="comboLabel19" class="pull-left" style="margin-bottom:3px;">Closing Binder </div> </div> </div> <div id="fieldWrapper21" name="fieldWrapper21" style="text-align:left; padding-top:10px; padding-bottom:10px; display: block "> <div id="comboWrapper21" class="clearfix"> <div id="comboLabel21" class="pull-left" style="margin-bottom:3px;">Closing Binder Type </div> </div> </div> <div id="fieldWrapper14" name="fieldWrapper14" style="text-align:left; padding-top:10px; padding-bottom:10px; display: block "> <div id="comboWrapper14" class="clearfix"> <div id="comboLabel14" class="pull-left" style="margin-bottom:3px;">Industry </div> </div> </div> <div id="fieldWrapper15" name="fieldWrapper15" style="text-align:left; padding-top:10px; padding-bottom:10px; display: block "> <div id="comboWrapper15" class="clearfix"> <div id="comboLabel15" class="pull-left" style="margin-bottom:3px;">Provider </div> </div> </div> <div id="fieldWrapper16" name="fieldWrapper16" style="text-align:left; padding-top:10px; padding-bottom:10px; display: block "> <div id="comboWrapper16" class="clearfix"> <div id="comboLabel16" class="pull-left" style="margin-bottom:3px;">Research Type </div> </div> </div> <div id="fieldWrapper17" name="fieldWrapper17" style="text-align:left; padding-top:10px; padding-bottom:10px; display: block "> <div id="comboWrapper17" class="clearfix"> <div id="comboLabel17" class="pull-left" style="margin-bottom:3px;">Trust </div> <div id="filterLabel17" class="pull-right"><a data-id="17" style="cursor:pointer;" href="javascript:void(0);">Filter</a></div> </div> </div> <div id="fieldWrapper6" name="fieldWrapper6" style="text-align:left; padding-top:10px; padding-bottom:10px; display: block "> <div id="comboWrapper6" class="clearfix"> <div id="comboLabel6" class="pull-left" style="margin-bottom:3px;">Document Name </div> </div> </div> <div id="fieldWrapper7" name="fieldWrapper7" style="text-align:left; padding-top:10px; padding-bottom:10px; display: block "> <div id="comboWrapper7" class="clearfix"> <div id="comboLabel7" class="pull-left" style="margin-bottom:3px;">Entity </div> <div id="filterLabel7" class="pull-right"><a data-id="7" style="cursor:pointer;" href="javascript:void(0);">Filter</a></div> </div> </div> <div id="fieldWrapper11" name="fieldWrapper11" style="text-align:left; padding-top:10px; padding-bottom:10px; display: block "> <div id="comboWrapper11" class="clearfix"> <div id="comboLabel11" class="pull-left" style="margin-bottom:3px;">Investment Status </div> </div> </div> </div>Dave,
I've tested the Html you posted with the Tolltip and at my end there are no issues with the Tooltip. It appears as expected on left-clicking a link.
I've attached a sample project (version 2022.1.412), which demonstrates a Tooltip with your configuration attached to the anchor elements in the divs you posted.
Let me know whether I am missing something with regard to reproducing the issue.