This is a migrated thread and some comments may be shown as answers.

Syncing Horizontal Scrolling In Child Templates

1 Answer 80 Views
GridView
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 16 May 2017, 08:29 PM
How would I sync the horizontal scrolling of child tables? I don't want to use GridViewAutoSizeColumnsMode.Fill but I want the user to vertically scroll and have all the same child tables be lined up.

1 Answer, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 17 May 2017, 10:56 AM
Hello David, 

Thank you for writing.  
 
It is possible to use the horizontal scroll bar of the main template to manage for both templates. However, it is not recommended to use it in the case of a large amount of data as it may affect the performance when scrolling. The attached gif file illustrates better the implemented functionality.
public RadForm1()
{
    InitializeComponent();
    this.radGridView1.ViewCellFormatting += RadGridView1_ViewCellFormatting;
}
 
private void RadForm1_Load(object sender, EventArgs e)
{
    this.productsTableAdapter.Fill(this.nwindDataSet.Products);
    this.categoriesTableAdapter.Fill(this.nwindDataSet.Categories);
    radGridView1.AutoGenerateHierarchy = true;
    radGridView1.DataSource = this.nwindDataSet;
    radGridView1.DataMember = "Categories";
 
    radGridView1.MasterTemplate.BestFitColumns(BestFitColumnMode.AllCells);
    radGridView1.MasterTemplate.Templates.First().BestFitColumns(BestFitColumnMode.AllCells);
    radGridView1.TableElement.HScrollBar.ValueChanged += HScrollBar_ValueChanged;
}
 
private double mainScrollBarRatio = 0f;
 
private double childScrollBarRatio = 0f;
private int hValue = 0;
 
private int vValue = 0;
 
private bool isRefreshing = false;
 
private void HScrollBar_ValueChanged(object sender, EventArgs e)
{
    mainScrollBarRatio = Convert.ToDouble(radGridView1.TableElement.HScrollBar.Value) /
        (radGridView1.TableElement.HScrollBar.Maximum - radGridView1.TableElement.HScrollBar.LargeChange + 1);
 
    if (!isRefreshing)
    {
        isRefreshing = true;
        hValue = radGridView1.TableElement.HScrollBar.Value;
        vValue = radGridView1.TableElement.VScrollBar.Value;
        this.radGridView1.MasterTemplate.Refresh();
        radGridView1.TableElement.HScrollBar.Value = hValue;
        radGridView1.TableElement.VScrollBar.Value = vValue;
        isRefreshing = false;
    }
}
 
private void RadGridView1_ViewCellFormatting(object sender, CellFormattingEventArgs e)
{
    GridDetailViewCellElement detailCell = e.CellElement as GridDetailViewCellElement;
    if (detailCell != null)
    {
        RadScrollBarElement sc = detailCell.Children[0].Children[1] as RadScrollBarElement;
        if (sc != null)
        {
            sc.ScrollParameterChanged -= sc_ScrollParameterChanged;
            sc.ScrollParameterChanged += sc_ScrollParameterChanged;
 
            sc.ValueChanged -= sc_ValueChanged;
            sc.ValueChanged += sc_ValueChanged;
 
            isRefreshing = true;
            sc.Value = Convert.ToInt32(mainScrollBarRatio * (sc.Maximum - sc.LargeChange + 1));
            isRefreshing = false;
            sc.PositionOffset = new SizeF(-10000, 0);
            sc.Margin = new Padding(0, 0, 0, -20);
        }
    }
}
 
private void sc_ScrollParameterChanged(object sender, EventArgs e)
        {
            RadScrollBarElement sc = sender as RadScrollBarElement;
            if (sc != null)
            {
                sc.Margin = new Padding(0, 0, 0, -20);
                sc.PositionOffset = new SizeF(-10000, 0);
                int expectedValue = Convert.ToInt32(mainScrollBarRatio * (sc.Maximum - sc.LargeChange + 1));
                if (sc.Value != expectedValue)
                {
                    isRefreshing = true;
                    sc.Value = expectedValue;
                    isRefreshing = false;
                }
            }
        }
 
private void sc_ValueChanged(object sender, EventArgs e)
{
    RadScrollBarElement sc = sender as RadScrollBarElement;
    double ratio = Convert.ToDouble(sc.Value) / (sc.Maximum - sc.LargeChange + 1);
 
    if (!isRefreshing)
    {
        this.radGridView1.MasterTemplate.EventDispatcher.SuspendNotifications();
        radGridView1.TableElement.HScrollBar.Value = (int)((radGridView1.TableElement.HScrollBar.Maximum
            - radGridView1.TableElement.HScrollBar.LargeChange + 1) * ratio);
        this.radGridView1.MasterTemplate.EventDispatcher.ResumeNotifications();
    }
}
 
private void RadGridView1_CurrentRowChanging(object sender, CurrentRowChangingEventArgs e)
{
    if (e.NewRow != null && e.NewRow.HierarchyLevel > 0)
    {
        e.Cancel = true;
    }
}

I hope this information helps. Should you have further questions I would be glad to help.

Regards,
Dess
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
GridView
Asked by
David
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Share this question
or