TitlebarContainer image button onClientCommand not working

4 posts, 2 answers
  1. David
    David avatar
    30 posts
    Member since:
    Feb 2007

    Posted 26 Mar 2008 Link to this post

    Hello,

    I have created an image button in the titlebar of a RadDock and am trying to execute a command when the user clicks on this button.  I'm basically trying to get the RadDock to collapase or expand when this imagebutton is clicked.  I don't want to do a postback either...so it needs to hit JavaScript.

    ImageButton btnDocExpand = new ImageButton();
    btnDocExpand.ImageUrl = "Vista/Dock/rdExpand.gif";           
    btnDocExpand.OnClientClick = "btnExpand_ONCLICK";
    btnDocExpand.AlternateText = "Expand";
    btnDocExpand.ID = woAlert.title + "Expand";
    rdoAlert.TitlebarContainer.Controls.Add(btnDocExpand);


    Thanks!!

    Travis
  3. Answer
    Dimcho
    Admin
    Dimcho avatar
    45 posts

    Posted 27 Mar 2008 Link to this post

    Hi Ken,

    Thank you for contacting us.

    Please, look at the following code. It shows how to achieve the functionality you have described:

    aspx code :
    function btnExpand_ONCLICK()  
    {  
        var dock = $find("<%=RadDock1.ClientID %>");  
        var Collapsed = dock.get_Collapsed();  
        if(Collapsed)  
        {  
             dock.set_Collapsed(false);  
        }  
        else  
        {  
             dock.set_Collapsed(true);  
        }  
    } 

    If you want your page not to make a postback after a client click event just add return false at the end of bntExpand_ONCLICK() declaration.

     btnDocExpand.OnClientClick = "btnExpand_ONCLICK(); return false;" ; 

    Let me know, if you need further assistance.

    Kind regards,
    Dimcho
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  5. David
    David avatar
    30 posts
    Member since:
    Feb 2007

    Posted 27 Mar 2008 Link to this post

    I'm having a hard time locating the Dock with the find function.

    1 <telerik:RadDockLayout ID="rdlMain"  runat="server" EnableEmbeddedSkins="false" Skin="Vista">                             
    2 <telerik:RadDockZone ID="rdzMain" FitDocks="false" Orientation="vertical"  runat="server" Width="100%" BorderWidth="0" BorderColor="gray">                                   
    3 </telerik:RadDockZone>  
    4 </telerik:RadDockLayout> 


    Within rdzMain I am dynamically creating the docks.

    1 RadDock rdoAlert = new RadDock(); 
    2  
    3              
    4             //rdoAlert.Pinned = true; //doesn't allow dragging 
    5             rdoAlert.Text = woAlert.title; 
    6             rdoAlert.ID = woAlert.uID; 
    7             rdoAlert.UniqueName = woAlert.uID;             
    8             rdoAlert.Width = Unit.Percentage(100); 
    9             rdoAlert.DefaultCommands = Telerik.Web.UI.Dock.DefaultCommands.None; 
    10             rdoAlert.ToolTip = woAlert.toolTip; 
    11             rdoAlert.Title = woAlert.title; 
    12  
    13             rdoAlert.AutoPostBack = false; 
    14  
    15             Label lblDockTitle = new Label(); 
    16             lblDockTitle.Text = "  "+woAlert.title; 
    17             lblDockTitle.Font.Size = FontUnit.Point(11); 
    18             lblDockTitle.Font.Bold = true; 
    19  
    20             ImageButton btnDocExpand = new ImageButton(); 
    21             btnDocExpand.ImageUrl = "Vista/Dock/rdExpand.gif";    
    22              
    23             btnDocExpand.AlternateText = "Expand"; 
    24             btnDocExpand.ID = woAlert.title + "Expand"; 
    25              
    26             const string onClientClick = "btnExpand_ONCLICK('{0}', '{1}'); return false;"; 
    27             btnDocExpand.OnClientClick = string.Format(onClientClick, btnDocExpand.ClientID, "blue"); 
    28             rdoAlert.TitlebarContainer.Controls.Add(btnDocExpand); 
    29             rdoAlert.TitlebarContainer.Controls.Add(lblDockTitle);             
    30             System.Drawing.ColorConverter conv3 = new System.Drawing.ColorConverter(); 
    31             System.Drawing.Color c3 = (System.Drawing.Color)conv3.ConvertFromString("#69A637");             
    32             rdoAlert.TitlebarContainer.BackColor = c3; 
    33  
    34             rdoAlert.TitlebarContainer.ForeColor = System.Drawing.Color.Black; 
    35             rdoAlert.TitlebarContainer.Font.Size = FontUnit.Point(11); 
    36             System.Drawing.ColorConverter conv = new System.Drawing.ColorConverter(); 
    37             System.Drawing.Color c = (System.Drawing.Color)conv.ConvertFromString("#F6F6F6"); 
    38             rdoAlert.BackColor = c; 
    39  
    40             System.Drawing.ColorConverter conv2 = new System.Drawing.ColorConverter(); 
    41             System.Drawing.Color c2 = (System.Drawing.Color)conv2.ConvertFromString("#CCCCCC"); 
    42             rdoAlert.BorderColor = c2; 
    43             rdoAlert.ContentTemplate = Page.LoadTemplate(woAlert.url); 
    44             switch (woAlert.columnNum) 
    45             { 
    46                 case 0: //corresponds to the main docking area                    
    47                     rdzMain.Controls.Add(rdoAlert);                     
    48                     break; 
    49                 case 1: 
    50                     break; 
    51                 case 2: 
    52                     break; 
    53                 default: 
    54                     break; 
    55             } 

    The javascript example you gave hasn't worked for me as I can't seem to find anything within rdzMain.

    Thank for all the help so far!

    Travis
  7. Answer
    David
    David avatar
    30 posts
    Member since:
    Feb 2007

    Posted 27 Mar 2008 Link to this post

    Figured this out....just had to use the FindControl method see below...

    var dock1 = $find("<%= rdzMain.FindControl("widgetSetup").ClientID %>");

    Thanks!

    Travis
  8.
Back to Top