This is a migrated thread and some comments may be shown as answers.

Use a Mobile ScrollView on a web page?

4 Answers 70 Views
ScrollView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Richard
Top achievements
Rank 1
Richard asked on 06 Feb 2014, 08:27 PM
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

4 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 06 Feb 2014, 08:39 PM
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."
0
Kiril Nikolov
Telerik team
answered on 07 Feb 2014, 08:28 AM
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!
0
Richard
Top achievements
Rank 1
answered on 08 Feb 2014, 04:28 PM
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
0
Kiril Nikolov
Telerik team
answered on 10 Feb 2014, 11:50 AM
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!
Tags
ScrollView (Mobile)
Asked by
Richard
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Kiril Nikolov
Telerik team
Share this question
or