Scroll row into view\top of table on select (virtual scroll\server side data)

[Gordon]

Hi Folks,

I have been struffling with the following issue...
I want to achive that a row when it is selected is scrolled to the top of the table.
The table is configured with virtual scolling and the datasource is bound to an odata service with server side paging

My code is working fine as long as the first page of data is shown. When I scroll the table, the row scrolls out of the view.

I would be glad if anyone can help me to find the correct way to calculate the correct scroll amount.

---
var selected = t.mainGrid.select();
 if (selected.length == 0) return;

 var vs = t.mainGrid.wrapper.find('.k-grid-content').data('kendoVirtualScrollable');

 var scrollGridContentOffset = t.mainGrid.wrapper.find('.k-grid-content').offset().top;
 var selectContentOffset = t.mainGrid.select().offset().top;
 var distance = selectContentOffset - scrollGridContentOffset;
 var scrollTop = vs.verticalScrollbar.scrollTop();
 
 vs.verticalScrollbar.animate({ scrollTop: distance + scrollTop }, 250);

--- grid config

t.mainGrid = $('#hist_flights').kendoGrid({
                selectable: "row",
                change: t.mainGridOnChange,
                navigatable: true,
                dataSource: {
                    type: "odata",
                    transport: {
                        read: {
                            url: "https://someurl.com/fis/odata/mydata",
                            dataType: "json"
                        }
                    },
                    schema: {
                        data: function(data) {
                            return data.value;
                        },
                        total: function(data) {
                            return data["odata.count"];
                        },
                        errors: function(data) {
                        },
                        model: {
                            fields: {
                                Id: { type: 'number', nullable: false },
                                Carrier: { type: 'string' },
                                FlightNo: { type: 'string' },
                                OperationalSuffix: { type: 'string' },
                                CallSign: { type: 'string' },
                                DateOfOriginUTC: { type: 'date', nullable: false },
                                DateOfOriginLCL: { type: 'date' },
                                DateOfOperationUTC: { type: 'date' },
                                DateOfOperationLCL: { type: 'date' },
                                DepartureIATA: { type: 'string' },
                                DepartureICAO: { type: 'string' },
                                DestinationIATA: { type: 'string' },
                                DestinationICAO: { type: 'string' },
                                AcReg: { type: 'string' },
                                FlightDuplicationNo: { type: 'number' },
                                BriefingSequenceNo: { type: 'number' },
                                BriefingComplete: { type: 'boolean' },
                                Withdrawn: { type: 'boolean' },
                                State: { type: 'string' },
                                StateChanged: { type: 'date' },
                                OFPState: { type: 'string' }
                            }
                        }
                    },
                    pageSize: 200,
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true
                },
                groupable: true,
                sortable: {
                    mode: "multiple",
                    allowUnsort: true
                },
                detailTemplate: kendo.template($("#detail_template").html()),
                reorderable: true,
                resizable: true,
                columnMenu: true,
                batch: true,
                height: contentHeight,
                scrollable: {
                    virtual: true
                },
                filterable: {
                    mode: "row,menu"
                },
                detailInit: t.detailInit,
                columns: [...]
            }).data('kendoGrid');

[Kiril Nikolov]

Hello Gordon,

The Kendo UI Grid with virtual scrolling does not support scrolling to particular records in the view. The reason is that the Grid virtualizes the data - renders only certain amount of elements, so scrolling to an element that physically does not exist in the DOM is not supported, and I am afraid that currently there is no workaround for this.

Regards,
Kiril Nikolov
Telerik

 

 

[Gordon]

Hello Kiril,

I think there is a little missunderstanding...
The row I am going to scroll into view is currently rendered in the visible area of the virtual content!
What I want to achive is to scroll this row to the first to visible position of the visible table area.

Currently this code snippet does this job well in most cases. It only fails when the the datalayer fetches the next page of data during scroll.

var vs = t.mainGrid.wrapper.find('.k-grid-content').data('kendoVirtualScrollable');
var scrollGridContentOffset = t.mainGrid.wrapper.find('.k-grid-content').offset().top;
var selectContentOffset = t.mainGrid.select().offset().top;
var distance = selectContentOffset - scrollGridContentOffset;
var scrollTop = vs.verticalScrollbar.scrollTop();

vs.verticalScrollbar.scrollTop( distance + scrollTop );

For everyone who is looking for the same feature natively enabled in the next version should raise the voice here:
http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/4011712-add-posibility-to-jump-scroll-to-specific-row-wh

Cheers,
Gordon

[Kiril Nikolov]

Hi Gordon,

This is exactly what I meant - the scroll position cannot be maintained when new data is loaded on scrolling, and currently there is no workaround for this that we can offer.

Thanks for sharing the UserVoice item, if it gets popular a similar implementation will be looked upon and eventually implemented.

Regards,
Kiril Nikolov
Telerik