index.cshtml
@(Html.Kendo().MobileView()
.Title("Scroll down to load")
.Content(obj =>
Html.Kendo().MobileListView<Tree.Models.TreeDBModel>()
.Name("endless-scrolling")
.TemplateId("template")
.EndlessScroll(true)
.ScrollTreshold(30)
.Filterable(filter =>
filter.Field("Name")
.Operator("startswith")
)
.DataSource(ds =>
{
ds.Read(read =>
{
read.Action("TReeList_Read", "TreeDB");
}); })))
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<h3>#:Name#</h3>
</div>
</script>
Controller(public class TreeDBController : Controller)
public ActionResult TReeList_Read([DataSourceRequest] DataSourceRequest request)
{
IQueryable<TreeDBModel> query = from c in db.TreeList
select new TreeDBModel
{
ID = c.GeoId,
Name = c.Name,
Unit = c.Unit,
GeoID = c.GeoId,
Price = c.Price,
MaxPrice = c.MaxPrice,
qty = c.Qty,
CompanyName = c.Geo.CompanyName,
Phone = c.Geo.Phone
}; return Json(query.ToDataSourceResult(request)); }
output.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title> - test </title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/> <script src="/Scripts/modernizr-2.6.2.js"></script> <!--This bundle was moved by the Telerik VS Extensions for compatibility reasons-->
<!--This CSS entry was added by the Telerik VS Extensions for compatibility reasons-->
<link href="/Content/kendo.compatibility.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.bootstrap.min.css" />
<script src="http://cdn.kendostatic.com/2013.3.1324/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.aspnetmvc.min.js"></script>
<script src="/Scripts/kendo.modernizr.custom.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="float-left">
<p class="Menu"></p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li><a href="/Account/Register" id="registerLink">register</a></li>
<li><a href="/Account/Login" id="loginLink">login</a></li>
</ul>
</section>
<nav>
<ul id="menu">
<li><a href="/">geo</a></li>
<li><a href="/TreeDB">search</a></li>
<li><a href="/Home">about</a></li> </ul>
</nav>
</div>
</div>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<div data-reload="false" data-role="view" data-stretch="false" data-title="Scroll down to load" data-use-native-scrolling="false" data-zoom="false"><div data-role="content"><ul data-endless-scroll="true" data-filterable="{"autoFilter":true,"field":"Name","ignoreCase":false,"operator":"startswith"}" data-role="listview" data-scroll-treshold="30px" data-source="{"transport":{"prefix":"","read":{"url":"/TreeDB/TReeList_Read"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"ID":{"type":"number"},"Name":{"type":"string"},"Unit":{"type":"string"},"qty":{"type":"number"},"Price":{"type":"number"},"MaxPrice":{"type":"number"},"GeoID":{"type":"number"},"CompanyName":{"type":"string"},"Phone":{"type":"string"}}}}}" data-template="template" id="endless-scrolling"></ul></div></div>
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<h3>#:Name#</h3>
</div>
</script> </section>
</div> <footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2014</p>
</div>
</div>
</footer>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"InternetExplorer","requestId":"55ca8e2b6c0349f29d26a3b9859d41d5"}
</script>
<script type="text/javascript" src="http://localhost:9308/1da8a992d4e74d81818c2cf92074605d/browserLink" async="async"></script>
<!-- End Browser Link --></body>
</html>
@(Html.Kendo().MobileView()
.Title("Scroll down to load")
.Content(obj =>
Html.Kendo().MobileListView<Tree.Models.TreeDBModel>()
.Name("endless-scrolling")
.TemplateId("template")
.EndlessScroll(true)
.ScrollTreshold(30)
.Filterable(filter =>
filter.Field("Name")
.Operator("startswith")
)
.DataSource(ds =>
{
ds.Read(read =>
{
read.Action("TReeList_Read", "TreeDB");
}); })))
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<h3>#:Name#</h3>
</div>
</script>
Controller(public class TreeDBController : Controller)
public ActionResult TReeList_Read([DataSourceRequest] DataSourceRequest request)
{
IQueryable<TreeDBModel> query = from c in db.TreeList
select new TreeDBModel
{
ID = c.GeoId,
Name = c.Name,
Unit = c.Unit,
GeoID = c.GeoId,
Price = c.Price,
MaxPrice = c.MaxPrice,
qty = c.Qty,
CompanyName = c.Geo.CompanyName,
Phone = c.Geo.Phone
}; return Json(query.ToDataSourceResult(request)); }
output.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title> - test </title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/> <script src="/Scripts/modernizr-2.6.2.js"></script> <!--This bundle was moved by the Telerik VS Extensions for compatibility reasons-->
<!--This CSS entry was added by the Telerik VS Extensions for compatibility reasons-->
<link href="/Content/kendo.compatibility.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.bootstrap.min.css" />
<script src="http://cdn.kendostatic.com/2013.3.1324/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.aspnetmvc.min.js"></script>
<script src="/Scripts/kendo.modernizr.custom.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="float-left">
<p class="Menu"></p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li><a href="/Account/Register" id="registerLink">register</a></li>
<li><a href="/Account/Login" id="loginLink">login</a></li>
</ul>
</section>
<nav>
<ul id="menu">
<li><a href="/">geo</a></li>
<li><a href="/TreeDB">search</a></li>
<li><a href="/Home">about</a></li> </ul>
</nav>
</div>
</div>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<div data-reload="false" data-role="view" data-stretch="false" data-title="Scroll down to load" data-use-native-scrolling="false" data-zoom="false"><div data-role="content"><ul data-endless-scroll="true" data-filterable="{"autoFilter":true,"field":"Name","ignoreCase":false,"operator":"startswith"}" data-role="listview" data-scroll-treshold="30px" data-source="{"transport":{"prefix":"","read":{"url":"/TreeDB/TReeList_Read"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"type":"aspnetmvc-ajax","filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"ID":{"type":"number"},"Name":{"type":"string"},"Unit":{"type":"string"},"qty":{"type":"number"},"Price":{"type":"number"},"MaxPrice":{"type":"number"},"GeoID":{"type":"number"},"CompanyName":{"type":"string"},"Phone":{"type":"string"}}}}}" data-template="template" id="endless-scrolling"></ul></div></div>
<script type="text/x-kendo-tmpl" id="template">
<div class="product">
<h3>#:Name#</h3>
</div>
</script> </section>
</div> <footer>
<div class="content-wrapper">
<div class="float-left">
<p>© 2014</p>
</div>
</div>
</footer>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"InternetExplorer","requestId":"55ca8e2b6c0349f29d26a3b9859d41d5"}
</script>
<script type="text/javascript" src="http://localhost:9308/1da8a992d4e74d81818c2cf92074605d/browserLink" async="async"></script>
<!-- End Browser Link --></body>
</html>
6 Answers, 1 is accepted
0
Hi Jun,
Your message contains only code. Could you please clarify what the question is so we can start working on your case?
Thank you in advance.
Regards,
Alexander Valchev
Telerik
Your message contains only code. Could you please clarify what the question is so we can start working on your case?
Thank you in advance.
Regards,
Alexander Valchev
Telerik
DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.
0
Jun
Top achievements
Rank 1
Rank 1
answered on 14 Mar 2014, 11:13 AM
As you see what I posted html,I can't get any responses from server.
Please, give me MVC list view examples. Thank you.
0
Jun
Top achievements
Rank 1
Rank 1
answered on 14 Mar 2014, 11:18 AM
Output.html
you. Can see Quotquotquotquot
0
Accepted
Hi Jun,
The " signs in the output are expected - they represent encoded quotation marks and are used to render the widget's configuration settings as data attributes.
You can find working examples that demonstrate ListView with filtering bound to remote dataSource in the UI for MVC examples project which is available as part of the distribution. In addition you can check the code directly in the on-line examples here.
Regards,
Alexander Valchev
Telerik
The " signs in the output are expected - they represent encoded quotation marks and are used to render the widget's configuration settings as data attributes.
You can find working examples that demonstrate ListView with filtering bound to remote dataSource in the UI for MVC examples project which is available as part of the distribution. In addition you can check the code directly in the on-line examples here.
Regards,
Alexander Valchev
Telerik
DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.
0
Jun
Top achievements
Rank 1
Rank 1
answered on 18 Mar 2014, 12:49 PM
I read the Url related to this problem. m. Mvc configuration is working well now. My problem is that mobile listview don't render datas but, web grid and web listview is working well. please,give me a simple mobile listview project with json and server binding project
0
Jun
Top achievements
Rank 1
Rank 1
answered on 19 Mar 2014, 12:43 AM
Thanks for you.