Use custom commands to trigger event on control

[tentonipete]

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!

[Nikolay Raykov]

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.

[tentonipete]

Thanks. This answers my question.