Skip to the content

TextBlock style change on foreign event


Available in Html5 Renderer version and Designer


TextBlock can be linked by another element's ID (Name property). It is possible to change the whole TextBlock style on an event of the foreign element inside the form.


1) Place Text Block (with Border) inside the form.

Please note that classic TextBlock cannot be linked.

select TextBlock


2) Fill LabelFor property with correct element ID

fill LabelFor property

3) Initialize style change on desired events like the code below.

The renderer will change the style of the corresponding label automatically, If the label exists.

eForms.LabelFor.OnFocus({color:'#0000FF', transition:0.2});

When the desired element will be focused than the color of the corresponding label will be changed to blue with fast transition effect of 0.2 seconds.

4) and It's DONE!


Supported events:

  • OnFocus (ie. eForms.LabelFor.OnFocus(options))
  • OnUnfocus (ie. eForms.LabelFor.OnUnfocus (options))
  • OnMouseEnter (ie. eForms.LabelFor.OnMouseEnter (options))
  • OnMouseLeave (ie. eForms.LabelFor.OnMouseLeave (options))
  • OnValidation (ie. eForms.LabelFor.OnValidation (options)) - this event will be called when element will be invalidated


Available options:

Options are designed like javascript style object.

  • color
  • fontSize
  • fontFamily
  • fontWeignt
  • top
  • left
  • padding (in format "x,x,x,x")
  • transition (transitions all changed values by selected amount of time)


Result of the sample code above:

Before focus state:

color before change

After focus state with transition delay:

color after change with transition

and returned back on unfocus event without transition (because it was not set):