ListView does not render template on query

2 posts, 0 answers
  1. Eli
    Eli avatar
    1 posts
    Member since:
    Dec 2014

    Posted 07 Sep Link to this post

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

     

     

  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 10 Sep Link to this post

    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
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Kendo UI is VS 2017 Ready
Back to Top