marbleblue
Top achievements
Rank 1
Rank 1
marbleblue
asked on 27 Nov 2012, 06:20 PM
Hi guys,
In the following code sample, how can I replace the actionsheet, so via the click of the button, the showDetails function is
called directly and view changed (whilst taking the row context across so I can get the selected row's values out)?
<div id="main" data-role="view" data-title="Schedule" data-model="viewModel" data-layout="default">
<ul id="items" data-role="listview" data-template="diaryItem" data-style="inset" data-bind="source: dataSource" ></ul>
<ul id="actions" data-role="actionsheet">
<li class="km-actionsheet-title">Select operation:</li>
<li><a href="#" data-action="viewModel.showDetails">Details</a></li>
</ul>
</div>
<!--details view-->
<div id="details" data-role="view" data-model="viewModel.selectedProduct" data-title="Details" data-layout="default">
<ul id="info" data-role="listview" data-style="inset">
<li>
Company Name:
<span data-bind="text: CompanyName"></span>
</li>
</ul>
</div>
<!--listview template-->
<script id="productItem" type="text/x-kendo-template">
<span>#= ProductName #</span>
// Clicking this button pops up the actionsheet, but I want to bypass it and call the showDetails function directly
<a class="btnActions"
data-role="button"
data-rel="actionsheet"
href="\\#actions"
data-actionsheet-context="#= itemID #">Actions</a>
</script>
<script type="text/javascript">
var app = new kendo.mobile.Application(),
validator,
viewModel = kendo.observable({
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: "api/diary",
type: "GET"
}
},
batch: true,
pageSize: 20,
schema: {
data: "Data",
total: "Count"
}
}),
selectedItem: {},
showDetails: function (e) {
var item = viewModel.dataSource.get(e.context); //gets the ActionSheet context
viewModel.set("selectedItem", item); //sets the selected product
app.navigate("#details"); //navigates to details view
}
});
</script>
In the following code sample, how can I replace the actionsheet, so via the click of the button, the showDetails function is
called directly and view changed (whilst taking the row context across so I can get the selected row's values out)?
<div id="main" data-role="view" data-title="Schedule" data-model="viewModel" data-layout="default">
<ul id="items" data-role="listview" data-template="diaryItem" data-style="inset" data-bind="source: dataSource" ></ul>
<ul id="actions" data-role="actionsheet">
<li class="km-actionsheet-title">Select operation:</li>
<li><a href="#" data-action="viewModel.showDetails">Details</a></li>
</ul>
</div>
<!--details view-->
<div id="details" data-role="view" data-model="viewModel.selectedProduct" data-title="Details" data-layout="default">
<ul id="info" data-role="listview" data-style="inset">
<li>
Company Name:
<span data-bind="text: CompanyName"></span>
</li>
</ul>
</div>
<!--listview template-->
<script id="productItem" type="text/x-kendo-template">
<span>#= ProductName #</span>
// Clicking this button pops up the actionsheet, but I want to bypass it and call the showDetails function directly
<a class="btnActions"
data-role="button"
data-rel="actionsheet"
href="\\#actions"
data-actionsheet-context="#= itemID #">Actions</a>
</script>
<script type="text/javascript">
var app = new kendo.mobile.Application(),
validator,
viewModel = kendo.observable({
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: "api/diary",
type: "GET"
}
},
batch: true,
pageSize: 20,
schema: {
data: "Data",
total: "Count"
}
}),
selectedItem: {},
showDetails: function (e) {
var item = viewModel.dataSource.get(e.context); //gets the ActionSheet context
viewModel.set("selectedItem", item); //sets the selected product
app.navigate("#details"); //navigates to details view
}
});
</script>
4 Answers, 1 is accepted
0
marbleblue
Top achievements
Rank 1
Rank 1
answered on 28 Nov 2012, 10:34 AM
I tried this in the template, but the row context wasn't passed, so the detail view only showed data from the top row of the listview regardless of which row button was clicked.
<span style="float:right">
<a data-role="button" data-bind="events: { click: showDetails }"> > </a>
</span>
<span style="float:right">
<a data-role="button" data-bind="events: { click: showDetails }"> > </a>
</span>
0
Accepted
Hello,
Petyo
the Telerik team
The recommended way to achieve that would be to use the listview click event - in the handler parameters you can check for the corresponding button and the dataItem information.
Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
marbleblue
Top achievements
Rank 1
Rank 1
answered on 03 Dec 2012, 05:54 PM
Hi Guys, I could really do with some help here, this is driving me up the wall.
I've been going around in circles with this. I've even tried nicking code from the Sushi example.
The listview appears, but I just cant get it to display the correct details view on click of the button - it always just displays the details for the top item in the list. The url always reverts to localhost/index.aspx#detail#!
The data comes from a datatable.ToArray()
<!DOCTYPE html>
<html>
<head>
<title>Kendo Sushi</title>
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet">
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet">
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a class="about-button" data-align="right" href="#demo" data-role="button">Test</a>
</div>
</header>
<footer data-role="footer" data-id="default">
<div data-role="tabstrip">
<a href="#index" data-icon="home">Home</a>
<a href="#menu" data-icon="organize">Our menu</a>
<a href="#cart" data-icon="cart">Cart</a>
<a href="#account" data-icon="contacts">Account</a>
</div>
</footer>
</div>
<div data-title="Your Diary" data-role="view" id="index" data-url="/" data-layout="default" data-show="showMenuView">
<ul id="featured"
class="item-list"
data-role="listview"
data-template="menuTemplate"
data-source="featured"
></ul>
</div>
<div data-role="view" id="details" data-transition="slide" data-layout="default" data-show="showDetailsView">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title">Item</span>
</div>
</header>
<div data-role="content">
</div>
</div>
<script id="menuTemplate" type="text/x-kendo-template">
<div>
<div style="float:left; width:50px; vertical-align: middle; margin-top: 20px"><img class="profileImage" src="http://garrettgibbons.com/blog/wp-content/themes/photocrati-theme/images/social/small-twitter.png" /></div>
<div style="float:left">
<div class="text"><b>#= kendo.toString(new Date(ActualStartDate), 'dddd') #</b></div>
<div class="text">#= kendo.toString(new Date(ActualStartDate), 'dd/MM/yyyy') # #= kendo.toString(new Date(ActualTimeFrom), 'HH:mm') #-#= kendo.toString(new Date(ActualTimeTo), 'HH:mm')#</div>
<div class="text">${CompanyName}, ${VacancyName}, ${Id}</div>
</div>
<div style="float:right; margin-top: 20px" >
<a id="btndetail"
class="details-link"
data-role="button"
data-name="hitme"
href="\#details?Id=#:Id#"
data-item-id="#:Id#">
<h2>#:Id#</h2>
</a>
</div>
</div>
</script>
<script id="detailTemplate" type="text/x-kendo-template">
<div>
<div class="text">#:CompanyName#</div>
<div class="text">#:VacancyName#</div>
<div class="text">#:Id#</div>
</div>
</script>
<script>
var app;
var schema = { data: "Data", total: "Count", model: {} };
var ds = kendo.data.DataSource.create({
transport: {
read: {
url: "api/diary",
type: "GET"
},
},
schema: schema,
pageSize: 3
});
var featured = kendo.data.DataSource.create({
schema: schema
});
ds.bind("change", function () {
featured.data(ds.data());
});
ds.fetch();
var itemDetailsTemplate = kendo.template($("#detailTemplate").text());
function showDetailsView(e) {
var view = e.view;
ds.fetch(function() {
item = ds.get(view.params.id);
view.scrollerContent.html(itemDetailsTemplate(item));
kendo.mobile.init(view.content);
});
}
function showMenuView(e) {
e.view.content.find(".item-list").data("kendoMobileListView").refresh();
}
app = new kendo.mobile.Application($(document.body), { transition: "slide" });
Model:
public DateTime ActualStartDate { get; set; }
public DateTime ActualEndDate { get; set; }
public DateTime ActualTimeFrom { get; set; }
public DateTime ActualTimeTo { get; set; }
public string ShiftStateDescription { get; set; }
public string CompanyName { get; set; }
public string VacancyName { get; set; }
public Int64 Id { get; set; }
public Diary(System.Data.DataRow dr)
{
this.ActualStartDate = (DateTime)dr["ActualStartDate"];
this.ActualEndDate = (DateTime)dr["ActualEndDate"];
this.ActualTimeFrom = (DateTime)dr["ActualTimeFrom"];
this.ActualTimeTo = (DateTime)dr["ActualTimeTo"];
this.ShiftStateDescription = (string)dr["ShiftStateDescription"];
this.CompanyName = (string)dr["CompanyName"];
this.VacancyName = (string)dr["VacancyName"];
this.Id = (Int64)dr["PlanSerialNumber"];
}
I've been going around in circles with this. I've even tried nicking code from the Sushi example.
The listview appears, but I just cant get it to display the correct details view on click of the button - it always just displays the details for the top item in the list. The url always reverts to localhost/index.aspx#detail#!
The data comes from a datatable.ToArray()
<!DOCTYPE html>
<html>
<head>
<title>Kendo Sushi</title>
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet">
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet">
<link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a class="about-button" data-align="right" href="#demo" data-role="button">Test</a>
</div>
</header>
<footer data-role="footer" data-id="default">
<div data-role="tabstrip">
<a href="#index" data-icon="home">Home</a>
<a href="#menu" data-icon="organize">Our menu</a>
<a href="#cart" data-icon="cart">Cart</a>
<a href="#account" data-icon="contacts">Account</a>
</div>
</footer>
</div>
<div data-title="Your Diary" data-role="view" id="index" data-url="/" data-layout="default" data-show="showMenuView">
<ul id="featured"
class="item-list"
data-role="listview"
data-template="menuTemplate"
data-source="featured"
></ul>
</div>
<div data-role="view" id="details" data-transition="slide" data-layout="default" data-show="showDetailsView">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title">Item</span>
</div>
</header>
<div data-role="content">
</div>
</div>
<script id="menuTemplate" type="text/x-kendo-template">
<div>
<div style="float:left; width:50px; vertical-align: middle; margin-top: 20px"><img class="profileImage" src="http://garrettgibbons.com/blog/wp-content/themes/photocrati-theme/images/social/small-twitter.png" /></div>
<div style="float:left">
<div class="text"><b>#= kendo.toString(new Date(ActualStartDate), 'dddd') #</b></div>
<div class="text">#= kendo.toString(new Date(ActualStartDate), 'dd/MM/yyyy') # #= kendo.toString(new Date(ActualTimeFrom), 'HH:mm') #-#= kendo.toString(new Date(ActualTimeTo), 'HH:mm')#</div>
<div class="text">${CompanyName}, ${VacancyName}, ${Id}</div>
</div>
<div style="float:right; margin-top: 20px" >
<a id="btndetail"
class="details-link"
data-role="button"
data-name="hitme"
href="\#details?Id=#:Id#"
data-item-id="#:Id#">
<h2>#:Id#</h2>
</a>
</div>
</div>
</script>
<script id="detailTemplate" type="text/x-kendo-template">
<div>
<div class="text">#:CompanyName#</div>
<div class="text">#:VacancyName#</div>
<div class="text">#:Id#</div>
</div>
</script>
<script>
var app;
var schema = { data: "Data", total: "Count", model: {} };
var ds = kendo.data.DataSource.create({
transport: {
read: {
url: "api/diary",
type: "GET"
},
},
schema: schema,
pageSize: 3
});
var featured = kendo.data.DataSource.create({
schema: schema
});
ds.bind("change", function () {
featured.data(ds.data());
});
ds.fetch();
var itemDetailsTemplate = kendo.template($("#detailTemplate").text());
function showDetailsView(e) {
var view = e.view;
ds.fetch(function() {
item = ds.get(view.params.id);
view.scrollerContent.html(itemDetailsTemplate(item));
kendo.mobile.init(view.content);
});
}
function showMenuView(e) {
e.view.content.find(".item-list").data("kendoMobileListView").refresh();
}
app = new kendo.mobile.Application($(document.body), { transition: "slide" });
Model:
public DateTime ActualStartDate { get; set; }
public DateTime ActualEndDate { get; set; }
public DateTime ActualTimeFrom { get; set; }
public DateTime ActualTimeTo { get; set; }
public string ShiftStateDescription { get; set; }
public string CompanyName { get; set; }
public string VacancyName { get; set; }
public Int64 Id { get; set; }
public Diary(System.Data.DataRow dr)
{
this.ActualStartDate = (DateTime)dr["ActualStartDate"];
this.ActualEndDate = (DateTime)dr["ActualEndDate"];
this.ActualTimeFrom = (DateTime)dr["ActualTimeFrom"];
this.ActualTimeTo = (DateTime)dr["ActualTimeTo"];
this.ShiftStateDescription = (string)dr["ShiftStateDescription"];
this.CompanyName = (string)dr["CompanyName"];
this.VacancyName = (string)dr["VacancyName"];
this.Id = (Int64)dr["PlanSerialNumber"];
}
0
Hello,
Petyo
the Telerik team
I am not sure what goes on from the source code posted, it could be a. Is it possible for you to isolate the problem to a jsFiddle (you can use this one as a base). You can use a local javascript array as a datasource substitution.
Thanks in advance,Petyo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!