Use a Mobile ScrollView on a web page?

5 posts, 0 answers
  1. Richard
    Richard avatar
    7 posts
    Member since:
    Nov 2012

    Posted 06 Feb 2014 Link to this post

    Hello,

    We have a responsive web design targeting with first. I am currently using the bootstrap 3 carousel control for images, however, we would like to move to the Kendo Mobile ScrollView to use the swipe actions when on mobile.

    I have been trying to integrate the mobile ScrollView into the page using MVC wrappers without luck. I'm not looking for syntax help, I just need to know if it can be done, if so, a sample would be great.

    I'm fairly new to the Kendo widgets, I noticed there is no MVC wrapper demo for databinding the mobile scrollview? I was hoping to use that as my starting point to learn the syntax. 

    I have been messing with this in all sorts of configurations trying to get it to work unsuccessfully, I think I'm missing some core guidance.
    Thank you.

    My script bundle:
    bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
                "~/Scripts/kendo/kendo.all.min.js",
                "~/Scripts/kendo/kendo.mobile.min.js",
                "~/Scripts/kendo/kendo.aspnetmvc.min.js"));

    My style bundle:
    bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
                "~/Content/kendo/kendo.mobile.all.min.css",
                "~/Content/kendo/kendo.common-bootstrap.min.css",
                "~/Content/kendo/kendo.bootstrap.min.css"));


    My layout page:
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/kendo/css")
     
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/kendo")

    On my view page:
    <div class="row">
        <div class="col-xs-12 col-lg-8 col-centered" style="max-width:600px;">
            <div data-role="view">
                @(Html.Kendo().MobileScrollView()
                .Name("adRotator")
                    .DataSource(ds => ds.Read("GetAdRotatorImages", "Ads", new{id = Model.AdId}))
                )
            </div>
        </div>
    </div>

    And I have tried with and without this at the bottom of the page:
    <script>
        var app = new kendo.mobile.Application();
    </script>


    Thank you,
    Richard
  2. Richard
    Richard avatar
    7 posts
    Member since:
    Nov 2012

    Posted 06 Feb 2014 in reply to Richard Link to this post

    Guess there is no post preview and no way to edit... These forums are REALLY hard to use.

    First line should read; "We have a responsive web design targeting MOBILE first."
  3. Kendo UI is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 07 Feb 2014 Link to this post

    Hi Richard,

    Currently the Kendo UI Mobile widgets, can only be used inside a mobile application. With the next official release, the mobile widgets will be opened for use outside of a mobile app. This release is scheduled for March 2014.

    Regards,
    Kiril Nikolov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Richard
    Richard avatar
    7 posts
    Member since:
    Nov 2012

    Posted 08 Feb 2014 in reply to Kiril Nikolov Link to this post

    Hi Kiril,

    Thank you for the reply. I look forward to being able to use the Mobile Scrollview outside the mobil package.

    For the time being, what do I need to do to create the one page I want to use that widget on? Specifically, the css and script files, since my sight is using aspnetmvc js file, kendo common bootstrap css and kendo bootstrap css, if I include the kendo mobile script for that one page, will I be causing issues? If so, which files should I drop out etc. (I guess I exclude the common layout for the page in question).


    Thanks
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 10 Feb 2014 Link to this post

    Hi Richard,

    You will need to create a Kendo UI Mobile application. Which means an instance of an app and views, however I am not really sure how this will fit in your existing project. You can check the following documentation article, that might shed some light on how to create a Kendo UI Mobile app:

    http://docs.telerik.com/kendo-ui/howto/universal-mobile-apps-html5

    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