Use a Mobile ScrollView on a web page?

[Richard]

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

[Richard]

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."

[Kiril Nikolov]

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

[Richard]

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

[Kiril Nikolov]

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