Subramony Ramasubramanian
Top achievements
Rank 1
Rank 1
Subramony Ramasubramanian
asked on 17 Oct 2013, 02:58 PM
<!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
1 Answer, 1 is accepted
0
Hi Subramony,
The click event is not fired, because you are using kendo.bind() which is not supported in Kendo UI Mobile. You will need to use the data-model attribute configuration to point the view to the viewModel that you want to use please check this example:
http://jsbin.com/iHuQuyE/2/edit
Regards,
Kiril Nikolov
Telerik
The click event is not fired, because you are using kendo.bind() which is not supported in Kendo UI Mobile. You will need to use the data-model attribute configuration to point the view to the viewModel that you want to use please check this example:
http://jsbin.com/iHuQuyE/2/edit
Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!