onclientclick on the dock content

6 posts, 0 answers
  1. Ashley
    Ashley avatar
    22 posts
    Member since:
    Jul 2010

    Posted 27 Aug 2010 Link to this post

    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
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 31 Aug 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ashley
    Ashley avatar
    22 posts
    Member since:
    Jul 2010

    Posted 31 Aug 2010 Link to this post

    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
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 03 Sep 2010 Link to this post

    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
  6. Ashley
    Ashley avatar
    22 posts
    Member since:
    Jul 2010

    Posted 28 Sep 2010 Link to this post

    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
  7. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 30 Sep 2010 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017