Listview paging - Page change sending two requests

6 posts, 1 answers
  1. Jed Horovitz
    Jed Horovitz avatar
    19 posts
    Member since:
    Oct 2007

    Posted 30 Jul 2013 Link to this post

    Hello,
    I am attempting to use a Listview with serverPaging that has custom filtering applied to it. What I am seeing is when I apply a filter, the intial result set is coming back correct. When I attempt to change the page, I am seeing two dataSource requests. The first request has the correct querystring arguments passed, and the second has no arguments set. 

    How can I get the desired functionality without the extra datasource request? Code is below.

    $("#user-Search").kendoDropDownList({
                    autobind: false,
                    enabled: true,
                    optionLabel: "All",
                    dataTextField: "text",
                    dataValueField: "value",
                    dataSource: userDataSource,
                    edit: function (e) {
                        var ddl = e.container.find('[data-role=dropdownlist]').data('kendoDropDownList');
                        if (ddl) {
                            ddl.open();
                        }
                    },
                    change: function () {
                        initGrid();
                    }
     
                });
     
     function initGrid() {
                var ds = getDataSource();
                var History = $("#listView").kendoListView({
                    dataSource: ds,
                    template: kendo.template($("#template").html()),
                    autoBind: false,
                    pageable: true
                     
                });
                
                $("#pager").kendoPager({
                    dataSource: ds,
                    empty: "No Items to Display",
                    autoBind: false
                });
                 
            }
     
            function getDataSource() {
                
                var dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "/Services/TitleHistory.ashx?publishedid=" + $("#SearchHistory")[0].value + "&startDate=" + $("#datestart")[0].value + "&endDate=" + $("#dateend")[0].value + "&filterUser=" + $("#user-Search")[0].value,
                            dataType: "jsonp"
                        },
                        serverOperation:false
                    },
                    serverPaging: true,
                    schema: {
                        total: function (response) {
                            if (response[0]) {
     
                                return response[0].total;
                            }
                            else {
                                return 0;
                            }
                        },
                        model: {
                            id: "EventType",
                            fields: {
                                EventType: { editable: false, nullable: true },
                                Details: { editable: false, nullable: true },
                                Comment: { editable: false, validation: { required: true } },
                                User: { editable: false, validation: { required: true } },
                                EventDate: { validation: { required: true }, type: "date", format: "{0:MM-dd-yyyy}" }, editable: false,
                                Title: { editable: false, nullable: false },
                                UserId: { editable: false, nullable: false },
                                PublishedId: { editable: false, nullable: false, }
                            },
                        }
                    },              
                    pageSize: 5
                });
                 dataSource.fetch();
                return dataSource;
            }
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 01 Aug 2013 Link to this post

    Hello Jed,

    I see no reason two requests to be triggered. Basically dataSource.fetch should perform request, probably you are invoking page() or filter() at a later time again ?

    If you comment the dataSource.fetch() how many requests are triggered?

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Jed Horovitz
    Jed Horovitz avatar
    19 posts
    Member since:
    Oct 2007

    Posted 01 Aug 2013 Link to this post

    Hello Petur,

    I corrected the multiple requests to my web handler by removing the initGrid from the dropDownList's change event.  I was reinitalizing the listView on change and this seems to have been the issue. 

    I am now seeing that when the dataSource changes a page, the read method is not passing my arguments over to my web handler.
    The only guess I have is because the read method is called before the dom has finished loading, and the arguments aren't available. Is there a better way to handle this custom filtering? Code is below,
    function updateGrid() {
     
                var ds = $("#listView").data("kendoListView").dataSource;
                ds.read();
            }
            //INITIALIZE GRID RESULTS
            function initGrid() {
                var ds = getDataSource();
                var History = $("#listView").kendoListView({
                    dataSource: ds,
                    template: kendo.template($("#template").html()),
                    autoBind: false,
                    pageable: true,
                    dataBinding: function () {
     
                    }
                });
     
                $("#pager").kendoPager({
                    dataSource: ds,
                    empty: "No Items to Display",
                    autoBind: false
                });
     
            }
     
            function getDataSource() {          
                var dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "/Services/TitleHistory.ashx?publishedid=" + $("#SearchHistory")[0].value + "&startDate=" + $("#datestart")[0].value + "&endDate=" + $("#dateend")[0].value + "&filterUser=" + $("#user-Search")[0].value,
                            dataType: "jsonp"
                        }
                    },
                    serverPaging: true,
                    serverOperation: false,
                    schema: {
                        total: function (response) {
                            if (response[0]) {
     
                                return response[0].total;
                            }
                            else {
                                return 0;
                            }
                        },
                        model: {
                            id: "EventType",
                            fields: {
                                EventType: { editable: false, nullable: true },
                                Details: { editable: false, nullable: true },
                                Comment: { editable: false, validation: { required: true } },
                                User: { editable: false, validation: { required: true } },
                                EventDate: { validation: { required: true }, type: "date", format: "{0:MM-dd-yyyy}" }, editable: false,
                                Title: { editable: false, nullable: false },
                                UserId: { editable: false, nullable: false },
                                PublishedId: { editable: false, nullable: false, }
                            },
                        }
                    },
                    pageSize: 5
                });
                dataSource.fetch();
                return dataSource;
            }
  5. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 05 Aug 2013 Link to this post

    Hello Jed,

    When is that updateGrid function invoked? I assume this is happening because you are constricting the url (which is done initially) and not using the data function of the read transport.

    Check the documentation for snippet example, if using the data as function you should be able to do it.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jed Horovitz
    Jed Horovitz avatar
    19 posts
    Member since:
    Oct 2007

    Posted 05 Aug 2013 Link to this post

    Thanks Petur, 

    I modified the dataSource to use the data function and everything is working as expected. 

    Thanks,
  7. naga
    naga avatar
    1 posts
    Member since:
    Sep 2013

    Posted 12 Sep 2013 Link to this post

    Hello,
    I am declaring the kendo pager as below..
     $(".pager").kendoPager({
                dataSource: dataSrc.Prescription,
                pageSizes: [10, 20, 30],
                previousNext: true,
                numeric: false,
                info: false,
                change: function (e) {
                    self.pageBind(e);
                }
            });

    the change event is not working for page size ie. when i select the pagesize 10 or 20 or 30.. it is showing a script error in jquery.validate.js file handler event.
    this change event is working fine for previousnext navigation icons.
    Anything need to modify for pagesize.. please help me out.
Back to Top
Kendo UI is VS 2017 Ready