Gird Scroll Bar Not stable

[ASPN]

Hi,

I am using UI for ASP.NET MVC Grid.

with the gird option .Scrollable(scrollable => scrollable.Virtual(true)).

There are grid event like

.Events(events => events.Change("onNoDiscountGridChange"))

.Events(events => events
                                        .DataBound("onNoDiscountGridDataBound")
                                        .Save("onNoDiscountGridSave")
                                        .Edit("onNoDiscountGridEdit").

 

We have requirement scenario that we can dynamically add as many rows user want.

After user successful add row in grid  and start entering in it based on this input we need to get data from back end and fill the gird row with the return value.

So when user complete entering input in text box and click tab key ,the scroll bar is visible. After the onNoDiscountGridChange metod is called scroll bar not remain on same position in scroll up and edit row goes hide.

to deal with situation calling scroll()  ,have applied below code in onNoDiscountGridChange() but not working at all.

Please suggest what is the solution to keep grid scrollbar at same position during cell edit on change.

 

function scroll() {
        var grid = $('#gridNodiscount').data('kendoGrid');
        if (grid.content.data('kendoMobileScroller')) {
            grid.content.data('kendoMobileScroller').animatedScrollTo(0, -1 * grid.select().position().top);
        } else {
            grid.content.animate({
                scrollTop: grid.select().position().top
            }, 400);
        }
    }

 

We are also calling  scroll method in the onNoDiscountGridSave and onNoDiscountGridDataBound(arg) method

function onNoDiscountGridSave(e) {
        isCostChanged = true;
        this.refresh();
       
        scroll();
    }

Please let me know if any more clarification needed.

 

Thanks

 

 

 

[ASPN]

Hi Kindly ignore scroll() method put mistakenly, consider fixScrollBar () as part of original post.

function fixScrollBar() {
       
       
        // Get the first visible cell's scroll offset
        // We use the unlocked (editable) cells here, but the locked cells should be synchronized.
        var firstCellOffset = $("div.k-grid-content div.k-virtual-scrollable-wrap").scrollTop();
        // Set the scrollbar propertly
        var scrollBar = $("#gridNodiscount").data("kendoGrid")
            .wrapper
            .find('.k-grid-content')
            .data('kendoVirtualScrollable')
            .verticalScrollbar;
        // If at any point the scroll bar goes away while we are trying to do this,
        // just skip it, we'll catch it next time.
        if (scrollBar.length > 0) {
            scrollBar.scrollTop(firstCellOffset);
        }
    }

Thanks 

Alif 

[Tsvetomir]

Hi Alif,

When the virtual scrolling functionality of the Kendo UI Grid is enabled the vertical scroll's height is calculated based on the total number of records in the data source. So, if you would like to set the scroll position, refer to the code snippets below:

1. Create variables to store the current page, offset and a flag which indicates if the grid has been scrolled.

var isScrolled = false;
var page = 0;
var offset = 0;

2. In the change event handler obtain the current page and the offset. Mark the flag as true:

function onNoDiscountGridChange(e) {
    page = e.sender.dataSource.page();
    offset = $(".k-scrollbar-vertical").scrollTop();
    isScrolled = true;
}

3. Set the scroll's offset in an event according to your scenario. Here is an example of the dataBound event:

function onNoDiscountGridDataBound(e) {
    if (isScrolled) {
        e.sender.dataSource.page(page);
        $(".k-scrollbar-vertical").scrollTop(offset);
        isScrolled = false;
    }
}

Please note that if this flag is not present, maximum call stack will be exceeded. This is due to the fact that the grid will call the data bound event, within the event handler the data source will call the data bound event of the grid. This will be repeated until the call stack is exceeded.


Kind regards,
Tsvetomir
Progress Telerik

[ASPN]

Thank you for your valuable response.

I am not using pagination on grid due to some scenero.So your reply based on with out pagination?

 

[ASPN]

after following as suggested and  making the change in the below method row which is being edited scroll up and i need to be keep scroll at same position.Please suggest what need to apply to fix.

var isScrolled = false;
var offset = 0;
function onNoDiscountGridDataBound(e) {

    if (isScrolled) {
        //e.sender.dataSource.page(page); commented due to //giving error as i am not use pagination
        $(".k-scrollbar-vertical").scrollTop(offset);
        isScrolled = false;
    }
}

function onNoDiscountGridChange(e) {
    //page = e.sender.dataSource.page(); commented as //pagination is not used 
    offset = $(".k-scrollbar-vertical").scrollTop();
    isScrolled = true;
}

[Tsvetomir]

Hi Alif,

The virtual scrolling functionality of the Kendo UI Grid is operating with a large amount of data. Even though the grid does not have paging enabled (as recommended) the data source has both - pages and page size. The data is not loaded directly to the grid, but only after you drag the scrollbar and the pageSize is exceeded, it makes automatic requests to retrieve and render the next set of grid rows.

This can be observed in the following live demo:

Grid / Virtualization of remote data

The grid does not have paging, but the data source has. Even if you omit the pageSize property, the default value will be used - "20". In other words, there are pages but on the data source level. 

I hope these clarifications are helpful.


Kind regards,
Tsvetomir
Progress Telerik