ListView not rendering

[Marco]

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]

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

 

 

[Marco]

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

[Kiril Nikolov]

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