Custom Command Image

3 posts, 0 answers
  1. ajit
    ajit avatar
    46 posts
    Member since:
    Jun 2009

    Posted 12 Jun 2009 Link to this post

    Hi ,
             I am generating docks dynamically. I need to access the custom command css class on the client side so tht i am able to change the image whenever custom command is clicked. Is this possible.

    Any ideas ??


    thanks

    Ajit
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 17 Jun 2009 Link to this post

    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.
  3. ajit
    ajit avatar
    46 posts
    Member since:
    Jun 2009

    Posted 17 Jun 2009 Link to this post

    Thanks Pero ..it resolved the issue.

    Regards,
    ajit
Back to Top