ListView does not render template on query

[Eli]

I am using the HTML wrapper for the ListView in MVC.  I give the ListView a datasource to an Odata service.  I am using a template to display the items in the ListView.  When the page first loads and service returns the data the templates are rendered on the bind.   However, when I attempt to query the data source the template is not rendered.  The call to my OData service succeeds and data is returned as confirmed in the Developer Tools, and loading spinner is displayed over the control while the query is executing.

The idea here is that I will call the query on a button click so that I can apply filters.  

Thanks

 

Template:

<script type="text/x-kendo-tmpl" id="resultsViewTemplate">
    <div class="col-md-6">
        <div class="thumbnail">
            <h2>
                #:Name#
            </h2>
            <div class="result-item location">
                <h3>Location:</h3>
                <p>#:Floor#</p>
                <p>#:StreetAddress#</p>
                <p>#:City#, #:State# #:ZipCode#</p>
            </div>
            <div class="result-item restrictions">
                <h3>Restrictions:</h3>
                <p></p>
                <p></p>
            </div>
            <div class="result-item amenities">
                <h3>Amenities</h3>
            </div>
        </div>
    </div>
</script>

 

Query:

$("#update").on("click", function(e) {
    $("#resultsListView").data().kendoListView.dataSource.query();
});

 

Configuration of the ListView:

@(Html.Kendo().ListView<ResourceViewModel>()
    .TagName("div")
    .ClientTemplateId("resultsViewTemplate")
    .AutoBind(true)
    .DataSource( ds => ds
        .Custom()
        .Type("odata-v4")
        .Transport( tp => tp
            .Read( read => read
                .Url($"/api/vm/Resources/Models.GetAvailable")
            )
        )
        .PageSize(6)
        .ServerPaging(true)
        .ServerSorting(true)
    )
    .Name("resultsListView")
)

 

 

[Dimiter Topalov]

Hi Eli,

Please check out the DataSource API reference for explanation and sample usage of the query() method:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-query

All relevant dataSource configuration options like page, pageSize, sort, filter, etc., should be provided in as query() arguments, or the initial configuration will be lost.

You can also check out the following resources on server data-operations (grouping, aggregates, filtering, sorting, paging), and make sure that the remote data service is properly configured. Also note that mixing data operations modes is not supported, and will have undesired side effects.

I have prepared a simple example (with client-side operations) that illustrates the query() method properly filtering the ListView:

http://dojo.telerik.com/uKiKA

On a side note, if you just want to filter the dataSource, you can use the filter() method that does not have all side effects of the query() method:

http://dojo.telerik.com/uKiKA/2

The following how-to article from our documentation might also prove useful:

http://docs.telerik.com/kendo-ui/controls/data-management/listview/how-to/filtering-using-slider

I hope this helps, but if the issue persists, please send us a similar isolated runnable project (you can also use the Kendo UI Dojo) where it can be observed, so we can inspect what might be causing it, and provide a more to-the-point suggestion.

Regards,
Dimiter Topalov
Telerik by Progress