Incorrect total and no paging on Kendo MVC ListView

[Duncan]

I'm having a problem getting an MVC ListView to initially load via the model and then page using Ajax. I've configured a grid to do this without issues but the ListView datasource doesn't seem to support Ajax, although the documentation suggests it does?

https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/listview/binding

I initiate the list with 10 records and then specify the total amount of records in the datasource. I then expect to see 10 records on the first page and to have the ability to click on the other pages. When I click on a page an Ajax call should be made to retrieve the relevant records. However all I see is the 10 records from the model and no paging. 

Here is my ListView:

   @(Html.Kendo().ListView<Feed>(Model)
        .Name("FeedList")
        .TagName("ul")     
        //.BindTo(Model)
        .ClientTemplateId("feed-detail-list-template")
        .DataSource(
            source => source                     
                //.Ajax() I get an error that there is no definition for Ajax if I uncomment this
                .ServerOperation(false)
                .Model(model => model.Id(p => p))
                .Read(
                    read =>
                    {
                        read.Action(action, controller, new { id = parentId });
                    }
                )                
                .PageSize(10)
                .Total(totalRecords) // appears to be ignore
                .Events(events => events
                    .Error("onDataSourceError")
                )
        )
        .Pageable()
    )
 

Any help appreciated.

[Anton Mironov]

Hello Duncan,

Thank you for the code snippet and details provided.

I confirm that you are totally correct - there is a mistake in the pointed article. The MVC ListView is not using Ajax binding. Thank you for pointing this one to our attention. 

In order to represent the correct data binding for Kendo UI ListView for MVC, I created a sample project. It could be found attached to this response.

Make the needed tests locally, observe the implementation and behavior, and if further assistance is needed, do not hesitate to contact me and the team.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Duncan]

Hi Anton,

Thanks for the code sample, unfortunately it doesn't do what I'm trying to achieve. It sends a request for the data from the client side initially which is what I'm hoping to avoid. Is the following possible?

- Populate the view model on the server side with the required data (e.g. 10 out of 1000 records)
- When the page loads bind that model to the ListView with 10 records and paging for the further 990
- A request is made for 10 records at a time when you page through the ListView

At the moment I'm either having to load the entire dataset into the model initially or request the initial data from the client side. Using the grid I can load the model first and then make requests when paging so I'm hoping to set this up the same way.

[Anton Mironov]

Hi Duncan,

In order to achieve the desired behavior, I would recommend using a Custom Server Binding. Here is a demo with Kendo UI Grid for a similar scenario:

https://demos.telerik.com/aspnet-mvc/grid/customserverbinding

The "OrderCustomBindingExtensions" method in the Controller View is the needed one.

I hope this information helps.

Best Regards,
Anton Mironov