mobile popover not working on Kendo UI v2014.3.1316

[Claudio]

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

[Petyo]

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

 

 

[Claudio]

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

​

[Claudio]

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)

[Petyo]

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

 

 

[Claudio]

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

[Petyo]

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

 

 

[Claudio]

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

[Petyo]

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