Allow Splitter to behave like CollapsiblePanel

[Richard]

Good afternoon,

I'm looking to replace a CollapsiblePanelExtender with a Telerik control. The closest to this seems to be a RadSplitter.

How can I make a horizontal RadSplitter, which contains two panes, change its height to keep one pane at the top as a constant, but expand and collapse with a second pane. I'm using a button in the top pane to control the second pane, rather than a RadSplitterBar.

<telerik:RadSplitter RenderMode="Lightweight" ID="RadSplitter1" runat="server" Width="900px" Orientation="Horizontal">
    <telerik:RadPane ID="RadPane1" runat="server" Height="30px" CssClass="collapsePanelHeader">
        <div style="padding:5px; padding-left:20px; cursor:pointer; vertical-align:middle;" onclick="ToggleCollapsePane()">
            <div style="float:left;">
                <asp:Label ID="lblOptionsHdr" runat="server" Text="Filter Options" Font-Bold="True" />
                </div>
        </div>
    </telerik:RadPane>
    <telerik:RadPane ID="RadPane2" runat="server" Height="270px" CssClass="collapsePanelContent">
        <div id="divContent" style="padding:20px; vertical-align:middle;">
            <table style="vertical-align:top; width:100%; border-spacing:5px; padding:5px;">
                <tr>
                    <td>
......... several filter options (dropdown lists, radiobuttons)
                    </td>
                </tr>
            </table>
        </div>
    </telerik:RadPane>
</telerik:RadSplitter>

When the <div> in pane 1 is clicked it should toggle pane 2, and the splitter adjust its height accordingly:

        function ToggleCollapsePane() {
            var splitter = $find("<%= RadSplitter1.ClientID %>");
            var pane = splitter.getPaneById("<%= RadPane2.ClientID %>");

            if (pane.get_collapsed()) {
                pane.expand();
                splitter.resize(900, 303);
            } else {
                pane.collapse();
                splitter.resize(900, 33);
            }
        }

Is what I'm trying to achievable?  Or is there another Telerik control that does this?

Kind regards,

Richard

[Rumen]

Hi Richard,

The behavior you're trying to achieve can be implemented more effectively using the RadPanelBar control instead of the RadSplitter. RadPanelBar is designed specifically for scenarios that involve collapsible panels with sections that can expand or collapse, similar to the CollapsiblePanelExtender you're replacing.

Please check the RadPanelbar demos and let me know if you have any further questions - https://demos.telerik.com/aspnet-ajax/panelbar/examples/overview/defaultcs.aspx. 

Regards,
Rumen
Progress Telerik

[Richard]

Hi Rumen,

Many thanks for your reply.

I did previously try using a RadPanelBar but I got stuck due to the filter items (dropdown lists, radio buttons, text boxes) being used as Control Parameters in Select Parameters for the Select Command of a SqlDataSource.  That's why I tried to use a RadSplitter instead.

For instance, I have a dropdown list asp:DropDownList ID="ddlBLB"  in a ContentTemplate of a PanelBarItem. 

I have tried various ways of accessing the control via the ControlID such as:

 <asp:ControlParameter ControlID="RadPanelBar1$ddlBLB" DefaultValue="0" Name="blb_code" PropertyName="SelectedValue" Type="String" />

Also, ddlBLB, ctl00_ContentPlaceholder1_RadPanelBar1_ddlBLB etc.

I get an error each time:

Could not find control 'ddlBLB' in ControlParameter 'blb_code'.

I've read through this article:

Telerik Web Forms PanelBar Templates Accessing Controls Inside Templates - Telerik UI for ASP.NET AJAX

It's not possible to use Literal content:

Literal content ('<asp:ControlParameter ControlID="$find('') is not allowed within a 'System.Web.UI.WebControls.ParameterCollection'.

Can you assist in how I can identify the controls in the RadPanelItem ContentTemplate?

Many thanks,

Richard

[Rumen]

Hi Richard,

The ControlParameter fails for controls inside a ContentTemplate because it relies on direct access to the control's ID within the page's naming hierarchy. Since controls in templates are encapsulated within their own naming containers, ControlParameter cannot resolve their IDs automatically, requiring programmatic access instead.

To access controls within a ContentTemplate of a RadPanelItem when using them as control parameters in a SqlDataSource, you need to handle this programmatically in the code-behind. Here's how you can achieve this:

Steps to Access Controls in ContentTemplate

1. Ensure Unique IDs: Make sure that the IDs of your controls within the ContentTemplate are unique within the page to avoid conflicts.

2. Find Control in Code Behind: Access the control programmatically using the FindControl method in the code-behind. This is necessary because controls within a ContentTemplate are part of a naming container. You can find examples here.

3. Set Control Parameter Programmatically: Set the control parameter in the Page_Load or another appropriate event in your code-behind.

Example Solution

Here's an example:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // Assuming ddlBLB is inside the first RadPanelItem
        RadPanelItem item = RadPanelBar1.Items[0];
        DropDownList ddlBLB = (DropDownList)item.FindControl("ddlBLB");

        if (ddlBLB != null)
        {
            SqlDataSource1.SelectParameters["blb_code"].DefaultValue = ddlBLB.SelectedValue;
        }
    }
}

Use the FindControl method to locate the DropDownList within the RadPanelItem. This method is essential because the ContentTemplate acts as a naming container, making direct access by ID not feasible. Once you have a reference to the control, you can set the SelectParameter for the SqlDataSource programmatically.

If you continue to face issues or have further questions, feel free to provide more details about your setup, and I'll be glad to assist further.

Regards,
Rumen
Progress Telerik