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

Use custom commands to trigger event on control

2 Answers 103 Views
Dock
This is a migrated thread and some comments may be shown as answers.
tentonipete
Top achievements
Rank 1
tentonipete asked on 26 Jan 2009, 10:29 PM
I'm just getting started with Telerik controls.

I would just like a bit of advice using the RadDock. I need to populate the RadDock with various user controls programatically which I can do great.

BUT - all of the RadDocks need an edit area which expands when a custom command is clicked, rather like the BBC site.

What would be the best way to go about creating this functionality? I was thinking that a regular CollapsiblePanelExtender would be good for that but how can i make it happen using the custom commands in the RadDock?

Any thoughts or pointers would be greatly appreciated!

2 Answers, 1 is accepted

Sort by
0
Accepted
Nikolay Raykov
Telerik team
answered on 29 Jan 2009, 04:02 PM
Hi Joel,

You could create a custom command and add it to the Commands collections of RadDock. Then you could attach an event handler function for the OnClientCommand event in which you could toggle the state of the Panel.

Below is the declaration of the dock:

<telerik:RadDock ID="RadDock1" runat="server" Title="RadDock">  
                <Commands> 
                    <telerik:DockCommand Name="CustomCommand" OnClientCommand="OnClientCommand" /> 
                </Commands> 
                <ContentTemplate> 
                    <asp:Panel ID="Panel1" runat="server">  
                        Expanded State  
                    </asp:Panel> 
                    <ajax:CollapsiblePanelExtender ID="cpe1" runat="server" TargetControlID="Panel1" 
                        Collapsed="true"></ajax:CollapsiblePanelExtender> 
                </ContentTemplate> 
            </telerik:RadDock> 

You could add your user controls to the ContentTemplate from code-behind. When the users click on the custom command icon your event handler would be called:

<script type="text/javascript">  
        function OnClientCommand(dock, args)  
        {  
            var extender = $find('<%= cpe1.ClientID %>');  
            extender.togglePanel();  
        }  
    </script> 

In the event handler you get a reference to the client-side object of the CollapsiblePanelExtender control and toggle the state of the Panel.

Please find the attached file - it contains my test page that accomplishes your scenario. Please use it as a reference.

Best wishes,
Nikolay Raykov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
tentonipete
Top achievements
Rank 1
answered on 18 Feb 2009, 10:24 AM
Thanks. This answers my question.
Tags
Dock
Asked by
tentonipete
Top achievements
Rank 1
Answers by
Nikolay Raykov
Telerik team
tentonipete
Top achievements
Rank 1
Share this question
or