mobile popover not working on Kendo UI v2014.3.1316

9 posts, 0 answers
  1. Claudio
    Claudio avatar
    21 posts
    Member since:
    Feb 2015

    Posted 17 Feb 2015 Link to this post

    i'm migrated my project to Kendo UI v2014.3.1316 (previously kendo v2014.2.1008) and the mobile popover widget doesn't instantiate anymore. With previous version it work fine..
    My sample code:< div id="popUser" kendo-mobile-pop-over="popUser" k-popup='{}'>
    < /div >error:
    TypeError: Cannot read property 'element' of undefined
    at new D.extend.init (http://localhost:25586/Scripts/kendo/kendo.all.min.js:27:19741)
    at new a.extend.init (http://localhost:25586/Scripts/kendo/kendo.all.min.js:27:25449)
    at new u.extend.init (http://localhost:25586/Scripts/kendo/kendo.all.min.js:27:31527)
    at HTMLDivElement. (http://localhost:25586/Scripts/kendo/kendo.all.min.js:10:2045)
    at Function.jQuery.extend.each (http://localhost:25586/Scripts/jquery/jquery-1.11.1.js:383:23)
    at jQuery.fn.jQuery.each (http://localhost:25586/Scripts/jquery/jquery-1.11.1.js:136:17)
    at mt.plugin.e.fn.(anonymous function) as kendoMobilePopOver
    at m (http://localhost:25586/Scripts/kendo/kendo.angular.min.js:9:1274)
    at o (http://localhost:25586/Scripts/kendo/kendo.angular.min.js:9:1737)
    at w.directive.directive.directive.directive.directive.directive.directive.directive.directive.link.pre (http://localhost:25586/Scripts/kendo/kendo.angular.min.js:9:13712)error screenshot from chrome:
    http://i60.tinypic.com/2vtozf6.pngany suggestion?
    thanks
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 19 Feb 2015 Link to this post

    Hello Claudio,

    If I understand you correctly, you are using AngularJS to instantiate the popover. A similar scenario is present in our demos, and it seems to work as expected. Is it possible for you to isolate the error you receive in a small, runnable sample? You can use our dojo for that purpose. 

    Regards,
    Petyo
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Claudio
    Claudio avatar
    21 posts
    Member since:
    Feb 2015

    Posted 06 May 2015 Link to this post

    i upgraded to kendo ui 2015.1.429 with the same problem, looking to the source code it crash in this point:

     

    if (!that.rootView[0] && options.rootNeeded) {
                    if (container[0] == kendo.mobile.application.element[0]) {
                        errorMessage = 'Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.';
                    } else {
                        errorMessage = 'Your pane element does not contain any direct child elements with data-role="view" attribute set.';
                    }
                    throw new Error(errorMessage);
                }

    the error seem to be when evaluating "if (container[0] == kendo.mobile.application.element[0]) {",

    now my application is not using kendo-mobile-application tag, but is a simple web application, i have to do some changes to my code?

    in the popOver sample code it use kendo-mobile-application, cab be this the cause? how to avoid this?

    there is some breaking changes from v2014.2.1008?

    Thanks

  5. Claudio
    Claudio avatar
    21 posts
    Member since:
    Feb 2015

    Posted 06 May 2015 Link to this post

    in attachment a sample made with telerik dojo (who i can't see popover instantiation error (visible with output window of chrome) but the popover object result undefined in code so i suppose it reproduce the same error)
  6. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 08 May 2015 Link to this post

    Hi Claudio,

    the kendo-mobile-view directive should be set as an element, like this:

    <button id="myButton" ng-click="openPopOver()">aaa</button>
    <div id="popView" kendo-mobile-pop-over="popView" k-popup="{}">
        <kendo-mobile-view k-title="''">
            <ul id="popover" kendo-mobile-list-view>
                <li>a</li>
                <li>b</li>
                <li>c</li>
            </ul>
        </kendo-mobile-view>
    </div>


    Regards,
    Petyo
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  7. Claudio
    Claudio avatar
    21 posts
    Member since:
    Feb 2015

    Posted 08 May 2015 Link to this post

    doing some tests, i think i have found a solution.

    Summarizing the problem:

    1. with kendo v2014.2.1008 i can use mobile widgets in a web application without any modifications

    2. with newer version of kendo, to use mobile widgets i have to create a kendo mobile application (with angular i have to add kendo-mobile-application directive and kendo-mobile-view element as first child, so inside kendo-mobile-view element add the kendo widgets and html page elements)

    using this approch, the popOver widget work well, but i noticed some problems with other widget who render always as mobile also if i use desktop browser (ex. kendoDropDownList), so i found this solution:

    i declare a tag for mobile application with nothing inside of it, and all html elements and kendo widget declared normally in another div element (not child of kendo-mobile-application):

    <div kendo-mobile-application>

    <kendo-mobile-view>

    </kendo-mobile-view<

    </div>

    <div id="myPageContent">

    html content with widget and mobile-widget

    </div>

     

    this solution seem to work well, can be a good workaround?

    Thanks

  8. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 12 May 2015 Link to this post

    Hello,

    I would not recommend going with that approach, although it might work. Did you try the suggestion I gave? I tested it on my side, and it seems to function as expected. 

    Regards,
    Petyo
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  9. Claudio
    Claudio avatar
    21 posts
    Member since:
    Feb 2015

    Posted 12 May 2015 in reply to Petyo Link to this post

    your code specify only the popover element usage, but i found that to use mobile widgets as in this case the popOver, i have to set my application as a mobile application (adding directive kendo-mobile-application), and all elements create inside a kendo-mobile-application element are rendered as mobile.

     it is correct?

    if yes, i cannot use your approch because i have a web application who use (for now) only popOver widget as mobile widget and setting all my application as kendo-mobile-application will render other widgets as mobile (ex. the kendoDropDownList) but i want to render other widgets as web application.

     So the only solution i found for reach my goal is declaring an empty kendo-mobile-application tag

     there is a best solution?

    Thanks

  10. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 14 May 2015 Link to this post

    Hello,

    the empty mobile application approach may cause multiple issues - first one being js error because it is looking for at least one view. Most likely, styling errors may occur too. The sample I sent does not need a mobile application directive. I am not certain what other types of widgets you put in, or how they are affected. Can you please extend the sample I provided? Thank you in advance. 

    Regards,
    Petyo
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready