Kendo Mobile + MVC3

14 posts, 0 answers
  1. Florian
    Florian avatar
    9 posts
    Member since:
    Apr 2012

    Posted 24 Apr 2012 Link to this post

    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>
  2. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 25 Apr 2012 Link to this post

    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!
  3. Florian
    Florian avatar
    9 posts
    Member since:
    Apr 2012

    Posted 25 Apr 2012 Link to this post

    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
  4. Florian
    Florian avatar
    9 posts
    Member since:
    Apr 2012

    Posted 26 Apr 2012 Link to this post

    Some news?
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 27 Apr 2012 Link to this post

    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!
  6. Florian
    Florian avatar
    9 posts
    Member since:
    Apr 2012

    Posted 27 Apr 2012 Link to this post

    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
  7. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 27 Apr 2012 Link to this post

    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!
  8. Florian
    Florian avatar
    9 posts
    Member since:
    Apr 2012

    Posted 27 Apr 2012 Link to this post

    Where can i do that?
  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 27 Apr 2012 Link to this post

    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!
  10. Frank Witte
    Frank Witte avatar
    17 posts
    Member since:
    May 2009

    Posted 14 May 2012 Link to this post

    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:




  11. Florian
    Florian avatar
    9 posts
    Member since:
    Apr 2012

    Posted 14 May 2012 Link to this post

    Yes the problem was I don't include the kendo CSS style.
  12. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 15 May 2012 Link to this post

    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!
  13. Frank Witte
    Frank Witte avatar
    17 posts
    Member since:
    May 2009

    Posted 15 May 2012 Link to this post

    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.



  14. Frank Witte
    Frank Witte avatar
    17 posts
    Member since:
    May 2009

    Posted 15 May 2012 Link to this post

    I notice now that this is 'kendoui.web' which is not the full suite :)

Back to Top