This is a migrated thread and some comments may be shown as answers.

Dock Expand / Collapse at Client Side

1 Answer 71 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Muralidharan Ramakrishnan
Top achievements
Rank 1
Muralidharan Ramakrishnan asked on 28 Nov 2008, 02:57 AM
Hi,

We are trying to implement an expand / collapse functionality for all docks at a dockzone. Using the client objects set_collapased function we are able to collapse the docks successfully but we are unable to expand back the docks. The documentation says we can use set_collapsed with a false parameter to expand docks, but it doesn't work. Pl help

Here is the client script we implemented:

 

function ExpandCollapseAllInZone(zoneId, expanded)

 

{

 

var zone = $find("<%= radDockingZone.ClientID %>");

 

 

if (zone) {

 

 

var docks = zone.get_docks();

 

 

for (var i in docks) {

 

 

if (expanded == 'true') {

 

//attempt to expand all the docks
//#####################the following statement does not work##################
docks[i].set_collapsed(

'false');

 

}

 

else {

 

//attempt to collapse all the docks
//#####################this statement works##################
docks[i].set_collapsed(

'true');

 

}

docks[dock].updateClientState();

 

}

 

 

}

}

1 Answer, 1 is accepted

Sort by
0
Petko
Telerik team
answered on 28 Nov 2008, 01:31 PM
Hello Muralidharan,

I prepared a small sample for you, that shows how to achieve the desired behavior.
ASPX:

<body> 
    <form id="form1" runat="server">  
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
    <script type="text/javascript">  
        function button_click()  
        {     
            var zone  = $find("RadDockZone1");  
            var docks = new Array();  
            docks = zone.get_docks();  
            for(var i=0;i<3;i++)  
            {  
                if(docks[i].get_collapsed())  
                    docks[i].set_collapsed(false);  
                else  
                    docks[i].set_collapsed(true);  
            }  
            var a;  
        }  
    </script> 
    <div> 
        <div style="float:left">  
        <telerik:raddocklayout ID="raddocklayout1" runat="server">  
            <telerik:RadDockZone ID="RadDockZone1" runat="server" Width="300">  
                <telerik:RadDock ID="RadDock1" runat="server">  
                <ContentTemplate> 
                    <asp:Calendar ID="Calendar1" runat="server"></asp:Calendar> 
                </ContentTemplate> 
                </telerik:RadDock> 
                <telerik:RadDock ID="RadDock2" runat="server">  
                 <ContentTemplate> 
                    <asp:Calendar ID="Calendar2" runat="server"></asp:Calendar> 
                </ContentTemplate> 
                </telerik:RadDock> 
                <telerik:RadDock ID="RadDock3" runat="server">  
                 <ContentTemplate> 
                    <asp:Calendar ID="Calendar3" runat="server"></asp:Calendar> 
                </ContentTemplate> 
                </telerik:RadDock> 
            </telerik:RadDockZone> 
        </telerik:raddocklayout> 
        </div> 
        <input type="button" value="toggle" onclick="button_click()" style=" float:left"/>  
    </div> 
    </form> 
</body> 

Hope this helps you. If not, please send us more details about your scenario and the behavior, that you want to implement.

Greetings,
Petko
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Dock
Asked by
Muralidharan Ramakrishnan
Top achievements
Rank 1
Answers by
Petko
Telerik team
Share this question
or