Howto reset virtual scrolling on datasource.query()?

[RainerAtSpirit]

Hi there,

I'm looking for a way to "reset" virtual scrolling on sorting/filtering. E.g in the code below I'm resetting the sort, pageSize and page params to the default values. Note that especially page is set to 1. While the datasource is retrieving the correct dataset the scroll bar isn't reset.

$('#search').val('')

                   .focus()

                   .keyup(function (event) {

                       App.DS.sharableDataSource.query({

                           filter:{

                               field:"LastName",

                               operator:"startswith",

                               value:event.currentTarget.value

                           },

                           sort:App.DS.sharableDataSource.options.sort,

                           pageSize:App.DS.sharableDataSource.options.pageSize,

                           page:1

                       })

                   });

A live version that demonstrates this behavior can be found at http://openaccess.spirit.de/.

Without any filter applied scroll down a little and then either use the search box or the dropdown filter. The desired behavior would be that the dimension of the scroll bar would be newly calculated and the slider should move to the initial position whenever there's a request for page 1.

Thanks,

Rainer

[Rosen]

Hello Rainer,

I'm afraid that automatic scroll position reset on filtering is not currently available. However, you may manually reset the scroll position with similar to the following code:

$("#grid .k-scrollbar-vertical").scrollTop(0)

Greetings,
Rosen
the Telerik team

[RainerAtSpirit]

Thanks Rosen!

I can confirm that this will reset the scroll position correctly when I manually run that after the new dataset is retrieved.

Now I'm running into an issue while trying to hook that to the datasource change event. For some reason the change event only fires once on first page load. As an alternative I tried requeststart, but that won't work either.

I'm wondering if I misread the information at http://www.kendoui.com/documentation/framework/datasource/events.aspx
I'd expect that those events fire whenever the datasource is fetching data.
Anyway here's a link (http://openaccess.spirit.de/temp.htm) to an updated example that loads individual kendo*.js files instead of web.min.js if you want to give it a shot.

companyDataSource:new kendo.data.DataSource({

    type:"odata",

    serverPaging:true,

    serverSorting:true,

    serverFiltering:true,

    sort:[

        { field:"Name", dir:"asc" }

    ],

    pageSize:40,

    transport:{

        read:{

            url:"/EntitiesModelService.svc/Companies",

            dataType:"json"  // switch to "jsonp" if cross domain

        }

    },

    change: function(e) {

        console.log ('changed');

    }

})

Thanks,

Rainer

[Rosen]

Hello Rainer,

I'm afraid that I'm unable to observe such behavior. The change event of the DataSource instance in question is executed as expected, when the associated ComboBox widget is rebound. Please take a look at this short screen capture. Maybe you want to capture the change of the ComboBox selection instead?

Regards,
Rosen
the Telerik team

[RainerAtSpirit]

Hi Rosen,

You're right all is working well. It was me expecting it to do something different than I had implemented ;-). To meet the requirements I should either bind to the change event of the sharableDataSource or the change of the selection of the combobox as you suggested.

Thanks for  pointing that out.

Rainer