Dock Client Side Event |UI Control for ASP.NET AJAX, C#, VB.NET

Dock Client Side Event in ASP.NET

Home > How to > Dock Client Event

Information to Dock Client-side Events

If you want your dock control to have the ability in response to some easy actions performed by the end users, you may need to use these client-side events. Therefore, these dock client-side events are extremely useful for developers to customizing the behavior of the UI Controls for ASP.NET AJAX.

Similar to other UI controls, the PerDock Control also offers several client-side events for developers. And this tutorial page aims to guide users on how to use these client-side events in the PerDock creating application.

Supported Dock Client-side Events

In this section, we list the client-side events that are supported by the dock control for customizing the behavior of control in response to the end user actions.

OnClientCommand: this event is triggered when the user clicks on a command icon in the dock title bar.
OnClientDockPositionChanging: this event is called when the user is about to drop the PerDock control.
OnClientDockPositionChanged: this event is called when the position of the PerDock Control is changed after a drag & drop action.
OnClientInitialize: this event is raised when the PerDock control is initialized.
OnClientDragStart: this event is raised when user starts to drag the PerDock control.
OnClientDrag: this event is called when user is dragging the PerDock control with the mouse.
OnClientDragEnd: this event occurs when user drops the PerDock control after dragging.
OnClientResizeStart: this event occurs when user starts to change the size of the PerDock control.
OnClientResizeEnd: you can call this event once the PerDock control is resized.

How to Use Dock Client-side Events

From this section, you will find the answer to the question that how to use above mentioned dock client-side events.

To be first, you need to write a javascript that can be called when the programming event occurs.
Then assign the name of the javascript function as the value of the corresponding property.

In order to help you have a better understanding of above dock client-side event applying tutorial, we here specifically attach a programming example. If you have any question in using these client-side events, please feel free to contact us via E-mail.

<script type="text/javascript">
        //<![CDATA[
            /**********************************************************
            Dock Events
            **********************************************************/
            function logEvent(eventInfo) {
                var EventLogConsole = $get("<%=EventLogConsole1.ClientID%>");
                EventLogConsole.innerHTML += eventInfo + "<br/>";
            }

            function OnClientDragStart(sender, eventArgs) {
                logEvent("You started dragging PerDock with ID " + sender.get_id() + ".");
            }

            function OnClientDragEnd(sender, eventArgs) {
                logEvent("You finished dragging PerDock with ID " + sender.get_id() + ".");
            }

            function OnClientDrag(sender, eventArgs) {
                logEvent("You are dragging PerDock with ID " + sender.get_id() + ".");
            }

            function OnClientDockPositionChanged(sender, eventArgs) {
                logEvent("You moved PerDock with ID " + sender.get_id() + ".");
            }

            function OnClientDockPositionChanging(sender, eventArgs) {
                logEvent("You are moving PerDock with ID " + sender.get_id() + ".");
            }

            function OnClientCommand(sender, eventArgs) {
                logEvent("You clicked " + eventArgs.Command.get_name() + " on PerDock with ID " + sender.get_id() + ".");
            }

            function OnClientResizeStart(sender, eventArgs) {
                logEvent("You started resizing PerDock with ID " + sender.get_id() + ".");
            }

            function OnClientResizeEnd(sender, eventArgs) {
                logEvent("You finished resizing PerDock with ID " + sender.get_id() + ".");
            }

            function OnClientInitialize(sender, eventArgs) {
                logEvent("PerDock with ID " + sender.get_id() + " is initialized.");
            }
        
        //]]>
</script>

Related Dock Programming Events

If you want the dock control to respond to some complex user actions that can not be fulfilled by the client-side events, you can use these dock server-side programming events and APIs.

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control ASP.NET AJAX Button UI Control ASP.NET AJAX Calendar UI Control ASP.NET AJAX NavigationBar UI Control ASP.NET AJAX Captcha UI Control ASP.NET AJAX Color Editor UI Control ASP.NET AJAX ComboBox UI Control ASP.NET AJAX DataPager UI Control

ASP.NET AJAX Dock UI Control

Overview Getting Started

Element

Zones Commands

Templates

Client Prpgramming

Dock Event

Server Programming

Dock Event ASP.NET AJAX DropDownList UI Control ASP.NET AJAX DropDownTree UI Control ASP.NET AJAX HtmlEditor UI Control ASP.NET AJAX FileManager UI Control ASP.NET AJAX Filter UI Control ASP.NET AJAX Input UI Control ASP.NET AJAX ListBox UI Control ASP.NET AJAX ListView UI Control ASP.NET AJAX ToolBar UI Control ASP.NET AJAX TabControl UI Control ASP.NET AJAX Menu UI Control ASP.NET AJAX ToolTip UI Control