Extending RenderInput method

While generating the component’s property input field at runtime we can also add attributes to add inline CSS, so that the custom Property Editor member values provide a mechanism to set the layout of your custom control and manage how the control renders.
Let’s add some code that will add further functionality to our custom Property Editor, in the example of counting and limiting the numbers of allowed characters for the Text property of a heading component. DHTML resources are added in a specific (rather complex) way, but in our first example we just add JavaScript inline.
By default the input field is text box as seen in BackOffice. Now we will use our newly created property editor so that in BackOffice there will be labels displaying the number of entered and maximum characters, as well as alert dialog when coded limit is reached.

...int _maxChar = 50;
public const string JavaScriptFunctionCall = @"...";
public int MaxChar {
  get {
    return _maxChar;
  }
}
public override void RenderInput(Control container) {
  string name = this.FieldName;
  HtmlGenericControl area = new HtmlGenericControl("textarea");
  area.Attributes["id"] = name;
  area.Attributes["class"] = "input";
  area.Attributes["name"] = name;
  area.Attributes["value"] = this.GetValue();
  area.Attributes["rows"] = this.Rows.ToString();
  area.Attributes["wrap"] = _wordWrap.ToString();
  area.Attributes["onkeyup"] = JavaScriptFunctionCall;
  HtmlGenericControl entchar = new HtmlGenericControl("span")
  entchar.Attributes["id"] = "enteredChars";
  entchar.Attributes["class"] = "span";
  entchar.Attributes["style"] = "font-size: 11px";
  entchar.InnerText = "0";
  HtmlGenericControl maxchar = new HtmlGenericControl("label");
  maxchar.Attributes["class"] = "label";
  maxchar.InnerText = "/" + MaxChar.ToString();
  container.Controls.Add(area);
  container.Controls.Add(entchar);
  container.Controls.Add(maxchar);
}...

This solution counts and limits the number of characters allowed in the textarea input field of Heading component’s Text property. JavaScript code is used to limit the content to a certain number of characters.

For the Text property, besides the textarea, through RenderInput method we have also added span and label HtmlGenericControls as the content of Property Editor’s container control. The container.Controls.Add(...); then adds this content as different parameters needed for the rendering in the BackOffice.

Span and label elements in the BackOffice