CustomControl and clickable contents RSS

• • Reply
  

  Pizana

  Member

  56 Points

  71 Posts

  CustomControl and clickable contents

  Jan 25, 2012 04:10 PM|LINK

  Hey everyone,

   

  I am working on a CustomControl that inherits from a LinkButton.

   

  In said LinkButton, I am adding a label control, and 5 gif images, which are organized in a Table.

  The button works fine and everything, the problem is that the button is not clickable on the other child areas in Internet Explorer.
  
  For example, say Ive got a button, and I click over the title, which is the Label I added, the button will not fire, same for the images. However, if i click where there is nothing (only button), the button does the click and calls a posback, which is what is expected.
  
  Does anyone know how i could fix this? or make the child controls clickable and send the click event up to the contaning contorl?

   

  All help appreciated! Thanks!

• • Reply
  

  Decker Dong ...

  All-Star

  118619 Points

  18779 Posts

  Re: CustomControl and clickable contents

  Jan 27, 2012 01:02 AM|LINK

  Hello：）
  Please show us your codes including your usercontrol，and your aspx page……

  Reguards！ 

• • Reply
  

  denstorti

  Member

  148 Points

  56 Posts

  Re: CustomControl and clickable contents

  Jan 31, 2012 03:47 PM|LINK

  Please, some code.

  Regards,
  
  Denis Storti da Silva
  
  Mark as answer if it helped you! Thanks
  
• • Reply
  

  Pizana

  Member

  56 Points

  71 Posts

  Re: CustomControl and clickable contents

  Feb 01, 2012 01:33 PM|LINK

  Here is the code for te custom control (ommited code for images, as its repetitive)
  
  

   

  using System;
  using System.Collections.Generic;
  using System.ComponentModel;
  using System.ComponentModel.Design;
  using System.Linq;
  using System.Text;
  using System.Web;
  using System.Web.UI;
  using System.Web.UI.WebControls;
  using System.Resources;
  using System.IO;
  
  
  namespace RDCTools
  {
      [
      DefaultEvent("Button"),
      DefaultProperty("Name"),
      Designer(typeof(RDCButtonDesigner))
      ]
      public class RDCButton : LinkButton, INamingContainer
      {
          private LinkButton mainButton;
          private Label titleLabel;
          private Image redAlarm;
          private Image yellowAlarm;
          private Image orangeAlarm;
          private Image blueAlarm;
          private Image purpleAlarm;
          
  
          private string alarmStringCode;
          private string titleText;
          private bool lockedControl;
          private string lockPath;
          private bool alarmStringSmall;
          private bool alarmStringBig;
          
  
         
  
  
  
  
          #region Properties delegated to child controls
  
  
          [
         Bindable(true),
         Category("Appearance"),
         DefaultValue(""),
         Description("The text to display on the Button")
         ]
          public string ButtonText
          {
              get
              {
                 
                  return titleText;
              }
              set
              {
                 
                  titleText = value;
              }
          }
  
  
          [
        Bindable(true),
        Category("Behavior"),
        DefaultValue(""),
        
        Description("Alarm String code")
        ]
          public string alarmString
          {
              get
              {
                  return alarmStringCode;
              }
              set
              {
                 alarmStringCode = value;
              }
          }
  
  
          [
         Bindable(true),
         Category("Behavior"),
         DefaultValue(""),
         Description("Specifies whether the control is locked")
         ]
          public bool ControlLock
          {
              get
              {
  
                  return lockedControl;
              }
              set
              {
  
                  lockedControl = value;
              }
          }
  
          
  
  
          #endregion Properties delegated to child controls
  
    
  
  
  
          #region overriden events
          protected override void CreateChildControls()
          {
              Controls.Clear();
  
            
  
  
  
              
             
              mainButton = new LinkButton();
              mainButton.ID = "LinkMainButton";
              mainButton.Style.Add(HtmlTextWriterStyle.TextDecoration, "none");
              mainButton.Width = this.Width;
              mainButton.Height = this.Height;
         
              
  
  
              titleLabel = new Label();
              titleLabel.ID = "titleLabel1";
              titleLabel.Text = titleText;
              titleLabel.Style.Add(HtmlTextWriterStyle.Width, this.Width.Value.ToString());
              titleLabel.Style.Add(HtmlTextWriterStyle.WhiteSpace, "nowrap");
              
  
  
              redAlarm = new Image();
             //image code
              
      
              orangeAlarm = new Image();
          //image code
  
              yellowAlarm = new Image();
      //image code
  
              blueAlarm = new Image();
   //image code
  
              purpleAlarm = new Image();
    //image code
              
                        
  
              Table orgTableLabel = new Table();
     //table code
  
  
  
              Table orgTableAlarms = new Table();
     //table code
  
              TableRow orgRow1 = new TableRow();
     //tablerow code
  
              TableRow orgRow2 = new TableRow();
     //tablerow code
  
              TableCell orgLabel = new TableCell();
     //tablecell code
              
              
  
  //create cells
              TableCell orgRed = new TableCell();
              orgRed.ID = "orgRedCell1";
              TableCell orgYellow = new TableCell();
              orgYellow.ID = "orgYellowCell1";
              TableCell orgOrange = new TableCell();
              orgOrange.ID = "orgOrangeCell1";
              TableCell orgBlue = new TableCell();
              orgBlue.ID = "orgBlueCell1";
              TableCell orgPurple = new TableCell();
              orgPurple.ID = "orgPurpleCell1";
  
        
  
  
  
  
  
              LiteralControl divstart = new LiteralControl("<div id=\"jsDiv\" style=\"Width: 100%; Height: 100%;\" onclick=\"parent.document.getElementById('<%=" + this.ID + ".ClientID %>').click();\" onmouseover=\"this.style.cursor='pointer';\">");
              LiteralControl divend = new LiteralControl("</div>");
  
              LiteralControl divstartImg = new LiteralControl("<div id=\"imgDiv\" style=\"width: 18px; height: 18px; background:url('" + lockPath + "'); background-repeat: no-repeat;position: absolute; top: 0; left: 0;\">");
              LiteralControl divendImg = new LiteralControl("</div>");
  
              LiteralControl spacer = new LiteralControl("<br/>");
  
  
              orgLabel.Style.Add(HtmlTextWriterStyle.Position, "relative");
  
  
  
              //Assign controls to cells
              orgLabel.Controls.Add(titleLabel);
              orgRed.Controls.Add(redAlarm);
              orgYellow.Controls.Add(yellowAlarm);
              orgOrange.Controls.Add(orangeAlarm);
              orgBlue.Controls.Add(blueAlarm);
              orgPurple.Controls.Add(purpleAlarm);
  
  
  
              //assign cells to rows
              orgRow1.Controls.Add(orgLabel);
              orgRow2.Controls.Add(orgRed);
              orgRow2.Controls.Add(orgOrange);
              orgRow2.Controls.Add(orgYellow);
              orgRow2.Controls.Add(orgBlue);
              orgRow2.Controls.Add(orgPurple);
  
              //assign rows to table
              orgTableLabel.Controls.Add(orgRow1);
              orgTableAlarms.Controls.Add(orgRow2);
  
  
              
  
              //assign divstart tag to LinkButton
              mainButton.Controls.Add(divstart);
              
              
  
              //assign table to LinkButton
              orgLabel.Controls.Add(divstartImg);
              orgLabel.Controls.Add(divendImg);
  
  
  assign objects to button
              mainButton.Controls.Add(orgTableLabel);
  
              mainButton.Controls.Add(orgTableAlarms);
  
              
           
  
              //assign divend tag to LinkButton
              mainButton.Controls.Add(divend);
  
              
  
              //assign LinkButton to CustomControl
               this.Controls.Add(mainButton);
               
  
              mainButton.CssClass = this.CssClass;
  
              
             
          }
  
          protected override void Render(HtmlTextWriter writer)
          {
           
  
              AddAttributesToRender(writer);
  
           
             
              writer.AddAttribute(HtmlTextWriterAttribute.Cellpadding, "-1", false);
              writer.AddAttribute(HtmlTextWriterAttribute.Cellspacing, "-1", false);
              
              
              writer.AddStyleAttribute(HtmlTextWriterStyle.Position, "relative");
              
  
  
            
             
              mainButton.RenderControl(writer);
  
          }
  
  
  
          #endregion
  
         
  
      }
     
  
         
      
  }

   

  I had at first found  solution by covering everything in a DIV tag, and assigning a little OnClick event that would click the current button, referencing it by the <%= Control.ClientID%> way.
  
  It works in Firefox, however it still throws the "document.GetElementById('<%=Control.ClientID%>Ä) null or is not an object error.
  
  Firefox somehow is able to go around the error and still does what it has to, but IExplorer, which is where this control is supposed to run on, simple doesn´t work.

  How could I solve this? How am i supposed to make the whole control clickable?

   

  Thanks in advance!

   

  • Edited by Pizana on Feb 01, 2012 01:33 PM
  • Edited by Pizana on Feb 01, 2012 01:34 PM
  • Edited by Pizana on Feb 01, 2012 01:34 PM
  • Edited by Pizana on Feb 01, 2012 01:34 PM
• • Reply
  

  Decker Dong ...

  All-Star

  118619 Points

  18779 Posts

  Re: CustomControl and clickable contents

  Feb 06, 2012 12:45 AM|LINK

  Hello Pizana：）

  Sorry but what's 

  Designer(typeof(RDCButtonDesigner))？

  I cannot find that……

• • Reply
  

  Pizana

  Member

  56 Points

  71 Posts

  Re: CustomControl and clickable contents

  Feb 06, 2012 08:53 AM|LINK

  It's only the designer class, for the Design Time part of Visual Studio, but it doesn't affect the functionality at runtime. It actually only shows a box the size of the button and the name, nothing special.

• • Reply
  

  Decker Dong ...

  All-Star

  118619 Points

  18779 Posts

  Re: CustomControl and clickable contents

  Feb 06, 2012 11:05 AM|LINK

  Pizana

  It's only the designer class, for the Design Time part of Visual Studio, but it doesn't affect the functionality at runtime. It actually only shows a box the size of the button and the name, nothing special.

  Sorry but if I comment it out，when the control is generated and I drag and drop it onto the aspx page，it cannot work and show an error of "Creating error"。

  Reguards！

• • Reply
  

  Pizana

  Member

  56 Points

  71 Posts

  Re: CustomControl and clickable contents

  Feb 06, 2012 02:09 PM|LINK

  that is because it's for the Designer....Change it to type of LinkButton and it will simply show that its not able to render but still run it.