This is a migrated thread and some comments may be shown as answers.

Programatically Set PageSize

5 Answers 82 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Tomasz
Top achievements
Rank 1
Tomasz asked on 09 Apr 2018, 05:38 PM

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?

5 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 11 Apr 2018, 12:16 PM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tomasz
Top achievements
Rank 1
answered on 11 Apr 2018, 01:36 PM

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();
        }
    }
}
0
Viktor Tachev
Telerik team
answered on 13 Apr 2018, 08:43 AM
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:


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

Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Tomasz
Top achievements
Rank 1
answered on 13 Apr 2018, 01:47 PM

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));
}

 

0
Viktor Tachev
Telerik team
answered on 17 Apr 2018, 08:14 AM
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.


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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ListView
Asked by
Tomasz
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Tomasz
Top achievements
Rank 1
Share this question
or