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

Gird Scroll Bar Not stable

5 Answers 61 Views
Forum suggestions
This is a migrated thread and some comments may be shown as answers.
ASPN
Top achievements
Rank 1
ASPN asked on 15 Jan 2019, 05:08 PM

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

 

 


 

5 Answers, 1 is accepted

Sort by
0
ASPN
Top achievements
Rank 1
answered on 15 Jan 2019, 05:18 PM

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 

0
Tsvetomir
Telerik team
answered on 18 Jan 2019, 03:44 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
ASPN
Top achievements
Rank 1
answered on 18 Jan 2019, 05:42 PM

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?

 

0
ASPN
Top achievements
Rank 1
answered on 21 Jan 2019, 11:25 AM

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;
}
0
Tsvetomir
Telerik team
answered on 21 Jan 2019, 02:35 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Forum suggestions
Asked by
ASPN
Top achievements
Rank 1
Answers by
ASPN
Top achievements
Rank 1
Tsvetomir
Telerik team
Share this question
or