Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Two synchronized Rad Grid with Scrolling

6 Answers 277 Views
Grid
This is a migrated thread and some comments may be shown as answers.
MAXX
Top achievements
Rank 1
MAXX asked on 04 Mar 2010, 04:08 PM
Hi,

I have a web page where i need to Put Two Rad Grid side by side (one on Left, one on Right). I want to make their rows aligned with each other and their Vertical Scrolling as well. 
Means  when User scroll One Grid (Top to Bottom) other grid should also do scroll.

Is It possible with Rad Grid?? or is there any work around?
If yes It would be great to have the solution or hint.

Thanks in advance,
Ankur Mittal

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 05 Mar 2010, 08:54 AM
Hello Ankur Mittal,

Here is a simple demo, which shows how to syncronize the two RadGrids' scroll position.

In order to ensure that the rows of both RadGrids are equally high, you may need to set ItemStyle-Height and AlternatingItemStyle-Height to the MasterTableViews.


<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<script runat="server">
 
    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 3;
        int rowsNum = 20;
        string colName = "Column";
 
        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }
 
        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();
 
            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }
 
        (sender as RadGrid).DataSource = dt;
    }
 
</script>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<table><tr><td style="vertical-align:top">
 
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="400px"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
    </ClientSettings>
</telerik:RadGrid>
 
</td><td style="vertical-align:top">
 
<telerik:RadGrid
    ID="RadGrid2"
    runat="server"
    Width="400px"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
    </ClientSettings>
</telerik:RadGrid>
 
</td></tr></table>
 
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
 
Sys.Application.add_load(attachScrollHandlers);
 
var RadGrid1;
var RadGrid2;
 
function attachScrollHandlers()
{
    RadGrid1 = $find("<%= RadGrid1.ClientID %>");
    RadGrid2 = $find("<%= RadGrid2.ClientID %>");
    $addHandler(RadGrid1.GridDataDiv, "scroll", sync12);
    $addHandler(RadGrid2.GridDataDiv, "scroll", sync21);
}
 
function sync12(e)
{
    RadGrid2.GridDataDiv.scrollTop = RadGrid1.GridDataDiv.scrollTop;
}
function sync21(e)
{
    RadGrid1.GridDataDiv.scrollTop = RadGrid2.GridDataDiv.scrollTop;
}
 
</script>
</telerik:RadCodeBlock>
 
</form>
</body>
</html>


All the best,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
MAXX
Top achievements
Rank 1
answered on 05 Mar 2010, 10:38 AM
Hey Dimo,

Thanks a lot for nice, quick, and simple solution. It works perfectly. Now i am going to use in my Grids.

Cheers,
Ankur Mittal 
0
Mario
Top achievements
Rank 1
answered on 31 Mar 2015, 05:33 PM
Hi, I am using this solution for keeping on sync two radgrids side by side. So far so good. But now I need to add sorting functionality only in the first grid, and still keeping on sync the rows in both. I have an ID column in both grids, and I need a way to make the relationship. It can be achieved client or server side. Any help would be appreciated.  thank you.
0
Konstantin Dikov
Telerik team
answered on 03 Apr 2015, 12:31 PM
Hello Mario,

With enabled sorting for only one of the grids, you will not be able to use the same approach for synchronizing the scroll bars, because it depends on the fact that both grids will have the same item order. Having that in mind, if you need to keep both grid scrolls in sync, you need to apply the same sort expression to the second grid, when you sort the first grid.

Hope this helps.


Regards,
Konstantin Dikov
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
0
Wissal
Top achievements
Rank 1
answered on 19 May 2015, 04:25 PM

Hi, this solution doesn't work when i put FrozenColumns in  radgrids.

 Is it possible to do that with RadGrid??

Any help would be appreciated.

 thank you.

0
Konstantin Dikov
Telerik team
answered on 20 May 2015, 09:00 AM
Hello Wissal,

If you are referring to the horizontal scroll bars, you need to get reference to the DIV element that is used for the horizontal scroll with enabled Frozen columns as well and handle its scroll event.

For your convenience, following is the modified code that will handle both of the scrolls:
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Width="400px"
    OnNeedDataSource="RadGrid1_NeedDataSource">
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="2"/>
    </ClientSettings>
</telerik:RadGrid>
 
<telerik:RadGrid
    ID="RadGrid2"
    runat="server"
    Width="400px"
    OnNeedDataSource="RadGrid1_NeedDataSource">
    <ClientSettings>
        <Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="2"/>
    </ClientSettings>
</telerik:RadGrid>
 
 
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        Sys.Application.add_load(attachScrollHandlers);
 
        var RadGrid1;
        var RadGrid2;
 
        function attachScrollHandlers() {
            RadGrid1 = $find("<%= RadGrid1.ClientID %>");
            RadGrid2 = $find("<%= RadGrid2.ClientID %>");
             
            $addHandler(RadGrid1.GridDataDiv, "scroll", sync12);
            $addHandler(RadGrid2.GridDataDiv, "scroll", sync21);
            $addHandler(document.getElementById(RadGrid1.get_id() + "_Frozen"), "scroll", sync12v);
            $addHandler(document.getElementById(RadGrid2.get_id() + "_Frozen"), "scroll", sync21v);
        }
 
        function sync12(e) {
            RadGrid2.GridDataDiv.scrollTop = RadGrid1.GridDataDiv.scrollTop;
        }
        function sync21(e) {
            RadGrid1.GridDataDiv.scrollTop = RadGrid2.GridDataDiv.scrollTop;
        }
 
        function sync12v(e) {
            document.getElementById(RadGrid2.get_id() + "_Frozen").scrollLeft = document.getElementById(RadGrid1.get_id() + "_Frozen").scrollLeft;
        }
        function sync21v(e) {
            document.getElementById(RadGrid1.get_id() + "_Frozen").scrollLeft = document.getElementById(RadGrid2.get_id() + "_Frozen").scrollLeft;
        }
    </script>
</telerik:RadCodeBlock>

Hope this helps.


Best Regards,
Konstantin Dikov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
MAXX
Top achievements
Rank 1
Answers by
Dimo
Telerik team
MAXX
Top achievements
Rank 1
Mario
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Wissal
Top achievements
Rank 1
Share this question
or