Programatically Set PageSize

6 posts, 0 answers
  1. Tomasz
    Tomasz avatar
    13 posts
    Member since:
    Sep 2017

    Posted 09 Apr 2018 Link to this post

    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?

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2382 posts

    Posted 11 Apr 2018 Link to this post

    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.
  3. Tomasz
    Tomasz avatar
    13 posts
    Member since:
    Sep 2017

    Posted 11 Apr 2018 in reply to Viktor Tachev Link to this post

    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();
            }
        }
    }
  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2382 posts

    Posted 13 Apr 2018 Link to this post

    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.
  5. Tomasz
    Tomasz avatar
    13 posts
    Member since:
    Sep 2017

    Posted 13 Apr 2018 in reply to Viktor Tachev Link to this post

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

     

  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2382 posts

    Posted 17 Apr 2018 Link to this post

    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.
Back to Top