Hi,
How can i Expand and Collapse the WebSplitter on click of an asp button/html button?
Arati
Hello,
Please take a look at the sample below:http://samples.infragistics.com/2008.2/webfeaturebrowser/default.htm
Hope this helps.
I need to collapse/expand websplitter pane using javascript.
is there any api or javascript with which i can collapse/expand the websplitter on click of a button.
Hi Arati,
That api belongs to SplitterPane object. The get_panes() returns array of them. Below is example:
<script type="text/javascript">function togglePane(){ var splitter = $find('WebSplitter1'); var pane0 = splitter.get_panes()[0]; pane0.set_collapsed(!pane0.get_collapsed());}</script>
<input type="button" onclick="togglePane()" value="toggle" /><ig:WebSplitter ID="WebSplitter1" runat="server" Height="40px" Width="400px"> <Panes> <ig:SplitterPane runat="server" CollapsedDirection="NextPane"></ig:SplitterPane> <ig:SplitterPane runat="server"></ig:SplitterPane> </Panes></ig:WebSplitter>
Hi Viktor,
I use a WebSplitter with two panes and collapse the left pane. I need to preserve the state of the splitter pane if it is collapsed and so when I refresh the page the Pane should be loaded collapsed. How do I save the state of the collapsed pane ? Below is how I tried to do it, but it is not working. Would you please tell me how to do.
Thank you,
Bhargavi
<body class="itemsbrowser popupframe"> <script type="text/javascript"> function PreserveState() { var splitter = $find('webSplitter'); var pane0 = splitter.get_panes()[0]; var collapsedPaneID = pane0.get_collapsed(); SetCookie('collapsedPaneID', collapsedPaneID); } function SplitterLoaded(object, args) { var splitter = $find('webSplitter'); var pane0 = splitter.get_panes()[0]; var collapsedPaneID = GetCookie('collapsedPaneID'); pane0.set_collapsed(collapsedPaneID); } function SetCookie(sName, sValue) { document.cookie = sName + '=' + escape(sValue) + ';'; } function GetCookie(sName) { var docCookie = document.cookie; if(docCookie.length>0) { var begin = docCookie.indexOf(sName + '='); if(begin != -1) { end = docCookie.indexOf(';', begin); if(end == -1) end = docCookie.length; return unescape(docCookie.substring(begin + sName.length + 1, end)); } } return null; } </script> <form id="Form1" method="post" runat="server"> <div class="lm_container"> <div class="lm_top itemsbrowser-top"> <usc:Header id="headerControl" runat="server"/> </div> <div class="lm_center itemsbrowser-center" style="overflow:auto;"> <cc1:WebSplitter ID="webSplitter" runat="server" SkinID="VSplitter" Height="100%" Width="100%" OnClientLoaded="SplitterLoaded"> <Panes> <cc1:SplitterPane runat="server" CollapsedDirection="PreviousPane" OnUnload="PreserveState();"> <Template>
</Template> </cc1:SplitterPane> <cc1:SplitterPane runat="server" MinSize="425px"> <Template> <div style="position:relative; height:100%; width:100%; overflow:auto;"> <est:ItemsBrowserGrid id="ItemsBrowserGrid" runat="server" /> </div> </Template> </cc1:SplitterPane> </Panes> </cc1:WebSplitter> </div> <div class="lm_bottom lm_empty itemsbrowser-bottom"> </div> </div>
Hi Bhargavi,
Similar operations are beyond features of WebSplitter. I can give you only recommendations.
Function/handler such as OnUnload is pure server feature. I am not sure how OnClientLoaded can be used.If you want to process "initialization" event on client, then I can suggest you to use somethinng like<ig:WebSplitter ID="webSplitter" ...> <ClientEvents Initialize="SplitterLoaded" />In this case SplitterLoaded will have first param which points to webSplitter, so no need in $find.If you want to process unload event, then you may try to use something like<body onunload="PreserveState()">Also keep in mind that $find expects not ID of control, but ClientID, so you should adjust your codes for that.If you "get" some value from cookie which you want to use for properties of control, then that value should have correct data type. The value of String "false" is illegal for set_collapsed(), so, you should convert it to Boolean false.
I also suggest you to insert debugger; line at the top of your PreserveState and SplitterLoaded functions and step into codes to see what happens, if function is called and where exception is raised.
Thank you so much Viktor!
I used the <ClientEvents Initialize="SplitterLoaded"/> and it worked. Thanks for the caution on the datatype of the value to be passed to set_collapsed(). I completely overlooked that.
Regards,
Bhargavi R.
I have one more problem with UltraWebNavigator in UltraWebMenu. Could you please help me to solve it.
I have a web menu with a submenu. When I hover over the menu item that has the submenu the submenu hides behind the main menu. How to make the submenu appear over the main menu? Below is the code for the Webmenu I have:
<igx:UltraWebMenuEx id="contextMenu" runat="server"> <Levels> <ignav:level levelhoverclass="igmenu-LevelHover" levelclass="igmenu-LevelClass" index="0" levelcheckboxes="False"/> <ignav:level levelhoverclass="igmenu-LevelHover" levelclass="igmenu-LevelClass" index="1" levelcheckboxes="False"/> </Levels> <Items> <ignav:item tagstring="Add" text="Add"/> <ignav:item separator="True"/> <ignav:item tagstring="Recycle" text="Recycle"/> <ignav:item tagstring="Rename" text="Rename"/> <ignav:item separator="True"/> <ignav:item tagstring="ShowDetails" text="Show Details"> <Items> <ignav:item tagstring="Description" text="Description"/> <ignav:item tagstring="Size" text="Size"/> <ignav:item tagstring="None" text="None"/> </Items> </ignav:item> </Items> <MenuClientSideEvents ItemClick="$Navigator.contextMenu_ItemClick" /> </igx:UltraWebMenuEx>
Hi Rajana,
I guess you use some kind of extension, because I could not find UltraWebMenuEx. I tested UltraWebMenu in splitter and it worked ok. If you think that there is an issue in menu, then I suggest you to build a simple sample (aspx file) which can be used to reproduce and submit a report at http://es.infragistics.com/support/ask-for-help.aspx