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

Use a Mobile ScrollView on a web page?

4 Answers 165 Views

ScrollView (Mobile)

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

digitalQ 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>

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

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