Kendo Mobile + MVC3 in Kendo UI for jQuery

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

Kendo Mobile + MVC3

13 Answers 141 Views

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

Florian asked on 24 Apr 2012, 02:07 PM

Hello,

I'm trying to use kendo mobile with my MVC application but i can't succeed to have a mobile view like an iphone view. There is littles changes on the list but that not appear like on a mobile.

I copy/paste the mobile demos on a view of my mvc application but it doesn't work.

Someone can explain me if i do a miostake?

Thanks.

this is my code on the default view "about" of my mvc application.

@{

ViewBag.Title = "About Us";

}

<div data-role="view" id="flat" data-init="mobileListViewDataBindInitFlat" data-title="ListView" data-layout="databinding">

<ul id="flat-listview"></ul>

</div>

<div data-role="view" id="grouped" data-init="mobileListViewDataBindInitGrouped" data-transition="" data-title="ListView" data-layout="databinding">

<ul id="grouped-listview"></ul>

</div>

<div data-role="layout" data-id="databinding">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

<a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>

</div>

</header>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#flat" data-icon="stop">Flat</a>

<a href="#grouped" data-icon="organize">Grouped</a>

</div>

<script>

var groupedData = [

{ name: "Sashimi salad", letter: "S" },

{ name: "Chirashi sushi", letter: "C" },

{ name: "Seaweed salad", letter: "S" },

{ name: "Edamame", letter: "E" },

{ name: "Miso soup", letter: "M" },

{ name: "Maguro", letter: "M" },

{ name: "Shake", letter: "S" },

{ name: "Shiromi", letter: "S" },

{ name: "Tekka maki", letter: "T" },

{ name: "Hosomaki Mix", letter: "H" },

{ name: "California rolls", letter: "C" },

{ name: "Seattle rolls", letter: "S" },

{ name: "Spicy Tuna rolls", letter: "S" },

{ name: "Ebi rolls", letter: "E" },

{ name: "Chicken Teriyaki", letter: "C" },

{ name: "Salmon Teriyaki", letter: "S" },

{ name: "Gohan", letter: "G" },

{ name: "Tori Katsu", letter: "T" },

{ name: "Yaki Udon", letter: "Y" }

];

var flatData = ["Sashimi salad", "Chirashi sushi", "Seaweed salad", "Edamame", "Miso soup", "Maguro", "Shake", "Shiromi", "Tekka maki", "Hosomaki Mix", "California rolls", "Seattle rolls", "Spicy Tuna rolls", "Ebi rolls", "Chicken Teriyaki", "Salmon Teriyaki", "Gohan", "Tori Katsu", "Yaki Udon"];

function mobileListViewDataBindInitFlat() {

$("#flat-listview").kendoMobileListView({ dataSource: flatData });

}

function mobileListViewDataBindInitGrouped() {

$("#grouped-listview").kendoMobileListView({

dataSource: kendo.data.DataSource.create({ data: groupedData, group: "letter" }),

template: "${name}"

});

}

</script>

<script>

var app = new kendo.mobile.Application(document.body);

</script>

13 Answers, 1 is accepted

answered on 25 Apr 2012, 09:33 AM

Sans-titre.png

Hello,
There is no erros. But it's display like the join screenshot.

I reference that in the layout of my MVC application.

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>

<link href="@Url.Content("~/styles/kendo.common.min.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/styles/kendo.default.min.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/js/jquery.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/js/kendo.all.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/js/cultures/kendo.culture.fr-FR.min.js")" type="text/javascript"></script>

Thanks

answered on 27 Apr 2012, 09:22 AM

Hi Florian,

Thank you for the provided code snippet.

I noticed that you did not included the mobile style sheet files (kendo.mobile.all.css) in your project - most likely that is causing the described problem. In addition it is not recommended to insert jQuery library twice, please remove the jquery-1.5.1.min.js and leave only the officially supported jQuery v.1.7.1.

I hope this information helps. You can find a detailed explanation about how to set up a Kendo Mobile project in the Introduction page.

Greetings,
Alexander Valchev
the Telerik team

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 27 Apr 2012, 02:11 PM

Hello,

This is my new configuration.

<meta charset="utf-8" />

<title>@ViewBag.Title</title>