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
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
Rank 1
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.
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.
Vladimir Iliev
the Telerik team
Rank 1
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
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
Rank 1
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>
Rank 2
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.
Rank 2
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
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
Rank 2
Hi Vladimir,
Posted on this link: http://www.telerik.com/forums/grid-pager-and-column-filter-icons-using-cordova
Rank 1
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?
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
Rank 1
hello,
i posted my problem here:
http://www.telerik.com/forums/kendo-grid-on-mobile-devices