This is a migrated thread and some comments may be shown as answers.
Custom Command Image
2 Answers 72 Views
This is a migrated thread and some comments may be shown as answers.
ajit
Top achievements
Rank 1
ajit asked on 12 Jun 2009, 05:14 PM
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 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
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.
0
ajit
Top achievements
Rank 1
answered on 17 Jun 2009, 01:13 PM
Thanks Pero ..it resolved the issue.

Regards,
ajit
Tags
Dock
Asked by
ajit
Top achievements
Rank 1
Answers by
Pero
Telerik team
ajit
Top achievements
Rank 1
Share this question
or