Inconsistent Pane Width

2 posts, 0 answers
  1. Virgil Rodriguez
    Virgil Rodriguez avatar
    70 posts
    Member since:
    Oct 2008

    Posted 18 Jan 2012 Link to this post

    Hello Telerik,

    I have the following in my .ASPX:

    <telerik:RadSplitter ID="table_splitter" runat="server" Width="100%" Orientation="Horizontal">
        <telerik:RadPane ID="row1_pane" runat="server" OnClientResizing="OnClientRowResizing">
            <telerik:RadSplitter ID="row1_column_splitter" runat="server" Width="100%" Orientation="Vertical">
                <telerik:RadPane ID="row1_col1_pane" runat="server" OnClientResizing="OnClientColResizing">row1_col1_pane
                </telerik:RadPane>
                <telerik:RadSplitBar ID="row1_col1_splitbar" runat="server"></telerik:RadSplitBar>
                <telerik:RadPane ID="row1_col2_pane" runat="server" OnClientResizing="OnClientColResizing">row1_col2_pane
                </telerik:RadPane>
                <telerik:RadSplitBar ID="row1_col2_splitbar" runat="server"></telerik:RadSplitBar>
                <telerik:RadPane ID="row1_col3_pane" runat="server" OnClientResizing="OnClientColResizing">row1_col3_pane
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="row1_splitbar" runat="server"></telerik:RadSplitBar>
        <telerik:RadPane ID="row2_pane" runat="server" OnClientResizing="OnClientRowResizing">
            <telerik:RadSplitter ID="row2_column_splitter" runat="server" Width="100%" Orientation="Vertical">
                <telerik:RadPane ID="row2_col1_pane" runat="server" OnClientResizing="OnClientColResizing">row2_col1_pane
                </telerik:RadPane>
                <telerik:RadSplitBar ID="row2_col1_splitbar" runat="server"></telerik:RadSplitBar>
                <telerik:RadPane ID="row2_col2_pane" runat="server" OnClientResizing="OnClientColResizing">row2_col2_pane
                </telerik:RadPane>
                <telerik:RadSplitBar ID="row2_col2_splitbar" runat="server"></telerik:RadSplitBar>
                <telerik:RadPane ID="row2_col3_pane" runat="server" OnClientResizing="OnClientColResizing">row2_col3_pane
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="row2_splitbar" runat="server"></telerik:RadSplitBar>
        <telerik:RadPane ID="row3_pane" runat="server" OnClientResizing="OnClientRowResizing">
            <telerik:RadSplitter ID="row3_column_splitter" runat="server" Width="100%" Orientation="Vertical">
                <telerik:RadPane ID="row3_col1_pane" runat="server" OnClientResizing="OnClientColResizing">row3_col1_pane
                </telerik:RadPane>
                <telerik:RadSplitBar ID="row3_col1_splitbar" runat="server"></telerik:RadSplitBar>
                <telerik:RadPane ID="row3_col2_pane" runat="server" OnClientResizing="OnClientColResizing">row3_col2_pane
                </telerik:RadPane>
                <telerik:RadSplitBar ID="row3_col2_splitbar" runat="server"></telerik:RadSplitBar>
                <telerik:RadPane ID="row3_col3_pane" runat="server" OnClientResizing="OnClientColResizing">row3_col3_pane
                </telerik:RadPane>
            </telerik:RadSplitter>
        </telerik:RadPane>
    </telerik:RadSplitter>

    And here is my client Javascript:

    function OnClientRowResizing(splitter, args) {
        var id = splitter._element.id;
        var rowstr = id.substr(id.search("_row"), id.search("_pane") - id.search("_row"));
        var row = rowstr.replace("_row", "");
        // let's get the row splitters
        for (i = 1; i <= 3; i++) {
            if (i == row) {
                var rowSplitter = $find("ctl00_MainContent_ctlSplitterPanes_row" + i + "_column_splitter");
                if (rowSplitter != null) {
                    for (j = 0; j <= rowSplitter.getPanes().length - 1; j++) {
                        var pane = rowSplitter.getPanes()[j]
                        pane.set_height(pane.get_height() + args._delta);
                        pane.set_content("row" + i + "_col" + (j + 1) + "_pane> height: " + pane.get_height() + " width: " + pane.get_width());
                    }
                }
            }
        }
    }
    function OnClientColResizing(splitter, args) {
        var id = splitter._element.id;
        var rowstr = id.substr(id.search("_row"), id.search("_col") - id.search("_row"));
        var row = rowstr.replace("_row", "");
        var colstr = id.substr(id.search("_col"), id.search("_pane") - id.search("_col"));
        var col = colstr.replace("_col", "");
        // let's get the row splitters
        for (i = 1; i <= 3; i++) {
            var rowSplitter = $find("ctl00_MainContent_ctlSplitterPanes_row" + i + "_column_splitter");
            if (rowSplitter != null) {
                for (j = 0; j <= rowSplitter.getPanes().length - 1; j++) {
                    if (j==col-1) {
                        var pane = rowSplitter.getPanes()[j]
                        pane.set_width(pane.get_width() + args._delta);
                        pane.set_content("row" + i + "_col" + (j+1) + "_pane> height: " + pane.get_height() + " width: " + pane.get_width());
                    }
                }
            }
        }
    }

    See the attachment for the initial output.

    What I'm trying to achieve here is: when I resize the width of any pane of any column in any row, I want to resize the panes in the same column in the other rows as well.

    Using the client script I have come up with (OnClientColResizing), I am actually able to do just that. However, my problem is that, the width of the panes that are in the affected columns in the row where I'm triggering the resizing from, is ALWAYS not the same as the width of the panes in the corresponding columns of the other rows, even though it's width is the basis for changing the other panes' widths.

    I don't seem to have any problem using OnClientRowResizing to sychronize the heights of all panes when I'm resizing any row.

    Kindly look into my code and see if I've missed anything. Any suggestions in improving my code will be most appreciated too!

    Best regards.

    Virgil
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 23 Jan 2012 Link to this post

    Hi Virgil,

    The problem that you experience is due to the incorrect implementation of the event handler - the resize delta is applied twice to the panes that are resized by the user. To avoid this you need to set the new width only to the pane of other rows and not that has triggered the event. Also, the "sender" of the OnClientResizing event of the RadPane is actually the pane's client-side object but not the splitter. Here is a slightly modified OnClientColResizing() function:
    function OnClientColResizing(pane, args)
    {
        var colNo = pane.get_id().match(/_col(\d+)_/)[1] - 1; //using regular expression to match the column index
     
        for (var i = 1; i <= 3; i++) {
            var rowSplitter = $find("row" + i + "_column_splitter");
     
            //check if the rowSplitter exists and if it is not the splitter containing the pane triggered the event
            if (rowSplitter != null && rowSplitter.get_id() != pane.get_splitter().get_id()) {
                var cPane = rowSplitter.getPaneByIndex(colNo);
                cPane.set_width(pane.get_width() + args.get_delta());
            }
        }
    }

    Regarding the row resizing, actually this is handled by the splitter, because you resizing the row is resizing the entire nested splitter's height.

    All the best,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top