How to Hide Rad Splitter from Client

2 posts, 0 answers
  1. Eric
    Eric avatar
    37 posts
    Member since:
    Aug 2012

    Posted 08 Apr 2013 Link to this post

    Hello

    I want to HIDE & SHOW Rad Splitter from Client using jQuery, how do I achieve that?
  2. Vessy
    Admin
    Vessy avatar
    1382 posts

    Posted 11 Apr 2013 Link to this post

    Hi Eric,

    A way to hide the Splitter with jQuery is to add/remode a CSS class to it, whenever you want its displayed mode to be changed:
    <asp:Button ID="button1" runat="server" Text="Hide Splitter" OnClientClick="HideSplitter(); return false;"/>
    <asp:Button ID="button2" runat="server" Text="Show Splitter" OnClientClick="ShowSplitter(); return false;"/>
    <telerik:RadSplitter ID="radsplitter1" runat="server" Width="900px" Height="700px">
        <telerik:RadPane ID="RadPane1" runat="server"></telerik:RadPane>
        <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane>
    </telerik:RadSplitter>
    <script type="text/javascript">
        function HideSplitter() {
            $telerik.$("#radsplitter1").removeClass("shown");
            $telerik.$("#radsplitter1").addClass("hidden");
        }
        function ShowSplitter() {
            $telerik.$("#radsplitter1").removeClass("hidden");
            $telerik.$("#radsplitter1").addClass("shown");
        }
    </script>

    CSS:
    .hidden
    {
        display:none;
    }
    .shown
    {
        display:block;
    }


    Nevertheless, I highly recommend you to use the Splitter's Client-side API in order to achieve this functionality:
    <telerik:RadSplitter ID="radsplitter1" runat="server" Width="900px" Height="700px">
        <telerik:RadPane ID="RadPane1" runat="server"></telerik:RadPane>
        <telerik:RadPane ID="RadPane2" runat="server"></telerik:RadPane>
    </telerik:RadSplitter>
    <script type="text/javascript">
        function HideSplitter() {
            var splitter = $find("<%=radsplitter1.ClientID %>");
            splitter.set_visible(false);
        }
        function ShowSplitter() {
            var splitter = $find("<%=radsplitter1.ClientID %>");
            splitter.set_visible(true);
        }
    </script>

    I hope this information would be helpful for you.

    Kind Regards,
    Veselina Raykova
    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