<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.mobile.min.js"></script>
<script>
var app = new kendo.mobile.Application($(document.body)); </script>
</head>
<body id="body">
<div data-role="layout" data-id="search-layout">
</div>
<div id="searchView" data-role="view" data-layout="search-layout">
<ul data-template="ul-template" data-bind="source: serviceTypeView">
</ul>
<script id="ul-template" type="text/x-kendo-template">
<li>
Name: <span data-bind="text:ProductName"></span><br/>
ID: <span data-bind="text: ProductID"></span><br/>
Click here : <a id="button1" data-click="GetDistinct">#=ProductName#</a><br/><hr/><br/>
</li>
</script>
</div>
<div data-role="layout" data-id="result-layout">
</div>
<div id="resultView" data-role="view" data-layout="result-layout">
<ul data-template="ul-template" data-bind="source: resultTypeView">
</ul>
<script id="res-template" type="text/x-kendo-template">
<li>
Name: <span data-bind="text:ProductName"></span>
ID: <span data-bind="text: ProductID"></span>
<a id="button1" data-click="GetDetail">#=ProductName#</a>
</li>
</script>
</div>
<script>
var serviceTypeDataSource;
var viewModelService;
$(window).load(function () {
serviceTypeDataSource = new kendo.data.DataSource({
transport: {
read: {
dataType: "jsonp",
url: "http://demos.kendoui.com/service/Products"
}
},
change: function () {
viewModelService = kendo.observable({
serviceTypeView: [],
serviceTypeValue: {},
serviceTypeDisplayValue: function () {
return kendo.stringify(this.get("serviceTypeValue"));
}
}); //end of viewModel
viewModelService.serviceTypeView = serviceTypeDataSource.view();
kendo.bind("#searchView", viewModelService);
}
}); //end of DataSource
serviceTypeDataSource.read();
});
var resultTypeDataSource;
var viewModelResult;
function GetDistinct(e) {
resultTypeDataSource = new kendo.data.DataSource({
transport: {
read: {
dataType: "jsonp",
url: "http://demos.kendoui.com/service/Products"
}
},
change: function () {
viewModelResult = kendo.observable({
resultTypeView: [],
resultTypeValue: {},
resultTypeDisplayValue: function () {
return kendo.stringify(this.get("resultTypeValue"));
}
}); //end of viewModel
viewModelResult.serviceTypeView = resultTypeDataSource.view();
kendo.bind("#resultView", viewModelResult);
}
}); //end of DataSource
resultTypeDataSource.read();
}
function GetDetail(e) {
alert("detail");
}
</script>
</body>
</html>
In my above example I am trying to achieve the following.
1) I am first rendering the list of products inside a template which is under "search-layout". During this time I am generating anchor tags.
2) On clicking these anchor tag I want to generate another list using the function "GetDistinct()" and show them inside another layout "result-layout".
I have 2 problems.
1) Dynamically generated anchor tags does not emit click event and call GetDistinct function
2)How do I show the result of GetDistinct function inside "result-layout"
I have my code in http://jsbin.com/ebuhOLU/1/edit
Please help
jsbin.com/ebuhOLU/1
Thanks
Subbu
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.mobile.min.js"></script>
<script>
var app = new kendo.mobile.Application($(document.body)); </script>
</head>
<body id="body">
<div data-role="layout" data-id="search-layout">
</div>
<div id="searchView" data-role="view" data-layout="search-layout">
<ul data-template="ul-template" data-bind="source: serviceTypeView">
</ul>
<script id="ul-template" type="text/x-kendo-template">
<li>
Name: <span data-bind="text:ProductName"></span><br/>
ID: <span data-bind="text: ProductID"></span><br/>
Click here : <a id="button1" data-click="GetDistinct">#=ProductName#</a><br/><hr/><br/>
</li>
</script>
</div>
<div data-role="layout" data-id="result-layout">
</div>
<div id="resultView" data-role="view" data-layout="result-layout">
<ul data-template="ul-template" data-bind="source: resultTypeView">
</ul>
<script id="res-template" type="text/x-kendo-template">
<li>
Name: <span data-bind="text:ProductName"></span>
ID: <span data-bind="text: ProductID"></span>
<a id="button1" data-click="GetDetail">#=ProductName#</a>
</li>
</script>
</div>
<script>
var serviceTypeDataSource;
var viewModelService;
$(window).load(function () {
serviceTypeDataSource = new kendo.data.DataSource({
transport: {
read: {
dataType: "jsonp",
url: "http://demos.kendoui.com/service/Products"
}
},
change: function () {
viewModelService = kendo.observable({
serviceTypeView: [],
serviceTypeValue: {},
serviceTypeDisplayValue: function () {
return kendo.stringify(this.get("serviceTypeValue"));
}
}); //end of viewModel
viewModelService.serviceTypeView = serviceTypeDataSource.view();
kendo.bind("#searchView", viewModelService);
}
}); //end of DataSource
serviceTypeDataSource.read();
});
var resultTypeDataSource;
var viewModelResult;
function GetDistinct(e) {
resultTypeDataSource = new kendo.data.DataSource({
transport: {
read: {
dataType: "jsonp",
url: "http://demos.kendoui.com/service/Products"
}
},
change: function () {
viewModelResult = kendo.observable({
resultTypeView: [],
resultTypeValue: {},
resultTypeDisplayValue: function () {
return kendo.stringify(this.get("resultTypeValue"));
}
}); //end of viewModel
viewModelResult.serviceTypeView = resultTypeDataSource.view();
kendo.bind("#resultView", viewModelResult);
}
}); //end of DataSource
resultTypeDataSource.read();
}
function GetDetail(e) {
alert("detail");
}
</script>
</body>
</html>
In my above example I am trying to achieve the following.
1) I am first rendering the list of products inside a template which is under "search-layout". During this time I am generating anchor tags.
2) On clicking these anchor tag I want to generate another list using the function "GetDistinct()" and show them inside another layout "result-layout".
I have 2 problems.
1) Dynamically generated anchor tags does not emit click event and call GetDistinct function
2)How do I show the result of GetDistinct function inside "result-layout"
I have my code in http://jsbin.com/ebuhOLU/1/edit
Please help
jsbin.com/ebuhOLU/1
Thanks
Subbu