scrollRowIntoView not working in jquery-ui dialog box - sample code attached

[mrudang-vora]

Hello All,

I created new ASP.Net MVC3 application and tried to implement slick grid. I have jquery-ui dialog populated with slick grid data (data comes by $.ajax call). I tried to select the default row which needs to be selected on grid load and tried to implement the same.

But, there is some abrupt behaviour here. It shows following:

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 find the attached the sample code: https://groups.google.com/forum/#!msg/slickgrid/CUjY3H1F_zM/OY0UL0IO5ewJ

Any help or guidance would be much appreciated !!

[jeddi]

try this:

function SetDefaultItemSelected() {
        var gridRow,
              selectedKey = 16;

        for (var rowIndex = 0; rowIndex < myItemDataView.getLength(); rowIndex++) {
            gridRow = myItemDataView.getItem(rowIndex);
            if (gridRow.Key === selectedKey) {
               myItemGrid.gotoCell(rowIndex,0);//gotoCell will set row 'rowIndex' as selected
               myItemGrid.resizeCanvas(); 
                break;
            }
        }
}

[mrudang-vora]

Tried the above mentioned solution but no luck. It gives exactly same result as the previous code (as mentioned above, have attached complete VS2010 MVC3 solution in case you want to have a look.)

Just a guess: Does the myItemGrid.scrollRowIntoView(rowIndex) create new styles dynamically for postioning the scroll? If yes, can it be the case where these styles are not preserved?

[mrudang-vora]

WORKAROUND:

Hello All,

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

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.

Closing this issue as of now with this workaround but definitely looking forward for some better solution.