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
Top achievements
Rank 1
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>
    </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

Sort by
0
Petyo
Telerik team
answered on 25 Apr 2012, 08:30 AM
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
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.

<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
Alexander Valchev
Telerik team
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!
0
Florian
Top achievements
Rank 1
answered on 27 Apr 2012, 02:11 PM
Hello,

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
Petyo
Telerik team
answered on 27 Apr 2012, 02:31 PM
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
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
Iliana Nikolova
Telerik team
answered on 27 Apr 2012, 03:29 PM
Hi Florian,

You could submit a Kendo support ticket through your account -> section Get Help -> Contact Support Team -> Submit ticket.

Greetings,

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




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
Iliana Nikolova
Telerik team
answered on 15 May 2012, 11:24 AM
Hi,

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

@Florian
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.



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 :)

Asked by
Florian
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Florian
Top achievements
Rank 1
Alexander Valchev
Telerik team
Iliana Nikolova
Telerik team
Frank Witte
Top achievements
Rank 1
Share this question
or