RadSplitter + Master Page

[Kaushal]

Hi,

Here I have RadSplitter control in master page which I need to collapse on click of some check box. Both check box and Splitter in master page only. I have applied JS as below but it can not find splitter control (It returns null in $find()).

JS which is in RadBlock

<telerik:RadCodeBlock runat="server" ID="radCodeBlock">
        <script type="text/javascript">

function onCheckBoxClick(chk) {
   debugger;
   if (chkText == "Toggle ToolBar") {
        var splitter = $find("<%= MainSplitter.ClientID %>");
        var pane = splitter.getPaneById("TopPane");
        var isCollapseSuccess = pane.collapse();
    }
}   
</script>
</telerik:RadCodeBlock>

HTML Code:

<telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"
               Orientation="Horizontal">             

                <telerik:RadPane ID="TopPane" runat="server" Height="100" Scrolling="none" >
                    <!-- Place the content of the pane here -->

                </telerik:RadPane>
</telerik:RadSplitter>

Please help me to resolve this.

Thanks & Regards,

Kaushal Jani

[Svetlina Anati]

Hi Kaushal,

 The radPane is a server control as the RadSplitter and you should evaluate the ClientID since the MasterPage is an INaming Container. Any server control changes its ID when it is inside an INaming Container and the actual ClientID should be used when using javascript - this is so for standard ASP.NET controls as well.


This being said, you should modify your code as follows:

function onCheckBoxClick(chk) {
    if (chkText == "Toggle ToolBar") {
        var splitter = $find("<%= MainSplitter.ClientID %>");
        var pane = splitter.getPaneById("<%= TopPane.ClientID%>");
        var isCollapseSuccess = pane.collapse();
    }
}

In addition, if you use the splitter only for that, you can skip referencing it and simplify your code as follows:

function onCheckBoxClick(chk) {
    if (chkText == "Toggle ToolBar") {
        var pane = $find("<%= TopPane.ClientID%>");
        var isCollapseSuccess = pane.collapse();
    }
}

I hope that my reply is helpful, let me know how it goes.

All the best,
Svetlina
the Telerik team