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

Dock index value client side?

1 Answer 36 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Beth Krawczuk
Top achievements
Rank 1
Beth Krawczuk asked on 17 Oct 2008, 07:05 PM
Hi All,
I have a dock zone with dynamically created docks, that are stacked vertically in the collapsed state (and the user can reorder).  I would like to use a button outside of the zone that can essentially tab to the next dock (from the one that is selected) and expand it.  And continue to go through the collection of them and expand.

I would like to do it using javascript. Can I access the dock's index value (within the zone) client side?  And do I know the one with the focus by using the onClientCommand ()?

Thank you,
Beth

1 Answer, 1 is accepted

Sort by
0
Accepted
Petio Petkov
Telerik team
answered on 20 Oct 2008, 10:39 AM
Hello Beth,

If you use the OnClientCommand event, you will receive current RadDock as a first argument, e.g.
function RadDockClientCommand(dock,args)

    var currentdock = dock;
}


If you want to get a zone on the client you should use:
var zone = $find('RadDockZone1');
RadDockZone.get_docks() method will return a collection with all RadDocks in the zone, e.g.
var allRadDocks = zone.get_docks();

The code below illustrates how to expand a dock via javascript.
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
    <title>Untitled Page</title> 
    <script type="text/javascript">  
    function RadDockClientCommand(dock,args)  
    {    
        alert(dock.get_id());  
    }  
    var currentIndex=0;  
    function ExpandNextDock()  
    {  
        var zone = $find('RadDockZone1');  
        var docksCount = zone.get_docks().length;  
        var currentDock = zone.get_docks()[currentIndex];  
        if(currentIndex < docksCount)  
        {  
            currentDock.set_collapsed(false);  
            currentIndex++;  
        }  
        else  
        {  
            alert("RadDOCK with index"+currentIndex+"doesn't exist");  
        }  
          
    }  
    </script> 
</head> 
<body> 
    <form id="form1" runat="server">  
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
    <div> 
    <telerik:RadDockLayout ID="RadDockLayout1" runat="server">  
        <telerik:RadDockZone ID="RadDockZone1" runat="server" Width="300px">  
            <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock1" Text="RadDock1" 
            Collapsed="true" 
            OnClientCommand="RadDockClientCommand"/>  
            <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock2" Text="RadDock2" 
            Collapsed="true" 
             OnClientCommand="RadDockClientCommand"/>  
            <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock3" Text="RadDock3" 
            Collapsed="true" 
             OnClientCommand="RadDockClientCommand"/>  
            <telerik:RadDock ID="RadDock4" runat="server" Width="300px" Title="RadDock4" Text="RadDock4" 
            Collapsed="true" 
             OnClientCommand="RadDockClientCommand"/>  
        </telerik:RadDockZone> 
    </telerik:RadDockLayout> 
    <input type="button" value="expandNextDock" onClick="ExpandNextDock()"/>  
          
    </div> 
    </form> 
</body> 
</html> 
 
More about RadDock Client-Side API is available here:
1) Online help;
2) Online examples: Client-Side API;
3) Online examples: Client-Side Events;



Regards,
Petio Petkov
the Telerik team

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