Dock Element Command|UI Control for ASP.NET AJAX, C#, VB.NET

Dock Element Command in ASP.NET

Home > How to > Dock Command

Information to Dock Element Command

The dock element command is often placed at the top right corner of the PerDock title bar with corresponding command icon. And users can perform the command function by clicking the command icon. The PerDock control allows you to add built-in commands or your own custom commands.

From this online tutorial page, you will not only learn how to add combined built-in commands to the PerDock control but also know how to integrate custom commands to the PerDock control.

Built-in Commands

The PerDock control offers several built-in commands which will perform function without any programming from developers. And you can use these built-in commands with the corresponding properties.

None: if you set the command property to None, there will be no command icon appearing on the PerDock title bar.
ExpandCollapse: if you set the DefaultCommands property to ExpandCollapse value, there will be a single Expand icon appearing on the PerDock title bar when the PerDock control is in its minimized state. And users can open the content area of the PerDock control on clicking the Expand command icon(). On the contrary, there will be a single Collapse icon showing on the PerDock title bar when the PerDock control shows its content area. And you can minimize the PerDock control by clicking the Collapse command icon().
Close: after you set the DefaultCommands property to close, there will be a Close command icon(), similar to a deletion sign, showing in the PerDock title bar. The PerDock control will exit from the web page once the user click this Close command icon.
PinUnpin: there will be a single Pin command icon on the dock title bar when the PerDock Control is unpinned. And the PerDock control can not be dragged if you click the Pin command icon(). there will be a single Unpin command icon on the dock title bar when the PerDock Control is pinned. And the PerDock control can be movable if you click the Unpin command icon().
All: if you set the DefaultCommands property to All, then all these built-in command icons will be showed on the dock title bar (Pin or Unpin icon, followed by Collapse or Expand icon and followed by the Close icon.)

Here we provide two programming examples for you on how to use these built-in commands.

<kettic:PerDock runat="server" ID="PerDock1" Title="ExpandCollapse + Close" EnableRoundedCorners="true">
                            
                            <Commands>
                                <kettic:DockCloseCommand AutoPostBack="True" ></kettic:DockCloseCommand>
                                <kettic:DockExpandCollapseCommand AutoPostBack="true" />                                                                                                
                            </Commands>
                        </kettic:PerDock>

Screenshot of above programming example.

<kettic:PerDock runat="server" ID="PerDock2" DefaultCommands="PinUnpin,Close" Title="PinUnpin + Close"
            Top="220px" Left="820px" EnableRoundedCorners="true" >        
        </kettic:PerDock>

Screenshot of above programming example.

Custom Commands

If above built-in commands can not meet your needs, you can add your own command to the dock title bar by using the Command property. Following sample code will show you how to add custom command to the PerDock control.

<kettic:PerDock runat="server" ID="PerDock3" Title="Custom Commands + Close"        EnableRoundedCorners="true">
                            <Commands>
                                <kettic:DockCloseCommand AutoPostBack="True" ></kettic:DockCloseCommand>
                                <kettic:DockCommand AutoPostBack="true" Name="Custom Test Command" OnClientCommand="CustomCommand">
                                </kettic:DockCommand>
                                
                            </Commands>
                            
                        </kettic:PerDock>

Javascript codeï¼
<script type="text/javascript">
        function CustomCommand(dock, args) {
            //You can implement your custom logic in this method
            if (!confirm("You clicked " + args.Command.get_name() + ". Do you want to submit the page?")) {
                args.set_cancel(true);
            }
        }    
    </script>

Screenshot of above programming example.

Information to Dock Element Command

Built-in Commands

Custom Commands

Related Dock Element Tutorials