This is a migrated thread and some comments may be shown as answers.

Basic Question.

6 Answers 100 Views

ListView (Mobile)

This is a migrated thread and some comments may be shown as answers.

Jun asked on 14 Mar 2014, 03:16 AM

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>    



    <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>



<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>
</body>
</html>

6 Answers, 1 is accepted

Accepted

answered on 18 Mar 2014, 08:29 AM

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.

http://demos.telerik.com/kendo-ui/mobile/listview/filtering.html

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.