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

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

13 Answers 342 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Diane
Top achievements
Rank 1
Diane asked on 25 Apr 2013, 06:37 PM
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?

13 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 29 Apr 2013, 10:34 AM
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!
0
Diane
Top achievements
Rank 1
answered on 02 May 2013, 03:34 PM
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.
0
Vladimir Iliev
Telerik team
answered on 06 May 2013, 03:21 PM
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!
0
Mike
Top achievements
Rank 1
answered on 03 Jun 2013, 12:30 PM
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
0
Alexander Valchev
Telerik team
answered on 03 Jun 2013, 12:54 PM
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!
0
Mike
Top achievements
Rank 1
answered on 04 Jun 2013, 02:55 PM
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>
0
Cestrian
Top achievements
Rank 2
answered on 01 Sep 2016, 02:51 PM

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.

0
Cestrian
Top achievements
Rank 2
answered on 01 Sep 2016, 02:55 PM

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

0
Vladimir Iliev
Telerik team
answered on 02 Sep 2016, 07:14 AM
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.
 
0
Cestrian
Top achievements
Rank 2
answered on 02 Sep 2016, 09:04 AM

Hi Vladimir,

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

 

0
Emmanuel
Top achievements
Rank 1
answered on 01 Dec 2016, 03:27 AM

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?

0
Vladimir Iliev
Telerik team
answered on 01 Dec 2016, 07:46 AM
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.
0
Emmanuel
Top achievements
Rank 1
answered on 01 Dec 2016, 02:40 PM

hello,

i posted my problem here:

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

Tags
Grid
Asked by
Diane
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Diane
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Mike
Top achievements
Rank 1
Cestrian
Top achievements
Rank 2
Emmanuel
Top achievements
Rank 1
Share this question
or