This is a migrated thread and some comments may be shown as answers.

[Solved] DropDownList is freezing

6 Answers 661 Views

DropDownList

This is a migrated thread and some comments may be shown as answers.

Johann asked on 28 Dec 2015, 10:50 PM

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

answered on 30 Dec 2015, 08:51 PM

debugger.png

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.

answered on 04 Mar 2016, 07:17 PM

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;

}