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

Howto reset virtual scrolling on datasource.query()?

4 Answers 211 Views
Grid
This is a migrated thread and some comments may be shown as answers.
RainerAtSpirit
Top achievements
Rank 1
RainerAtSpirit asked on 21 May 2012, 12:59 PM
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


4 Answers, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 24 May 2012, 01:49 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
RainerAtSpirit
Top achievements
Rank 1
answered on 29 May 2012, 05:04 PM
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
0
Rosen
Telerik team
answered on 30 May 2012, 07:19 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
RainerAtSpirit
Top achievements
Rank 1
answered on 30 May 2012, 08:39 AM
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
Tags
Grid
Asked by
RainerAtSpirit
Top achievements
Rank 1
Answers by
Rosen
Telerik team
RainerAtSpirit
Top achievements
Rank 1
Share this question
or