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.
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
>
</
div
>
</
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
0
Hello,
The code looks ok. Can you provide some more information regarding the problem? What does not work? Are there any errors in the browser inspector? Have you referenced all the necessary CSS/JS resources?
Kind regards,
Petyo
the Telerik team
The code looks ok. Can you provide some more information regarding the problem? What does not work? Are there any errors in the browser inspector? Have you referenced all the necessary CSS/JS resources?
Kind regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Florian
Top achievements
Rank 1
answered on 25 Apr 2012, 09:33 AM
Hello,
There is no erros. But it's display like the join screenshot.
I reference that in the layout of my MVC application.
Thanks
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
>
<!-- Dans l'entête (header) de votre page Web, copiez l'appel aux fichiers de style de Kendo UI -->
<
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"
/>
<!-- Puis, copiez l'appel aux fichiers de scripts de Kendo UI -->
<
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
0
Florian
Top achievements
Rank 1
answered on 26 Apr 2012, 02:39 PM
Some news?
0
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
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!
0
Florian
Top achievements
Rank 1
answered on 27 Apr 2012, 02:11 PM
Hello,
This is my new configuration.
Problem is not resolved.
This is my View "About" who is in my MVC application.
I start "
Normally, i have just to do that? Or every View have to be initialise?
If you have answers ...
I don't understand where is the problem.
Thanks
This is my new configuration.
<
meta
charset
=
"utf-8"
/>
<
title
>@ViewBag.Title</
title
>
<
link
href
=
"@Url.Content("
~/Content/Site.css")"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"@Url.Content("
~/Scripts/modernizr-1.7.min.js")"
type
=
"text/javascript"
></
script
>
<!-- Dans l'entête (header) de votre page Web, copiez l'appel aux fichiers de style de Kendo UI -->
<
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"
/>
<!-- Puis, copiez l'appel aux fichiers de scripts de Kendo UI -->
<
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
>
<
script
src
=
"@Url.Content("
~/Scripts/js/kendo.mobile.min.js")"
type
=
"text/javascript"
></
script
>
Problem is not resolved.
This is my View "About" who is in 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>
</div>
</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 type=
"text/javascript"
>
new
kendo.mobile.Application(document.body)
</script>
I start "
new
kendo.mobile.Application(document.body)
" only in this View. Normally, i have just to do that? Or every View have to be initialise?
If you have answers ...
I don't understand where is the problem.
Thanks
0
Hello,
The code looks ok. Is it possible for you to open a support ticket with the runnable project attached? We need to reproduce the error more closely.
Regards,
Petyo
the Telerik team
The code looks ok. Is it possible for you to open a support ticket with the runnable project attached? We need to reproduce the error more closely.
Regards,
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Florian
Top achievements
Rank 1
answered on 27 Apr 2012, 02:47 PM
Where can i do that?
0
Hi Florian,
the Telerik team
You could submit a Kendo support ticket through your account -> section Get Help -> Contact Support Team -> Submit ticket.
Greetings,
Iliana Nikolovathe Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Frank Witte
Top achievements
Rank 1
answered on 14 May 2012, 10:16 AM
Might I add that kendo.mobile.all.min.css is not present in the /style/ folder of the installation archive by default.
You need to make a CDN reference or copy it or something
Example of references using CDN:
You need to make a CDN reference or copy it or something
Example of references using CDN:
<
script
type
=
"text/javascript"
src
=
"http://code.jquery.com/jquery-1.7.1.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"
></
script
>
<
link
href
=
"http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"http://cdn.kendostatic.com/2012.1.322/styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/>
0
Florian
Top achievements
Rank 1
answered on 14 May 2012, 05:43 PM
Yes the problem was I don't include the kendo CSS style.
0
Hi,
It is good to know that the problem is resolved.
Regards,
Iliana Nikolova
the Telerik team
@Frank
I checked and it seems the kendo.mobile.all.min.css file is in the /styles/ folder from the installation package. Please check again and let me know if I misses something.
It is good to know that the problem is resolved.
Regards,
Iliana Nikolova
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Frank Witte
Top achievements
Rank 1
answered on 15 May 2012, 11:31 AM
I am referring to kendoui.web.2012.1.322.commercial.zip available from the customer download area.
In the styles folder there is no 'kendo.mobile.all.min.css' as far as I can see.
In the styles folder there is no 'kendo.mobile.all.min.css' as far as I can see.
0
Frank Witte
Top achievements
Rank 1
answered on 15 May 2012, 12:01 PM
I notice now that this is 'kendoui.web' which is not the full suite :)