Inconsistent Pane Width

[Virgil Rodriguez]

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

[Dobromir]

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