I have been at this for hours! Using the Sushi example as a reference im trying to link the from my list view to the details view by passing the "alert_ID" from my datasource. Please help, im sure it's something simple.
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="alerts_list" data-role="view" data-title="IRIS Alerts" style="background-color: #FFF">
<header data-role="header" >
<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></div>
<!--DETAIL VIEW-->
<div data-role="view" id="details" data-transition="slide" data-layout="default" data-show="showDetailsView" style="background-color: #FFF">
<header data-role="header">
<div data-role="navbar">
<a data-role="backbutton" data-align="left">Back</a>
<span data-role="view-title">Alert Details</span>
</div>
</header>
<div data-role="content">
</div>
</div>
<!--LISTVIEW LAYOUT-->
<script id="tmp" type="text/x-kendo-template">
<a class="details-link" data-role="listview-link" href="\#details">
<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" href="\#details" class="listviewbutton" data-icon="mostrecent"></a>
</a>
</script>
<!--DETAIL VIEW LAYOUT-->
<script id="detailTemplate" type="text/x-kendo-template">
<aside>
<img src="http://s215821072.onlinehome.us/irismobile/images/#: degree #.png" />
</aside>
<h2>#: title #</h2>
<p>#: message #</p>
</script>
<!--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=3798559",
dataType: "json", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
}
},
schema: {
data: "results",
model: {
id: "alert_ID",
fields: {
//field description
}
}
}
});
//Get Details
ds.fetch();
var itemDetailsTemplate = kendo.template($("#detailTemplate").text());
function showDetailsView(e) {
var view = e.view;
ds.fetch(function() {
item = ds.get(view.params.alert_ID);
view.scrollerContent.html(itemDetailsTemplate(item));
kendo.mobile.init(view.content);
});
}
</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="index.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>
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="alerts_list" data-role="view" data-title="IRIS Alerts" style="background-color: #FFF">
<header data-role="header" >
<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></div>
<!--DETAIL VIEW-->
<div data-role="view" id="details" data-transition="slide" data-layout="default" data-show="showDetailsView" style="background-color: #FFF">
<header data-role="header">
<div data-role="navbar">
<a data-role="backbutton" data-align="left">Back</a>
<span data-role="view-title">Alert Details</span>
</div>
</header>
<div data-role="content">
</div>
</div>
<!--LISTVIEW LAYOUT-->
<script id="tmp" type="text/x-kendo-template">
<a class="details-link" data-role="listview-link" href="\#details">
<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" href="\#details" class="listviewbutton" data-icon="mostrecent"></a>
</a>
</script>
<!--DETAIL VIEW LAYOUT-->
<script id="detailTemplate" type="text/x-kendo-template">
<aside>
<img src="http://s215821072.onlinehome.us/irismobile/images/#: degree #.png" />
</aside>
<h2>#: title #</h2>
<p>#: message #</p>
</script>
<!--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=3798559",
dataType: "json", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
}
},
schema: {
data: "results",
model: {
id: "alert_ID",
fields: {
//field description
}
}
}
});
//Get Details
ds.fetch();
var itemDetailsTemplate = kendo.template($("#detailTemplate").text());
function showDetailsView(e) {
var view = e.view;
ds.fetch(function() {
item = ds.get(view.params.alert_ID);
view.scrollerContent.html(itemDetailsTemplate(item));
kendo.mobile.init(view.content);
});
}
</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="index.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>
1 Answer, 1 is accepted
0
Hello George,
I've created an example from the code you've posted so that it illustrates what I mean.
http://jsbin.com/iLunopI/1/edit
Regards,
Nikolay Rusev
Telerik
If I understand your problem correctly you will need to modify the ListView item template so that the link contains the value of `alert_ID` in the href as in this help article. For example:
<script id="tmp" type="text/x-kendo-template"> .... <a data-role="button" href="\#details?alert_ID=#=alert_ID#" class="listviewbutton" data-icon="mostrecent"></a> ...</script>I've created an example from the code you've posted so that it illustrates what I mean.
http://jsbin.com/iLunopI/1/edit
Regards,
Nikolay Rusev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!