Listview paging - Page change sending two requests

[Bob]

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

[Petur Subev]

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

[Bob]

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;

        }


[Petur Subev]

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

[Bob]

Thanks Petur, 

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

Thanks,

[naga]

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.