Syncing Horizontal Scrolling In Child Templates

2 posts, 0 answers
  1. David
    David  avatar
    5 posts
    Member since:
    Nov 2010

    Posted 16 May 2017 Link to this post

    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.
  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3530 posts

    Posted 17 May 2017 Link to this post

    Hello David, 

    Thank you for writing.  
     
    It is possible to use the horizontal scroll bar of the main template to manage scrolling 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.
Back to Top