Telerik Forums
UI for ASP.NET MVC Forum
5 answers
133 views

Anyone know why when I remove an item from my datasource it removes it from my database, but not my Mobile List View? Below is basically what I'm doing:

            model = dataSource.getByUid($(e.touch.target).attr("data-uid"));
            dataSource.remove(model);
            dataSource.sync();

 

I got this from the mobilelistview sample app and it works correctly, just not with my modified mobile list view. Could it be because of a filter I have or my type of model or something? Here is the Mobile list view control section:

Html.Kendo().MobileListView<eAgentWeb.Models.CallLogModel>()
                    .Name("MainListView")
                    .TemplateId("itemTemplate")
                    .PullToRefresh(true)
                    .EndlessScroll(true)
                    .DataSource(dataSource => dataSource
                        .Sort(sort => sort.Add("DateModified").Descending())
                        .Filter(filters => { filters.Add(calllog => calllog.IsArchive).IsEqualTo(false); })
                        .Read(read => read.Action("GetCallLogData", "CallLog"))
                        .Destroy("callLog_Destroy", "CallLog")
                        .PageSize(30)
                        .Events(events => events.RequestEnd("listViewRequestEnd"))
                        .Model(model => model.Id(c => c.CallLogID))
                    )
                )
)

 

Any help would be greatly appreciated!

Atanas Korchev
Telerik team
 answered on 23 Nov 2015
1 answer
289 views
In Listview,I used Data method to passing additional parameters : 

.Read(read => read.Action("Products_Read", "ListView").Data("additionalInfo"))

But Mobile Listview not exist  Data menthod like Listview.
Please can you show my how to pass addtional parameter in Mobile Listview(MVC) for Read operation and how to handle it in corresponding Controller?
Boyan Dimitrov
Telerik team
 answered on 27 May 2015
3 answers
187 views

Hi,

 I'm trying to use a MobileListView in my project with this code:

 

<div class="row">
    <div class="col-xs-12">
        @(Html.Kendo().MobileView()
       .Title("Chiamate")
       .Header(obj =>
            Html.Kendo().MobileNavBar()
                .Name("ChiamateNavbar")
                .Content(navbar =>
                    @<text>
                        @navbar.ViewTitle("Chiamate")
                    </text>)
        )
       .Content(
    @<text>
        @(Html.Kendo().MobileListView<Telesan.CloudLift.WebApplication.Models.Chiamate.ChiamataListViewModel>()
                    .Name("ChiamateListView")
                    .TemplateId("ChiamateTemplate")
                    .PullToRefresh(true)
                    .EndlessScroll(true)
                    .DataSource(dataSource =>
                        dataSource
                            .Read(r => r.Action("ChiamateAjaxList", "Chiamate").Data("onData").Type(HttpVerbs.Post))
                            .ServerOperation(true)
                            .Filter(t =>
                        {
                            t.Add(m => m.DataOra).IsGreaterThanOrEqualTo(DateTime.Today.AddDays(-3));
                            t.Add(m => m.IDStato).IsNotEqualTo((Guid)ViewBag.StatoChiuso).And().IsNotEqualTo((Guid)ViewBag.StatoElaborato);
                        })
                        .Sort(s => s.Add(m => m.DataOra).Descending())
                            .PageSize(50)
                    )
        )
 
    </text>)
        )
    </div>
</div>

But it doesn't render to my page so after a search I've found a possible solution by adding this in _L:

@(Html.Kendo().MobileApplication()
        .ServerNavigation(true)
    )
I can see some differences now, the page style has changed but the listview is not yet appeared.

Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.
But I didn't find a solution for this problem with ASP.NET MVC Wrappers.

This is the _Layout block where @RenderBody is:

<div class="cloudlift-container">
        <div class="row">
            <div class="col-xs-12 main-content">
                @RenderBody()
            </div>
        </div>
    </div>
 
    @(Html.Kendo().MobileApplication()
        .ServerNavigation(true)
    )
I don't know how to tell to MobileApplication helper to find the div inside my structure as seen in examples found about KendoUI Professional.

Can somebody help?

Kiril Nikolov
Telerik team
 answered on 14 May 2015
2 answers
124 views
Hi guys,
Another seemly simple task but oh so time consuming... What I try to achieve here:
- create a list view where users can add items to. Only after hitting a button it will be saved to the database
- the list items should be created with a separate form (several input forms and select boxes, all with data sources)
- after filling in the list item and clicking on the Add button it should be appended to the list view items.

My challenge here is that I do not know how to accomplish this with the edit templates. They all seems to rely on some server call, which I do not want to use. I want to keep this on the client, and after all list items are filled in, then do a call to the server.

Without doubt simple, but I'm stuck here. Any hints?

Regards,
Ruud
Ruud
Top achievements
Rank 1
 answered on 05 Mar 2015
2 answers
453 views
Hi,
What is the best approach to create a mechanic to show an "No results found" template for a mobile list view? Of course, I could use client side script for this, but I'm just wondering if there is another, more generic way of doing this..
Ruud
Top achievements
Rank 1
 answered on 05 Mar 2015
2 answers
64 views
Hi, I am trying to implement a Mobile example using Kendo UI ASP.NET MVC using Visual Studio 2013 Express for Web. 
http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/mobilelistview/overview

I've done this:
- Reference to kendo dll: C:\MovilLab\Kendo2014.2.1008\Kendo.Mvc.dll  (v 2014.2.1008.340)
- Add in the web.config of the view in Namespace tag: <add namespace="Kendo.Mvc.UI" />

Index.chtml

@using MovilLab;
@using MovilLab.Controllers;

<!DOCTYPE html>
<html>
<head>
    <title></title>
    @Html.Partial("~/Views/Comunes/HeaderCssJs.cshtml")
</head>
<body>
    @(Html.Kendo().MobileView()
        .Name("grouped")
        .Title("ListView")
        .Content(obj =>
            Html.Kendo().MobileListView()
                .Name("grouped-listview")
                .TemplateId("template") //configure the item template
                .FixedHeaders(true)

                .DataSource(dataSource => dataSource
                            .Read(read => read.Action("Read", "Home"))
                            .Group(group => group.Add("Letter", typeof(string)))
               )
        )
    )

    @(Html.Kendo().MobileApplication()
    .ServerNavigation(true)
    )

</body>
</html>


HeaderCssJs.cshtml   (is a PartialView)

<link href="~/Content/kendo/2014.2.1008/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.1008/kendo.default.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.1008/kendo.dataviz.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.1008/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="~/Content/kendo/2014.2.1008/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/kendo/2014.2.1008/angular.min.js"></script>
<script src="~/Scripts/kendo/2014.2.1008/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2014.2.1008/kendo.aspnetmvc.min.js"></script>


HomeController.cs  (I have 2 actions):

public ActionResult Index()
{
       return View();
}

[AcceptVerbs(HttpVerbs.Post)]
        public ActionResult Read([DataSourceRequest] DataSourceRequest request)
        {
            var products = new[] {
            new { Name = "Sashimi salad", Letter = "S" },
            new { Name = "Chirashi sushi", Letter = "C" },
            new { Name = "Seaweed salad", Letter = "S" },
            new { Name = "Edamame", Letter = "E" },
            new { Name = "Miso soup", Letter = "M" },
            new { Name = "Maguro", Letter = "M" },
            new { Name = "Shake", Letter = "S" },
            new { Name = "Shiromi", Letter = "S" },
            new { Name = "Tekka maki", Letter = "T" },
            new { Name = "Hosomaki Mix", Letter = "H" },
            new { Name = "California rolls", Letter = "C" },
            new { Name = "Seattle rolls", Letter = "S" },
            new { Name = "Spicy Tuna rolls", Letter = "S" },
            new { Name = "Ebi rolls", Letter = "E" },
            new { Name = "Chicken Teriyaki", Letter = "C" },
            new { Name = "Salmon Teriyaki", Letter = "S" },
            new { Name = "Gohan", Letter = "G" },
            new { Name = "Tori Katsu", Letter = "T" },
            new { Name = "Yaki Udon", Letter = "Y" }
            };

            //return the data as JSON
            return Json(products.ToDataSourceResult(request));
        }

I compile and run, but my problem is that the Browser appear in blank! And I put a BreakPoint in Read Action in HomeController and not enter there!
When I check using F12 in Chrome Response Tab appear an error in data-source attribute. Any help??:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="/Content/kendo/2014.2.1008/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo/2014.2.1008/kendo.default.min.css" rel="stylesheet" />
<link href="/Content/kendo/2014.2.1008/kendo.dataviz.min.css" rel="stylesheet" />
<link href="/Content/kendo/2014.2.1008/kendo.dataviz.default.min.css" rel="stylesheet" />
<link href="/Content/kendo/2014.2.1008/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/kendo/2014.2.1008/angular.min.js"></script>
<script src="/Scripts/kendo/2014.2.1008/kendo.all.min.js"></script>
<script src="/Scripts/kendo/2014.2.1008/kendo.aspnetmvc.min.js"></script>

</head>
<body>
    <div data-reload="false" data-role="view" data-stretch="false" data-title="ListView" data-use-native-scrolling="false" data-zoom="false" id="grouped"><div data-role="content"><ul data-fixed-headers="true" data-role="listview" data-source="{&quot;type&quot;:(function(){if(kendo.data.transports[&#39;aspnetmvc-ajax&#39;]){return &#39;aspnetmvc-ajax&#39;;} else{throw new Error(&#39;The kendo.aspnetmvc.min.js script is not included.&#39;);}})(),&quot;transport&quot;:{&quot;read&quot;:{&quot;url&quot;:&quot;/Home/Read&quot;},&quot;prefix&quot;:&quot;&quot;},&quot;serverPaging&quot;:true,&quot;serverSorting&quot;:true,&quot;serverFiltering&quot;:true,&quot;serverGrouping&quot;:true,&quot;serverAggregates&quot;:true,&quot;group&quot;:[{&quot;field&quot;:&quot;Letter&quot;,&quot;dir&quot;:&quot;asc&quot;}],&quot;filter&quot;:[],&quot;schema&quot;:{&quot;data&quot;:&quot;Data&quot;,&quot;total&quot;:&quot;Total&quot;,&quot;errors&quot;:&quot;Errors&quot;,&quot;model&quot;:{}}}" data-template="template" id="grouped-listview"></ul></div></div>

    <script>
jQuery(function(){ new kendo.mobile.Application(jQuery(document.body), {"hideAddressBar":true,"updateDocumentTitle":true,"serverNavigation":true}); });
</script>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"50645a161c474181843daf7db7ac40ef"}
</script>
<script type="text/javascript" src="http://localhost:49837/5a71b082460e41bebf77ca5ae81229a0/browserLink" async="async"></script>
<!-- End Browser Link -->
</body>
</html>







TISAL
Top achievements
Rank 1
 answered on 25 Nov 2014
1 answer
45 views
I'm trying to perform editing like in the example :
http://demos.telerik.com/aspnet-mvc/mobile-listview/editing

I have an error on .Events(events => events.Init("listViewInit"))

Error 2 'Kendo.Mvc.UI.Fluent.MobileListViewEventBuilder' does not contain a definition for 'Init' and no extension method 'Init' accepting a first argument of type 'Kendo.Mvc.UI.Fluent.MobileListViewEventBuilder' could be found (are you missing a using directive or an assembly

Thank you
Eric
Top achievements
Rank 1
 answered on 16 Oct 2014
3 answers
75 views
Hi guys, 
I don't know if I'm in the right section because my question is actually on datapager...but anyway..

I'd like to know if there any way to customize the appearance of the pager using mvc...
I remeber that in "normal" use I was able to set if to show pages number or just control or something like that..
I have the pager you see in the attached print, and I'd like to fix it so that it is rendered in just one line. (maybe removing page numbers, or showing just 5 instead of 10).

note that page size is set to 10 and has to remain like this.
Thanks
Fabio
Dimiter Madjarov
Telerik team
 answered on 06 May 2014
10 answers
253 views
http://demos.telerik.com/kendo-ui/mobile/listview/press-to-load-more.html   : listview loadmore

1.Setting
loadmore(false) . pagesize(20)

***Result is exact match.

2. setting
loadmore(true) . pagesize(20)

***Result is not match.

please See VideoFile

Sorry, I am not good at english.

It's hard to learng KendoMobileMVC. 


file link :

http://blogattach.naver.com/fe6be257407574c4e5096e5c6082f986237580c0/20140320_191_blogfile/bak4500_1395299727774_rYMlbD_zip/erroravi.zip




Petyo
Telerik team
 answered on 28 Mar 2014
6 answers
81 views
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="{&quot;autoFilter&quot;:true,&quot;field&quot;:&quot;Name&quot;,&quot;ignoreCase&quot;:false,&quot;operator&quot;:&quot;startswith&quot;}" data-role="listview" data-scroll-treshold="30px" data-source="{&quot;transport&quot;:{&quot;prefix&quot;:&quot;&quot;,&quot;read&quot;:{&quot;url&quot;:&quot;/TreeDB/TReeList_Read&quot;}},&quot;serverPaging&quot;:true,&quot;serverSorting&quot;:true,&quot;serverFiltering&quot;:true,&quot;serverGrouping&quot;:true,&quot;serverAggregates&quot;:true,&quot;type&quot;:&quot;aspnetmvc-ajax&quot;,&quot;filter&quot;:[],&quot;schema&quot;:{&quot;data&quot;:&quot;Data&quot;,&quot;total&quot;:&quot;Total&quot;,&quot;errors&quot;:&quot;Errors&quot;,&quot;model&quot;:{&quot;fields&quot;:{&quot;ID&quot;:{&quot;type&quot;:&quot;number&quot;},&quot;Name&quot;:{&quot;type&quot;:&quot;string&quot;},&quot;Unit&quot;:{&quot;type&quot;:&quot;string&quot;},&quot;qty&quot;:{&quot;type&quot;:&quot;number&quot;},&quot;Price&quot;:{&quot;type&quot;:&quot;number&quot;},&quot;MaxPrice&quot;:{&quot;type&quot;:&quot;number&quot;},&quot;GeoID&quot;:{&quot;type&quot;:&quot;number&quot;},&quot;CompanyName&quot;:{&quot;type&quot;:&quot;string&quot;},&quot;Phone&quot;:{&quot;type&quot;:&quot;string&quot;}}}}}" 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>&copy; 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>





Jun
Top achievements
Rank 1
 answered on 19 Mar 2014
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?