WebDataGrid: Prevent scrolling on row selection

If you working with Infragistics Aikido controls and your WebDataGrid or WHDG is too long – a common approach to make content scrollable is to place grid control inside of a DIV with fixed dimensions and overflow set to auto:

WHDG scrollable inside of parent DIV

It works fine, but there’s one drawback: if you scroll your grid horizontally and then select a row – grid’s scroll position snaps back to the leftmost position. Infragistics says that it’s a browser bug and we need to talk to browser vendor about it. Wanting to solve the problem in this century I looked for alternatives and this is what I found.

To avoid the shift in scroll position we need to cancel the scroll event. Doing it directly (adding handler to “onscroll” event and canceling it there) is impossible since event is uncancelable (is it even a word?). Instead we can catch grid’s “RowSelectionChanging” event and cancel event bubble there:

function xMyGrid_RowSelectionChanging(sender, eventArgs) {
   event.cancelBubble = true
}

of course a better, more compatible approach would be:

function xMyGrid_RowSelectionChanging(sender, eventArgs) {
   eventArgs.getBrowserEvent().stopPropagation();
}

but unfortunately “eventArgs.getBrowserEvent()” is null in this case and we have to resort to first approach. This method still allows rows to be selected but cancels scroll to the left after selection.

Leave a Reply

Your email address will not be published. Required fields are marked *