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 451 Views

Grid

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

13 Answers, 1 is accepted

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!

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.

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>