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

ListView not rendering

3 Answers 191 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Marco
Top achievements
Rank 1
Marco asked on 07 May 2015, 08:29 AM

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?

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 08 May 2015, 08:09 AM

Hello Marco,

 

Your configuration seems correct and the problem is not caused by the missing serverNavigation() property, it is actually unrelated and it should not be used unless you want to implement your own routing, so I would suggest you removing it from your configuration.

Would it be possible to send us the sample, so we can take a look and locally and see what happens?

 

 

Regards,
Kiril Nikolov
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Marco
Top achievements
Rank 1
answered on 13 May 2015, 09:15 AM

Hi,

This is an example project that has the same html tree as our main application. It has the same issue as expected. Hope it helps.

If some files are missing I'll send you asap.

I removed all kendo js/css/lib from project because of attachment size limit, the version we are using is: 2015.1.429

Thanks.

Marco

0
Kiril Nikolov
Telerik team
answered on 14 May 2015, 02:22 PM

Hello Marco,

The problem is that you need to have just the HTML for the view and the underlying component on your page. The reason is that when the kendo.mobile.application() is initialzed, it looks for the first element with the data-role='view' attribute. Please see the attached sample for more details.

Regards,
Kiril Nikolov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
ListView (Mobile)
Asked by
Marco
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Marco
Top achievements
Rank 1
Share this question
or