How to get grid work in kendo ui mobile (in Icenium Graphite)

14 posts, 0 answers
  1. Diane
    Diane avatar
    3 posts
    Member since:
    Feb 2012

    Posted 25 Apr 2013 Link to this post

    I have created a kendo ui mobile project in Icenium Graphite, which has kendo.mobile.min.js included.  I understand that there's no grid in kendo mobile and kendo.all.min.js can't coexist with kendo.mobile.min.js.  So I added kendo.grid.min.js, along with kendo.common.min.css and kendo.default.min.css.
    But I am getting error:
    "Uncaught TypeError: undefined is not a function"  from kendo.grid.min.js:10

    Any idea how to get grid to work in kendo ui mobile?  What files to include and in what order?

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 29 Apr 2013 Link to this post

    Hi Diane,

    Your understanding that kendo.all.min.js cannot coexist with kendo.mobile.min.js is correct, but kendo.all.min.js contains kendo.mobile.min.js which means that you should include only kendo.all.min.js.
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
     
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/kendo.all.min.js"></script>


    Kind regards,
    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!
  3. Kendo UI is VS 2017 Ready
  4. Diane
    Diane avatar
    3 posts
    Member since:
    Feb 2012

    Posted 02 May 2013 Link to this post

    Alexander, 
    Thanks  for your reply.  After replacing kendo.mobile.min.js with kendo.all.min.js, grid seems to work ok.  But the listview was giving me problems.  I have a list of names. When you click on the name ( a href), it goes to the detail information page.  It worked fine with kendo.mobile.min.js, but with kendo.all.min.js, it doesn't go to the detail page when clicked.  I also tried this with the sample app https://github.com/rdlauer/icenium-reddit. The app displays a list of subreddit.  Click on each subreddit, it should go to the detail page.  It stops going to the detail page after kendo.mobile.min.js is replaced with kendo.all.min.js.
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 06 May 2013 Link to this post

    Hi Diane,

     
    I tried to reproduce the problem locally (using the provided project at Github) but to no avail – the project works as expected with both "kendo.mobile.min.js" and "kendo.all.min.js".  Could you please provide more information about the exact steps to reproduce the issue on our side as well as more details about the device(OS version) that you are using? This would help us pinpoint the exact reason for this behavior.

    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Mike
    Mike avatar
    8 posts
    Member since:
    Jun 2012

    Posted 03 Jun 2013 Link to this post

    Hi Alex.

    I tried to follow you suggestion but am failing.

    I created a new Icenium project (in Graphite) using the Telerik Mobile template.

    I want to add Kendo UI Web controls, so I uploaded the kendo.all.min.js from my computer and changed the script tag as you suggested, but now the mobile tab strip is not displayed and the styles don't seem to work properly.

    Can you provide some additional detail on getting this to work?

    Thanks !!
    -Mike Graham
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 03 Jun 2013 Link to this post

    Hello Mike,

    Could you provide the code in reference so I can get a better overview of your scenario? Do you receive any JavaScript errors? Please do not forget that in addition to the kendo.all.js file you should include the Kendo UI Web CSS resources.

    Regards,
    Alexander Valchev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Mike
    Mike avatar
    8 posts
    Member since:
    Jun 2012

    Posted 04 Jun 2013 Link to this post

    Hi Alexander,

    I was trying to embed the Grid inside one of the mobile sample's <Div> tags.

    I replace the main page with the code below and it works !!  this is soooooooooooo cool !!!:

    Runs in all the different simulators in Icenium Graphite.  It is amazing :)

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta charset="utf-8" />
            <script src="cordova.js"></script>
            <script src="kendo/js/jquery.min.js"></script>
            <script src="kendo/js/kendo.all.min.js"></script>
            <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
            <script src="scripts/hello-world.js"></script>
     
            <link href="kendo/styles/kendo.common.min.css" rel="stylesheet" />
            <link href="kendo/styles/kendo.default.min.css" rel="stylesheet" />
     
            <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
            <link href="styles/main.css" rel="stylesheet" />
        </head>
        <body>
            <H1>hello !!</H1>
             
                <div id="grid"></div>
                <script>
                    // var app = new kendo.mobile.Application(document.body);
                    $(document).ready(function() {
                         var people = [
    { firstName: "John", lastName: "Smith", email: "john.smith@kendoui.com" },
    { firstName: "Jane", lastName: "Smith", email: "jane.smith@kendoui.com" },
    { firstName: "Josh", lastName: "Davis", email: "josh.davis@kendoui.com" },
    { firstName: "Cindy", lastName: "Jones", email: "cindy.jones@kendoui.com" } ];
                         $("#grid").kendoGrid({
                             dataSource: people
                         });
                    });
                </script>
             
        </body>
    </html>
  9. Cestrian
    Cestrian avatar
    17 posts
    Member since:
    Sep 2012

    Posted 01 Sep Link to this post

    Hi,

    Did anyone have any issues with the icons on the pagers and column headers for filtering etc on the grid. There's a sprite file used to display the icons referenced in the CSS. I've placed it in the following document structure: ~/kendo/styles/default/sprint_2x.png and it works fine in the Appbuilder device simulator but when I load the app onto a device the icons aren't visible.

    Any ideas?

    Thanks in advance.

  10. Cestrian
    Cestrian avatar
    17 posts
    Member since:
    Sep 2012

    Posted 01 Sep in reply to Cestrian Link to this post

    Additionally in Chrome://Inspect the sprite file is not found either with the following path specified:

    file:///data/user/0/com.telerik.'Application Name here'/files/'Guid here'/kendo/styles/Default/sprite_2x.png net::ERR_FILE_NOT_FOUND

  11. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 02 Sep Link to this post

    Hi Phil,

    As this thread is out of the original topic, may I kindly ask you to open a new support thread for the Grid? In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving.

    Regards,
    Vladimir Iliev
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  12. Cestrian
    Cestrian avatar
    17 posts
    Member since:
    Sep 2012

    Posted 02 Sep in reply to Vladimir Iliev Link to this post

    Hi Vladimir,

    Posted on this link: http://www.telerik.com/forums/grid-pager-and-column-filter-icons-using-cordova

     

  13. Emmanuel
    Emmanuel avatar
    4 posts
    Member since:
    Nov 2016

    Posted 4 days and 11 hours ago in reply to Mike Link to this post

    Hi,

    I'm trying that same as you and my grid works fine on the "emulators" but when I run it on a device, it won't load the app. Any help with that?

  14. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 4 days and 7 hours ago Link to this post

    Hello Emmanuel,

    From the provided information it's not clear for us what might be the reason for this behavior. Could you please open a new support thread / forum post and provide the current setup that you are using? This would help us pinpoint the exact reason for current behavior. 

    Regards,
    Vladimir Iliev
    Telerik by Progress
    Kendo UI is ready for Visual Studio 2017 RC! Learn more.
  15. Emmanuel
    Emmanuel avatar
    4 posts
    Member since:
    Nov 2016

    Posted 4 days ago in reply to Vladimir Iliev Link to this post

    hello,

    i posted my problem here:

    http://www.telerik.com/forums/kendo-grid-on-mobile-devices

Back to Top
Kendo UI is VS 2017 Ready