Hi, I am new to Kendo. Making the switch from JQuery Mobile.
I have some remote JSON data that I want to bind to an action sheet or event a list view. Sounds super simple but I am not sure of the syntax at its most basic level.
Can someone give me an example.
Here is my feed if that helps:
http://test.irisdispatch.com/public/mobilefunctions.cfc?method=getAlerts&returnformat=plain&user_id=10861
I have some remote JSON data that I want to bind to an action sheet or event a list view. Sounds super simple but I am not sure of the syntax at its most basic level.
Can someone give me an example.
Here is my feed if that helps:
http://test.irisdispatch.com/public/mobilefunctions.cfc?method=getAlerts&returnformat=plain&user_id=10861
8 Answers, 1 is accepted
0
Hi George,
Thank you for providing the Json feed.
In order to bind the data you need to set the schema.data property to "items" as this is the field which holds the records array. In addition it is recommended to describe the data in the schema.model definition.
For you convenience I prepared a small example:
Regards,
Alexander Valchev
Telerik
Thank you for providing the Json feed.
In order to bind the data you need to set the schema.data property to "items" as this is the field which holds the records array. In addition it is recommended to describe the data in the schema.model definition.
schema: { data: "items", model: { id: "alert_ID", fields: { //field description } }}For you convenience I prepared a small example:
The sample demonstrates how to display the data in ListView. The ActionSheet widget does not support binding to remote data.
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
George
Top achievements
Rank 1
Rank 1
answered on 21 Aug 2013, 02:48 PM
Thank you so much. I knew it had to be super easy!
I was having a hard time understanding the difference between the action sheet and list view. Can't list view accomplish the same things?
I was having a hard time understanding the difference between the action sheet and list view. Can't list view accomplish the same things?
0
Hello George,
ListView and ActionSheet are two different components. In order to learn what for they should be used for you can check the iOS UI Element Usage guidelines.
(search for "Table View" and "ActionSheet")
Regards,
Alexander Valchev
Telerik
ListView and ActionSheet are two different components. In order to learn what for they should be used for you can check the iOS UI Element Usage guidelines.
(search for "Table View" and "ActionSheet")
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
George
Top achievements
Rank 1
Rank 1
answered on 22 Aug 2013, 04:25 AM
Thank you! im learning so much.
I got the list view pretty much working how I want it.
Can you help me get it to where a user clicks on an item from the list view it will go to the detail view and carry the "Alert_ID" to pull the correct record?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>IRIS Mobile</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.flat.min.css" rel="stylesheet" />
<link href="styles/IRISmobile.css" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="listview-home" data-role="view" data-title="IRIS Alerts">
<div data-role="navbar">
<span data-role="button" data-align="left" data-icon="home" href="#main-menu" data-rel="drawer"></span>
<span data-role="view-title"></span>
<a data-role="button" data-rel="drawer" href="#alert-menu" data-icon="info" data-align="right"></a>
</div>
</header>
<div class="head"> </div>
<ul id="list" data-role="listview" data-source="IRISalerts" data-click="listViewClick" data-template="tmp"></ul>
</div>
<!--LISTVIEW DATA-->
<script id="tmp" type="text/x-kendo-template">
<img class="alertimage" src="http://s215821072.onlinehome.us/irismobile/images/#: degree #.png" />
<div class="listviewdiv">
<h3 class="item-info">#: title #</h3>
<p class="item-title">#: sentDT # <span class="AlertTitle"> :: #: sender # </span></p>
</div>
<a data-role="button" class="listviewbutton" data-icon="mostrecent"></a>
</script>
<!--END LISTVIEW DATA-->
<!--DETAIL VIEW-->
<!--GET REMOTE JSON DATA-->
<script>
var app = new kendo.mobile.Application();
var IRISalerts = new kendo.data.DataSource({
transport: {
read: {
url: "http://test.irisdispatch.com/public/mobilefunctions.cfc?method=getAlerts&returnformat=plain&user_id=10861",
dataType: "json", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
}
},
schema: {
data: "items",
model: {
id: "alert_ID",
fields: {
//field description
}
}
}
});
</script>
<!--END GET REMOTE JSON DATA-->
<!--LEFT DATA DRAWER-->
<div data-role="drawer" id="main-menu">
<div><img src="images/greylogo.png"></div>
<ul data-role="listview">
<li><a href="views/settings.html" data-transition="none">Settings</a></li>
<li><a href="views/favorites.html" data-transition="none">Log Out</a></li>
</ul>
</div>
<!--END LEFT DATA DRAWER-->
<!--RIGHT DATA DRAWER-->
<div data-role="drawer" id="alert-menu" data-position="right" style="width: 80px" data-title="Codes">
<div>
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<img src="images/alertlegend.png" width="100%"/>
</div>
<!--END RIGHT DATA DRAWER-->
<script>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
I got the list view pretty much working how I want it.
Can you help me get it to where a user clicks on an item from the list view it will go to the detail view and carry the "Alert_ID" to pull the correct record?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>IRIS Mobile</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.flat.min.css" rel="stylesheet" />
<link href="styles/IRISmobile.css" rel="stylesheet" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="listview-home" data-role="view" data-title="IRIS Alerts">
<div data-role="navbar">
<span data-role="button" data-align="left" data-icon="home" href="#main-menu" data-rel="drawer"></span>
<span data-role="view-title"></span>
<a data-role="button" data-rel="drawer" href="#alert-menu" data-icon="info" data-align="right"></a>
</div>
</header>
<div class="head"> </div>
<ul id="list" data-role="listview" data-source="IRISalerts" data-click="listViewClick" data-template="tmp"></ul>
</div>
<!--LISTVIEW DATA-->
<script id="tmp" type="text/x-kendo-template">
<img class="alertimage" src="http://s215821072.onlinehome.us/irismobile/images/#: degree #.png" />
<div class="listviewdiv">
<h3 class="item-info">#: title #</h3>
<p class="item-title">#: sentDT # <span class="AlertTitle"> :: #: sender # </span></p>
</div>
<a data-role="button" class="listviewbutton" data-icon="mostrecent"></a>
</script>
<!--END LISTVIEW DATA-->
<!--DETAIL VIEW-->
<!--GET REMOTE JSON DATA-->
<script>
var app = new kendo.mobile.Application();
var IRISalerts = new kendo.data.DataSource({
transport: {
read: {
url: "http://test.irisdispatch.com/public/mobilefunctions.cfc?method=getAlerts&returnformat=plain&user_id=10861",
dataType: "json", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
}
},
schema: {
data: "items",
model: {
id: "alert_ID",
fields: {
//field description
}
}
}
});
</script>
<!--END GET REMOTE JSON DATA-->
<!--LEFT DATA DRAWER-->
<div data-role="drawer" id="main-menu">
<div><img src="images/greylogo.png"></div>
<ul data-role="listview">
<li><a href="views/settings.html" data-transition="none">Settings</a></li>
<li><a href="views/favorites.html" data-transition="none">Log Out</a></li>
</ul>
</div>
<!--END LEFT DATA DRAWER-->
<!--RIGHT DATA DRAWER-->
<div data-role="drawer" id="alert-menu" data-position="right" style="width: 80px" data-title="Codes">
<div>
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<img src="images/alertlegend.png" width="100%"/>
</div>
<!--END RIGHT DATA DRAWER-->
<script>
var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
0
Hello George,
I am afraid that providing custom solution or tailored examples falls out of the scope of our standard support services. Moreover, your last question does not seems to be connected with the initial subject of this thread.
My recommendation is to check the sushi sample application where you can see how such type of navigation can be implemented.
Regards,
Alexander Valchev
Telerik
I am afraid that providing custom solution or tailored examples falls out of the scope of our standard support services. Moreover, your last question does not seems to be connected with the initial subject of this thread.
My recommendation is to check the sushi sample application where you can see how such type of navigation can be implemented.
- [live-view] http://demos.kendoui.com/mobile/simulator/
- [source] https://github.com/telerik/kendo-mobile-sushi
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
Creationator
Top achievements
Rank 1
Rank 1
answered on 06 Jan 2016, 06:55 PM
Hi, I think I am having the same issue - I think. Im new to Kendo as well. I am trying to shape my JSON object to display nested array of objects. Below is a screen shot of what I am getting back. Can someone help me please!
0
Creationator
Top achievements
Rank 1
Rank 1
answered on 06 Jan 2016, 06:57 PM
Here is the screen shot. For some reason It didn't attach the first time.
0
Hello Derrick,
The productName is array, in order to display it you should format in some way. For example to stringify it into JSON using kendo.stringify method.
I am attaching a screen shot which shows a possible solution.
Regards,
Alexander Valchev
Telerik
The productName is array, in order to display it you should format in some way. For example to stringify it into JSON using kendo.stringify method.
I am attaching a screen shot which shows a possible solution.
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!