Hi,
I have the following Site in a Cordova Application:
<div id="LQKXHXCUyI" style="width: 100%; height: auto;"> <table class="db-layout tableview" style="width: 100%;"> <tbody> <tr> <td style="padding: 0px 5px 5px 0px; width: 25% !important;"> <div id="vBulgojWFV" style="width: 100%; display: block;" k-data-source="gml.ui.vBulgojWFV.dataSource" kendo-drop-down-list="gml.ui.vBulgojWFV.control" ng-model="gml.ui.SDK_Kunde.filterColumn" k-data-text-field="'caption'" k-data-value-field="'id'"></div> </td> <td style="padding: 0px 5px 5px 0px; width: 75% !important;"> <input class="k-textbox" id="lUeESAqFyi" style="width: 100%; display: block;" type="text" data-role="maskedtextbox" ng-model="gml.ui.SDK_Kunde.filterValue" autocomplete="off"> </td> </tr> </tbody> </table> <table class="db-layout tableview" style="width: 100%;"> <tbody> <tr> <td style="padding: 0px 5px 5px 0px; width: 85.71% !important;"> </td> <td style="padding: 0px 5px 5px 0px; width: 14.28% !important;"> <kendo-button style="padding: 5px; float: right;" on-click="gml.ui.SDK_Kunde.search()"> <img style="margin: 0px; padding: 0px;" src="img/search.png"> </kendo-button> </td> </tr> </tbody> </table> <table class="db-layout tableview" style="width: 100%;"> <tbody> <tr> <td style="padding: 0px 5px 5px 0px; width: 100% !important;"> <div id="JNrpXWRaGR"></div> </td> </tr> </tbody> </table></div>If i open the DropDownList and select one Item the whole Application freeze. The DropDownList is not even closing.
I have found that in the Kendo.all.js is a function "propagateClassToWidgetWrapper" and inside this function is the folowing Code:
var mo = new MutationObserver(function(changes){ suspend(); // make sure we don't trigger a loop if (!widget) { return; }....the param "changes" is growing every time times 2. (4, 8, 16, 32, 64, ....) It never stops. I'm not sure if this is the problem for the freezing but I thought it could help to locate the problem.
What is wrong with my Code?
With best regards
Johann
6 Answers, 1 is accepted
Hello Johann,
You have invalid HTML on the page - initialize the dropdownlist from a div element. Can this be causing the isssue? Can you replace the dive with a select? If this does not help - please send us a sample where the issue can be reproduced and we will be happy to help. You can use the Kendo UI Dojo for the sample.
Regards,
Kiril Nikolov
Telerik
Rank 1
Hi Kiril,
that is a little bit complicated to build a sample for you. I have Javascript Classes which generates the HTML Code and create the scope variables for each Telerik component. That is working fine on several other pages in the app.
But on this page it does not. I figured out that the folowing two components are the problem but only together. If I comment out one of them it's working.
<span tabindex="0" title="" class="k-widget k-dropdown k-header ng-pristine ng-untouched ng-valid" role="listbox" aria-busy="false" aria-disabled="false" aria-expanded="false" aria-haspopup="true" aria-readonly="false" aria-activedescendant="1e2905f3-f7f4-439f-8850-f467d4e6948a"aria-owns="LKsePCNRrG_listbox" style="width: 100%;" unselectable="on"> <span class="k-dropdown-wrap k-state-default" unselectable="on"> <span class="k-input ng-scope" unselectable="on">Name</span> <span class="k-select" unselectable="on"><span class="k-icon k-i-arrow-s" unselectable="on">select</span></span> </span> <select class="ng-pristine ng-untouched ng-valid" id="LKsePCNRrG" style="width: 100%; display: none;" data-role="dropdownlist" k-data-source="gml.ui.LKsePCNRrG.dataSource" kendo-drop-down-list="gml.ui.LKsePCNRrG.control" ng-model="gml.ui.SDK_Kunde.filterColumn" k-data-text-field="'caption'" k-data-value-field="'id'"> <option selected="selected" value="0">Name</option> <option value="1">PLZ</option> <option value="2">Ort</option> <option value="3">Straße</option> <option value="4">KundenNr</option> </select></span>
<div class="km-widget km-scroll-wrapper" id="oFYqvYcJwy" style="padding: 0px; width: 100%; height: 100%; overflow: hidden; display: block; touch-action: none;" data-role="scroller" kendo-mobile-scroller=""> <div class="km-scroll-header"></div> <div class="km-scroll-container"> <ul id="BvFaWdUZTd" style="margin: 0px; width: 100%; height: auto; display: block;" kendo-list-view="gml.ui.BvFaWdUZTd.control" k-data-source="gml.ui.BvFaWdUZTd.dataSource" k-template="gml.ui.BvFaWdUZTd.template"></ul> </div> <div class="km-touch-scrollbar km-horizontal-scrollbar"></div> <div class="km-touch-scrollbar km-vertical-scrollbar"></div></div>That is already the generated HTML code thru the AngularJS Compiler.
var mo = new MutationObserver(function(changes){I've stopped the debugger here after a while, there are 131072 Elements in the "changes" array. All this changes have the same attributeName = disabled (see the attached file).
I hope you can give me a hint or something I can try to solve this problem.
Rank 1
The comment on exact this line could maybe help?
// make sure we don't trigger a loopHello Johann,
I am afraid that we do not have a guess on why this happens. However if you manage to isolate the problem and send us a sample we will be more than happy to investigate it further.
Regards,
Kiril Nikolov
Telerik
Rank 1
Hi,
it worked for us to make the following changes (Bold) in the "propagateClassToWidgetWrapper(widget, element)" function:
case 'disabled': if (typeof widget.enable == "function" && !widget.element.attr("readonly") && $(chg.target).attr("disabled") !== undefined) { widget.enable(!$(chg.target).attr('disabled')); } break;case 'readonly': if (typeof widget.readonly == "function" && !widget.element.attr("disabled") && $(chg.target).attr("readonly") !== undefined) { widget.readonly(!!$(chg.target).attr('readonly')); } break;}Thanks for the update, I will forward it to the team for further investigation.
Regards,
Kiril Nikolov
Telerik