Programatically Set PageSize

[Tomasz]

Hello, I am trying to set the pagesize of my listview on the client side and I am unable to figure out how to do it. I bound the databound event to a javascript function and I am trying to set the pageSize using "listview.dataSource.pageSize(5)"  but when I call this function once it keeps getting called over and over in a  loop until the stack runs out of room. It does set the pagesize but it shouldn't keep getting called. What am I doing wrong?

[Viktor Tachev]

Hello Tomasz,

Changing options of a component in its dataBound event is not recommended as this will cause an endless loop. When the page size is changed the component will be rebound and in turn dataBound will be triggered. This would cause an endless loop.

If you would like to change the page size of a ListView after it is initialized I would suggest using the document.ready() event. Move the line changing the page size there and let me know how it works for you.

Regards,
Viktor Tachev
Progress Telerik

[Tomasz]

Setting it in the document.ready() event does not work because the listview is not rendered when that event triggers. This is the code I ended up with. It looks like it only looks a few times and stops.

 

function onDataBound(e) {
    var viewwidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
   var newPageSize = Math.floor(viewwidth/160);
    var listview = $("#listView").data("kendoListView");
    if (listview !== undefined) {
        if (listview.dataSource._pageSize !== newPageSize) {
            listview.dataSource.pageSize(newPageSize);
            listview.refresh();
        }
    }
}

[Viktor Tachev]

Hi Tomasz,

The document.ready() event is fired after all elements are loaded on the page. Thus, the ListView itself should be available at that point. However, if the ListView is bound to remote data the items may load later if the request takes more time. 

In case this is the scenario I would suggest setting the ListView autoBind property to false. This would prevent the dataSource from requesting the data automatically. Then, calculate the page size and call dataSource.read() to request the items from the server.

The dojo example below illustrates the approach:

• https://dojo.telerik.com/AfoYomIx

Give it a try and let me know how it works for you.

Regards,
Viktor Tachev
Progress Telerik

[Tomasz]

I tried doing as you suggested and it doesn't work. When I try to grab the listview in the document.ready function it still comes up as undefined and the data doesn't get rendered properly in the listview. Here are some more code snippets, maybe I'm doing something wrong.

@(Html.Kendo().ListView<ApplicationModel>()

    .Name("listView")

    .TagName("div")

    .ClientTemplateId("template")

    .AutoBind(false)

    .DataSource(dataSource=>dataSource.PageSize(30).Read(read => read.Action("GetApplications", "Home"))).Pageable()

)

$(document).ready(function () {
    formatListView();
});

function formatListView() {
    var viewwidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var newPageSize = Math.floor(viewwidth / 170);
    var listview = $("#listView").data("kendoListView");
    if (listview !== undefined) {
        if (listview.dataSource._pageSize !== newPageSize) {
            listview.dataSource.pageSize(newPageSize);
            listview.dataSource.read();
            listview.refresh();
        }
    }
}

$(window).resize(function () {
    formatListView();
});

 

public ActionResult GetApplications([DataSourceRequest] DataSourceRequest request)
{
    ApplicationRepository myRepository = new ApplicationRepository();
    List<ApplicationModel> myApplications = myRepository.GetApplications(User.Identity.Name.Split('\\')[1]);
    return Json(new[] { myApplications }.AsQueryable().ToDataSourceResult(request));
}

 

[Viktor Tachev]

Hi Tomasz,

It seems strange that the ListView component is not available in the document.ready event. I tried to replicate the behavior in one of our online examples, however, I was not able to. Please check out the short video below that shows the behavior I am observing and let me know if I am missing something.

• https://www.screencast.com/t/d3EKwMg9E11

It would be great if you can assemble a runnable project where the issue is replicated and send it to us. This will enable us to examine the behavior locally and look for its cause.


Regards,
Viktor Tachev
Progress Telerik