Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

onclientclick on the dock content

5 Answers 81 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Ashley
Top achievements
Rank 1
Ashley asked on 27 Aug 2010, 04:39 PM
Hi all,

I want to make the dock command have an onclientclick command rather than have it as a button on the dock header, is there any way to do this?

regards,

Ash

5 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 31 Aug 2010, 03:25 PM
Hi Ash,

You could use the OnClientCommand client-side event of the RadDock to achieve your specific scenario. The following example demonstrates how to handle this event: http://demos.telerik.com/aspnet-ajax/dock/examples/commands/defaultcs.aspx. Take a closer look at the .aspx markup and the code behind.

Best wishes,
Pero
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Ashley
Top achievements
Rank 1
answered on 31 Aug 2010, 04:43 PM
Hi, sorry about that i wasn't particularly specific.
I want the acual content to be clickable like a graph withen the dock for example

regards,

Ash
0
Pero
Telerik team
answered on 03 Sep 2010, 08:47 AM
Hi Ashley,

I am still not quite sure what do you want to achieve with the commands of the dock control.

You could fire all of the built-in commands, like Close, ExpandCollapse, and PunUnpin, as shown in the following source code. Moreover, a custom command can also be raised by calling the dock.raiseCommand(args) method, also shown in the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="RadScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
        function OnCommand(dock, args)
        {
            if (args.Command)
                alert(args.Command.get_name());
            if (args.CommandName)
                alert(args.CommandName);
        }
        function Button1_onclick(button)
        {
            var name = button.value;
            var dock = $find("RadDock1");
            switch (name)
            {
                case "Close":
                    dock.set_closed(!dock.get_closed());
                    break;
                case "ExpandCollapse":
                    dock.set_collapsed(!dock.get_collapsed());
                    break;
                case "PinUnpin":
                    dock.set_pinned(!dock.get_pinned());
                    break;
                case "CustomCommand":
                    executeCustomCommand(dock);
                    break;
            }
        }
        function executeCustomCommand(dock)
        {
            //raise custom command
            var cancelArgs = new Sys.CancelEventArgs();
            cancelArgs.CommandName = "CUSTOM COMMAND";
            dock.raise_command(cancelArgs);
            if (cancelArgs.get_cancel())
            {
                return;
            }
            dock.updateClientState();
            dock.conditionalPostback();
        }
 
    </script>
    <div>
        <br />
        <input id="Button1" type="button" value="Close" onclick="return Button1_onclick(this)" /><br />
        <input id="Button2" type="button" value="ExpandCollapse" onclick="return Button1_onclick(this)" /><br />
        <input id="Button3" type="button" value="PinUnpin" onclick="return Button1_onclick(this)" /><br />
        <input id="Button4" type="button" value="CustomCommand" onclick="return Button1_onclick(this)" /><br />
        <br />
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"
                OnClientCommand="OnCommand" DefaultCommands="None" Top="400" Left="400">
                <ContentTemplate>
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                    CONTENT
                    <br />
                    <br />
                    <br />
                    <br />
                    <br />
                </ContentTemplate>
            </telerik:RadDock>
        </telerik:RadDockLayout>
    </div>
    </form>
</body>
</html>

If this does not help please provide more information about your scenario (a preview, or screenshot will help us a lot).


Regards,
Pero
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Ashley
Top achievements
Rank 1
answered on 28 Sep 2010, 10:40 AM
Hi Pedro,

First of all apologies for late reply,
I will try to explain more clearly, if the user clicks the graph (content example) rather than the dock itself I want a javascript function to be called when that action is made.

regards,

Ash
0
Rumen
Telerik team
answered on 30 Sep 2010, 12:31 PM
Hello Ashley,

If you get you right, you want to attach a click event to the content area of RadDock. Here is an example on how to do that by pressing an input button:

<script type="text/javascript">
function ButtonClick() {
    var dock = $find("RadDock1");
    var contentElement = dock.get_contentContainer();
    var dockElement = dock.get_element();
 
    ///Attach a handler to dblclick event
    $telerik.addExternalHandler(contentElement, "click", HandlerMethod);
}
var HandlerMethod = function () {
    alert("Dock clicked!");
}
</script>
<telerik:RadDockLayout ID="RadDockLayout1" runat="server">
    <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
        <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title">
            <ContentTemplate>
                <br />
                <br />
                <br />
                <br />
                <br />
                CONTENT
                <br />
                <br />
                <br />
                <br />
                <br />
            </ContentTemplate>
        </telerik:RadDock>
    </telerik:RadDockZone>
</telerik:RadDockLayout>
<input type="button" value="Attach Click Event to RadDock's content area!" onclick="ButtonClick(); return false;" />


Sincerely yours,
Rumen
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Dock
Asked by
Ashley
Top achievements
Rank 1
Answers by
Pero
Telerik team
Ashley
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or