This is a migrated thread and some comments may be shown as answers.

Custom Command Image

2 Answers 117 Views

Dock

This is a migrated thread and some comments may be shown as answers.

2 Answers, 1 is accepted

answered on 17 Jun 2009, 10:49 AM

Hello Ajit,

For changing the image whenever a custom command is clicked , I suggest that a DockToggleCommand is implemented which, on the OnClientCommand event, changes the css classes dynamically. The idea is to specify a different css classes to the CssClass and AlternateCssClass proprieties (for an example CssClass="commandstate1" AlternateCssClass="commandstate2") and alternate them whenever the custom command is invoked. Here is a sample project that implements the logic:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="CustomCommandImage219497._Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title></title> 
        
                <style type="text/css"> 
        
                    .commandstate1 
        
                    { 
        
                        width: 18px !important; 
        
                        background:url(Dock.gif)!important; 
        
                        border: 1px solid red; 
        
                    } 
        
                    .commandstate2 
        
                    { 
        
                        width: 18px !important; 
        
                        background:url(dock1.gif)!important; 
        
                        border: 1px solid blue; 
        
                    } 
        
                </style> 
        
                <script type="text/javascript"> 
        
                    function ChangeImage(dock, args) 
        
                    { 
        
                        var command = args.Command; 
        
                        //This is the command element. If you want to change something you should use commandElement.style 
        
                        var commandcommandElement = command.get_element(); 
        
                        if (command.get_state() == 1) { 
        
                            command.set_state(2); 
        
                            //write custom code here 
        
                        } 
        
                        else { 
        
                            command.set_state(1); 
        
                            //write custom code here 
        
                        } 
        
                    } 
        
                    function CustomClicked(dock, args) 
        
                    { 
        
                        var command = args.Command; 
        
                        //This is the command element. If you want to change something you should use commandElement.style 
        
                        var commandcommandElement = command.get_element(); 
        
                        commandElement.style.width = "12px"; 
        
                        commandElement.style.border= "3px solid red"; 
        
                    } 
        
                </script> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        
                </asp:ScriptManager> 
        
                <div> 
        
                    <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> 
        
                        <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="500px" Width="300px"> 
        
                            <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock1"> 
        
                                <ContentTemplate> 
        
                                    <br /> 
        
                                    1. RadDock 1 - Content 
        
                                    <br /> 
        
                                    <br /> 
        
                                </ContentTemplate> 
        
                                <Commands> 
        
                                   <telerik:DockCommand Name="Custom" OnClientCommand="CustomClicked" /> 
        
                                    <telerik:DockToggleCommand  
        
                                        CssClass="commandstate1" AlternateCssClass="commandstate2" 
        
                                        Text="CustomCommand1" AlternateText="CustomCommand2" 
        
                                        Name="MyCustomCommand" 
        
                                        OnClientCommand="ChangeImage" /> 
        
                                </Commands> 
        
                            </telerik:RadDock> 
        
                        </telerik:RadDockZone> 
        
                    </telerik:RadDockLayout> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

The event arguments "args" contain the commands of the RadDock and can be accessed by args.command (as specified in a JavaScript method in the source code below). So, if you want to dynamically change the style of a command, it can be done by changing the command's element style.

    
                    function CustomClicked(dock, args) 
        
                    { 
        
                        var command = args.Command; 
        
                        //This is the command element. If you want to change something you should use commandElement.style 
        
                        var commandElement = command.get_element(); 
        
                        commandElement.style.width = "12px"; 
        
                        commandElement.style.border= "3px solid red"; 
        
                    }

Best wishes,
Pero
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Custom Command Image

2 Answers, 1 is accepted