Scheduler in a splitview ; mvvm config using data-mobile="true" causes scheduler not appear/ no js error

12 posts, 2 answers
  1. Alex
    Alex avatar
    25 posts
    Member since:
    Dec 2012

    Posted 23 Jun 2014 Link to this post

    When I set  the data-mobile="true" on a scheduler MVVM mobile setup, the   scheduler is not viewable and no error is reported in the console;  remove the data-mobile="true" and the scheduler is viewable and useable.

     <div id="commplanner"
                     data-role="scheduler" 
                  data-views="['day','week','month','agenda']"
                     data-mobile="true"
                     data-footer="false"
                     data-show-work-hours="true"
                     data-editable="true"
                  data-bind="source: plannerDS"
                ></div> 

    I have not seen any caveats against this setup (scheduler with a pane), should it work?

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <link href="kendo/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="kendo/styles/kendo.default.min.css" rel="stylesheet" />
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <link href="styles/main.css" rel="stylesheet" />

        <script src="cordova.js"></script>
        <script src="kendo/js/jquery.min.js"></script>
        <script src="kendo/js/kendo.all.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

        <script src="scripts/app.js"></script>
        <script src="scripts/login.js"></script>
        <script src="scripts/location.js"></script>
        <script src="scripts/weather.js"></script>
    </head>
    <body>
        <div id="SplitView1" data-role="splitview">
           <div data-role="pane">
               <div id="View1" data-role="view"></div>
           </div>
            <div data-role="pane">
               <div id="View2" data-role="view">
                   
                  <div id="commplanner"
                     data-role="scheduler" 
                  data-views="['day','week','month','agenda']"
                     data-mobile="true"
                     data-footer="false"
                     data-show-work-hours="true"
                     data-editable="true"
                  data-bind="source: plannerDS"
                ></div> 

               </div>
           </div>
        </div>
    </body>
    </html>


  2. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 25 Jun 2014 Link to this post

    Hi Alex,

    You should set the "stretch" option of the view where the scheduler is initialized - please check the updated example below:

    Kind Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Alex
    Alex avatar
    25 posts
    Member since:
    Dec 2012

    Posted 25 Jun 2014 in reply to Vladimir Iliev Link to this post

    Perfect thanks very much, I missed adding that to the view for the scheduler which was also nested in a tab.  Works now.
  4. Alex
    Alex avatar
    25 posts
    Member since:
    Dec 2012

    Posted 25 Jun 2014 in reply to Alex Link to this post

    One side affect of this though seems to be that the scheduler content is no longer scrollable;  

    (tried also with  data-use-native-scrolling="true")
  5. Alex
    Alex avatar
    25 posts
    Member since:
    Dec 2012

    Posted 25 Jun 2014 in reply to Alex Link to this post

    Not having success getting the scheduler to scroll in this configuration,(wrapping in another scroller view did not work )

    I'm wondering if the configuration in the attached image is just not workable?
  6. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 27 Jun 2014 Link to this post

    Hi Alex,

    The described scenario works as expected on our side as seen in the following screencast:

    Kind Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Alex
    Alex avatar
    25 posts
    Member since:
    Dec 2012

    Posted 27 Jun 2014 in reply to Vladimir Iliev Link to this post

    Thank you Vladimir for the screen cast,. I should have been more explicit though.  It definitely works for me also in the browser , but it is in iOS that it exhibits the inability to scroll, and no remedies I have tried will work.  
  8. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 01 Jul 2014 Link to this post

    Hi Alex,

    I tried to reproduce the described behavior on iPad (iOS v.7) with both native and build-in scrolling and the scheduler content is scrollable. Could you please check the attached video and let me know if I'm missing something? Also if possible please specify the exact device and iOS version that you are using.

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Alex
    Alex avatar
    25 posts
    Member since:
    Dec 2012

    Posted 02 Jul 2014 in reply to Vladimir Iliev Link to this post

    I think what is missing is me giving you better information.   It does work fine for me also when using the framework in the browser, but I am deploying in the mobile framework using Telerik Appbuilder.   Are you able to get access to files stored in the Telerik cloud - if so you could grab the application from there? 
  10. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 04 Jul 2014 Link to this post

    Hi Alex,

    I created sample project in the AppBuilder from the previously provided code and deployed it on iPhone, however the scheduler scrolling is working as expected (as seen in the attached video).

    Also I tried to access your directory in the AppBuilder, however it's empty - are you accessing the AppBuilder from another account?

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Alex
    Alex avatar
    25 posts
    Member since:
    Dec 2012

    Posted 04 Jul 2014 in reply to Vladimir Iliev Link to this post

    Thank you again Vladimir for this example.

    The difference from my implementation that I can see in your example is in your  detail frame the scheduler is not in a  mobile tabstrip, whereas it is in mine.  

    I do have two accounts in AppBuilder under alex@xander.com -  the Cupule 3 project  is under the AppBuilder Professional versus the Telerik Platform.

  12. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 07 Jul 2014 Link to this post

    Hi Alex,

    After inspecting the related project it appears that the reason for current behavior is that the "height" of the scheduler is not set which is mandatory (it was included in the demo that I provide with my first reply). After setting the "height" the scrolling start working as expected:

    <div id="commplanner"
         data-height="600"
         data-role="scheduler"
         data-views="['day','week','month','agenda']"
         data-mobile="tablet"
         data-footer="false"
         data-show-work-hours="true"
         data-editable="true"
         data-bind="source: plannerDS"
         data-useNativeScrolling="true">
    </div>

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top