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

Using Kendo Web UI widgets and DataViz within the Mobile UI

10 Answers 411 Views

General Discussions

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

Lee asked on 28 Feb 2012, 04:32 PM

I am trying to get my head around Kendo UI and would like to use it to build a mobile version of a website. I have never built a website for a mobile before nor have I ever built an application for a mobile.

I have tested some off the Web UI Widgets on my android phone, IPad and PC and am really impressed.

I have now come to test the Mobile UI and am getting a little confused. Is the Web UI and Mobile UI completely separate? I notice that for the Web Widgets you need to include the file kendo.all.min.js and for mobile you include kendo.mobile.min.js. Can these be used in conjunction? What about Dataviz?

For example, If I wanted to use the upload widget and use dataviz charts within the Mobile UI could I? I have tested this and it does to appear to work. Its great that the mobile UI will re-skin to an Android or iOS but will this work on other platforms ?

Many thanks in advance for anyone who can clear this up.

10 Answers, 1 is accepted

answered on 29 Feb 2012, 12:29 PM

Thank you for your response. However, the more I read on here the more I get confused. The below post states, "You can use the regular Kendo UI Web (and, for that matter, the DataViz) widgets inside the mobile application."

http://www.kendoui.com/forums/mobile/general-discussions/application-accessibility.aspx

Could you thereore confirm how I should go about building a mobile version of a site which could also be used on an ipad or other tablet? Should I build using the Web UI so that all the widgets and dataviz are available and then use PhoneGap to get it looking native? Therefore leaving the Mobile UI well alone?

Many thanks in advance!

answered on 29 Feb 2012, 02:02 PM

I will be rebuilding from scratch and only offering limited features for now. I therefore want to ensure I go with the best option that allows me to expand in the future and make the best use of all Kendo's features. I want to use the web widgets, all well as dataviz and also have this looking native. After all I have read I am still at a loss to know whether this is possible to achieve within one application, or even if it will be possible in the future.

You have stated that "Kendo UI Mobile and Kendo UI Web are separate suites" but also that "You can use the regular Kendo UI Web (and, for that matter, the DataViz) widgets inside the mobile application." Therefore can you clarify and advise on this? Can I combine the two as shown in the example below where I am using the Mobile UI and adding the Web UI autocomplete widget? If not now, in the future?

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Testing Kendo Mobile UI</title>

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

<script src="js/jquery.min.js" type="text/javascript"></script>

<script src="js/kendo.all.min.js" type="text/javascript"></script>

<script src="js/kendo.mobile.min.js" type="text/javascript"></script>

</head>

<body>

<div data-role="view">

<div data-role="header">Header</div>

<h2>Testing Kendo Mobile UI</h2>

<input id="autoComplete" />

<div data-role="footer">Footer</div>

</div>

<script>

var app = new kendo.mobile.Application(); //document.body is used by default

$(document).ready(function() {

$("#autoComplete").kendoAutoComplete(["Item1", "Item2"]);

});

</script>

answered on 01 Mar 2012, 01:02 PM

ok, I have tested using some of the Web UI widgets within the Mobile UI and have come across issues. The combo box doesn't work on Andriod, the datagrid doesn't work on iOS, the autocomplete doesn't work on andriod and neither does the upload function.

Below is another example. The autocomplete works when not within the mobile UI. You mentioned when I supplied an example earlier that, "Something similar would work." Can you elaborate? I am obviously doing something wrong.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Mobile Version</title>

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />

<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script src="http://cdn.kendostatic.com/2012.1.124/js/kendo.all.min.js" type="text/javascript"></script>

<script src="http://cdn.kendostatic.com/2012.1.124/js/kendo.mobile.min.js" type="text/javascript"></script>

</head>

<body>

<div data-role="view" data-title="Free Webstore Control Panel">

<div data-role="header">Header</div>

<h3>Autocomplete</h3>

<p>Type in something wedding related</p>

<p>Allows multiple entries, this examples seperates them with a comma.</p>

<div class="search">

<input id="autoComplete" />

</div>

<script>

$(document).ready(function() {

$("#autoComplete").kendoAutoComplete({

minLength: 3,

dataTextField: "productName", // XML property name to use

dataSource: new kendo.data.DataSource({

type: "xml", // specifies data protocol

pageSize: 10, // limits result set

transport: {

read: "products.xml"

},

schema: {

type: "xml",

data: "/products/product",

model: {

fields: {

productName: "productName/text()"

}

})

});

</script>

<div data-role="footer">Footer</div>

</div>

<script>

var app = new kendo.mobile.Application(); //document.body is used by default

</script>

</body>

</html>

Accepted

answered on 01 Mar 2012, 05:16 PM

Hi Leanne,

I tried to reproduce your problems with local data, but everything seems to work on my side. That is the demo that I used to test your case. Please check it and let me know if I missed something.

There are a few issues that I spotted in your code sample:

You are using an old version of Kendo Mobile beta, which does not work with Kendo Web widgets. That problem however is fixed in the latest beta, so I suggest using the new scripts.
The $(document).ready() function is not at the right place.
The mark up is invalid - there is an extra closing <div> tag.

As for the upload function, it will not work due to the device OS restrictions.

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!