RadSplitter + Master Page

2 posts, 0 answers
  1. Kaushal
    Kaushal avatar
    47 posts
    Member since:
    Sep 2010

    Posted 05 May 2011 Link to this post

    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
  2. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 06 May 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top