Code in Service class
public class mobileAppWebService : System.Web.Services.WebService
{
public mobileAppWebService()
{
}
SqlConnection con = new SqlConnection("Data Source=SHANKAR-PC\\SQLEXPRESS;Initial Catalog=Occumen;Integrated Security=True");
[WebMethod]
public List<EmpName> GetData()
{
SqlDataAdapter da = new SqlDataAdapter("select ename from emp", con);
DataSet ds = new DataSet();
da.Fill(ds, "emp");
return LstEmpNames(ds);
}
public List<EmpName> LstEmpNames(DataSet ds)
{
List<EmpName> objenamelst = new List<EmpName>();
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
EmpName objemp = new EmpName();
objemp.ename = ds.Tables[0].Rows[i][0].ToString();
objenamelst.Add(objemp);
}
return objenamelst;
}
}
Code in .htm page
<head>
<title>List View DataBinding</title>
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/kendo.mobile.min.js" type="text/javascript"></script>
<script src="content/shared/js/console.js" type="text/javascript"></script>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div data-role="view" id="flat" data-layout="databinding" data-init="mobileListViewDataBindInitFlat"
data-title="ListViewForContacts">
<ul id="flat-listview">
</ul>
</div>
<div data-role="view" id="grouped" data-init="mobileListViewDataBindInitGrouped"
data-transition="" data-title="ListViewForGroupedContacts" data-layout="databinding">
<ul id="grouped-listview">
</ul>
</div>
<div data-role="layout" data-id="databinding">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#flat" data-icon="stop">Flat </a><a href="#grouped" data-icon="organize">Grouped</a>
</div>
</div>
</div>
<script type="text/x-kendo-template" id="ListViewTemplate">
<div class="DetData">
${ename}
</div>
</script>
<script type="text/javascript">
function mobileListViewDataBindInitFlat() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "mobileAppWebService.asmx/GetData",
endlessScroll: true,
dataType: "json",
success: function (data) {
$("#flat-listview").kendoMobileListView({
dataSource: data.d,
template: $("#ListViewTemplate").html()
});
},
failure: function (msg) {
alert(msg);
}
});
}
var app = new kendo.mobile.Application(document.body);
</script>
</body>
public class mobileAppWebService : System.Web.Services.WebService
{
public mobileAppWebService()
{
}
SqlConnection con = new SqlConnection("Data Source=SHANKAR-PC\\SQLEXPRESS;Initial Catalog=Occumen;Integrated Security=True");
[WebMethod]
public List<EmpName> GetData()
{
SqlDataAdapter da = new SqlDataAdapter("select ename from emp", con);
DataSet ds = new DataSet();
da.Fill(ds, "emp");
return LstEmpNames(ds);
}
public List<EmpName> LstEmpNames(DataSet ds)
{
List<EmpName> objenamelst = new List<EmpName>();
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
EmpName objemp = new EmpName();
objemp.ename = ds.Tables[0].Rows[i][0].ToString();
objenamelst.Add(objemp);
}
return objenamelst;
}
}
Code in .htm page
<head>
<title>List View DataBinding</title>
<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/kendo.mobile.min.js" type="text/javascript"></script>
<script src="content/shared/js/console.js" type="text/javascript"></script>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div data-role="view" id="flat" data-layout="databinding" data-init="mobileListViewDataBindInitFlat"
data-title="ListViewForContacts">
<ul id="flat-listview">
</ul>
</div>
<div data-role="view" id="grouped" data-init="mobileListViewDataBindInitGrouped"
data-transition="" data-title="ListViewForGroupedContacts" data-layout="databinding">
<ul id="grouped-listview">
</ul>
</div>
<div data-role="layout" data-id="databinding">
<header data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</header>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#flat" data-icon="stop">Flat </a><a href="#grouped" data-icon="organize">Grouped</a>
</div>
</div>
</div>
<script type="text/x-kendo-template" id="ListViewTemplate">
<div class="DetData">
${ename}
</div>
</script>
<script type="text/javascript">
function mobileListViewDataBindInitFlat() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "mobileAppWebService.asmx/GetData",
endlessScroll: true,
dataType: "json",
success: function (data) {
$("#flat-listview").kendoMobileListView({
dataSource: data.d,
template: $("#ListViewTemplate").html()
});
},
failure: function (msg) {
alert(msg);
}
});
}
var app = new kendo.mobile.Application(document.body);
</script>
</body>
No comments:
Post a Comment