Beth Krawczuk
Top achievements
Rank 1
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
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
0
Accepted
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.
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.
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> |
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.