synchronize scrollbars of 2 RadGrid

[Christian]

In my application I have 2 RadGrids, both have the same width.

Now I need to synchronize the scrollbars in a mirror way, that means if I move the scrollbar of the second RadGrid to the right, the Scrollbar of the first RadGrid shall move to the left.

Here is my code which doesn't work exactly (there is a differenz of 40px):

function Scroll2(sender, eventArgs)
 {

     var RadGrid1 = $find("<%= RadGrid1_ClientID %>");
     if(RadGrid1 != null)
     {
     var scrollArea = RadGrid1.GridDataDiv;
     scrollArea.scrollTop = eventArgs.get_scrollTop();
     scrollAreascrollArea.scrollLeft = scrollArea.offsetWidth-eventArgs.get_scrollLeft();
     }

 }

Does someone see the fault?

thanks

Christian

[Georgi Krustev]

Hello Christian,

To attain the functionality you are searching for, you need to subtract the width of the visible div (GridDataDiv) from the offsetWidth property of the MasterTableView. Afterward you just remove the value of the eventArgs.get_scrollLeft().

To clarify please review the following code snippet:

            function OnScroll2(sender, eventArgs) {
                var RadGrid1 = $find("<%= RadGrid1.ClientID %>");

                if (RadGrid1 != null) {
                    var scrollArea = RadGrid1.GridDataDiv;
                    var masterTableDiv = RadGrid1.get_masterTableView().get_element();

                    var realDivWidth = masterTableDiv.offsetWidth - scrollArea.offsetWidth;
                    scrollArea.scrollTop = eventArgs.get_scrollTop();
                    scrollArea.scrollLeft = realDivWidth - eventArgs.get_scrollLeft();
                }
            }

All the best,
Georgi Krustev
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Christian]

great thanks