scrollRowIntoView not working

[Mrudang Vora]

Hello All,

I am using slick grid for displaying item list.

I have requirement to scroll to the position of previously selected item.

Hence, I use following function to scroll and select previously selected item:

function SetDefaultItemSelected() {

        var selectedKey = 16; // hardcoded but there is logic to get previous item

        for (var rowIndex = 0; rowIndex < myItemDataView.getLength(); rowIndex++) {

            var gridRow = myItemDataView.getItem(rowIndex);

            if (gridRow.Key === selectedKey) {

                myItemGrid.setSelectedRows([rowIndex]);

                //TODO: check why the scrollRowIntoView is not working

                myItemGrid.scrollRowIntoView(rowIndex);

                break;

            }

        }

Output is something like this:

(There are 22 rows in total and I had previously selected 16th  row)

I am not sure why it is hiding the top 3 rows and not scrolling to 16th row.

[Mrudang Vora]

Hello All,

Just checked that if I add the button and bind its click event with the the above function, the scrolling magically works.

But, I am not sure what wrong am I doing in calling the function just after creation of grid?

Please help.

[Mrudang Vora]

Hello All,

Please find the sample code attached. Any help would be much appreciated !! 

On Wednesday, 3 December 2014 09:32:12 UTC-5, Mrudang Vora wrote:

Hello All,

I created new MVC3 application and tried to implement the same thing - Called the LoadData function by $.ajax and populated the slick grid and then tried to select default id.

I realized that the issue comes up only if the grid is in jquery-ui dialog. The same grid on the page works normally.

Could it possibly be a bug that slick grid scroll works on page and not in dialog loaded by ajax call??

Please help and let me know in case I need to share sample code

[Mrudang Vora]

Hello All,

There are 2 jquery ajax calls in my sample code (attached in google groups link in UPDATE 3 in the question):

1) .load() to load the empty jquery-dialog PartialView

2) .ajax() called on document.ready of partialView.js file to load the slick grid data. (partialView.js is referenced in PartialView.cshtml)

While trying many things, I found that when I put debugger; just before the 2nd .ajax() call and passed this debug point in chrome developer toolbar, the issue didn't seem to come.

So, I removed debugger; and thought of introducing delay of 500 ms

window.setTimeout(functionToBeDelayed, requiredDelay);

and the functionality started to behave as expected.

I am still not sure how these nested ajax calls is causing the issue. But, as of now, 500 ms delay has done trick for me.

Looking forward for some better solution.