DropDownList is freezing

7 posts, 0 answers
  1. Johann
    Johann avatar
    28 posts
    Member since:
    Jun 2015

    Posted 28 Dec 2015 Link to this post

    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

     
     
     
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 29 Dec 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Johann
    Johann avatar
    28 posts
    Member since:
    Jun 2015

    Posted 30 Dec 2015 in reply to Kiril Nikolov Link to this post

    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.

     
  5. Johann
    Johann avatar
    28 posts
    Member since:
    Jun 2015

    Posted 30 Dec 2015 in reply to Johann Link to this post

    The comment on exact this line could maybe help?

    // make sure we don't trigger a loop

  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 04 Jan Link to this post

    Hello 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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Johann
    Johann avatar
    28 posts
    Member since:
    Jun 2015

    Posted 04 Mar Link to this post

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

  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 07 Mar Link to this post

    Hi Johan,

    Thanks for the update, I will forward it to the team for further investigation.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready