How to deal with dynamic border widths and border colors

[itg-assistant]

mitch stephens asked 2018-02-07 01:18:27 UTC

Hi WiseJ Team,

Our application includes several form-builder tools that lets users design online forms. One of the tools uses an Excel worksheet as the design layout. We render the sheet online using a combination of controls, mostly labels and textboxes.

With VWG we could set BorderWidth and BorderColor dynamically in code. This allows us to render pretty much any border style combination.

I understand the value of Mixin themes to define border colors and widths (and other UI elements), but you can see my problem: How do I define all the combinations of colors and widths in advance using Mixins?

Is there no other way to set the border colors and widths without Mixins?

Thanks in advance,
Mitch

[itg-assistant]

Luca answered 2018-02-07 02:06:21 UTC

You can set any css style directly on any widget. For example:

Eval("this.getContentElement().setStyle('border', '5px solid red')");

However the widget will not remember it if the user hits refresh. You have to save the style you want to use and call the setStyle method in the Update() overload.

Or use a property extender like the StyleSheet extender and add a "Style" property to all components on a container. I can send you a simple StyleExtender class that does that. It's better to use extenders instead of adding virtually infinite web/css properties to controls and widgets. The javascript architecture in Wisej is extremely flexible and open.

[itg-assistant]

mitch stephens answered 2018-02-07 02:33:39 UTC

I'd appreciate the sample StyleExtender - it sounds like it will do the trick for us

Thanks!

Mitch

[itg-assistant]

Luca answered 2018-02-08 01:33:02 UTC

See attached Wisej.Web.Ext.StyleExtender.

You can add the component "StyleExtender" to the toolbox in VS or simply add it to a top level container (Page, Form, UserControl). In the designer you will see that all controls being designed have a new "Style" property. It can be edited with the code editor. It's a plain JSON object definition that lets you add any style. (some may conflict with the theme).

To set the border in the designer, type:

{

"border": "5px solid red"

}

The extender is able to update the widget also at design time.

If you need to set a style programatically, do this:

this.styleExtender1.SetStyle(this.button1, new {

border = "5px solid red"

});

You can use any css name:

this.styleExtender1.SetStyle(this.button1, new {

borderWidth = "5px"

});

Use "borderWidth" not "border-width" when writing code since "borderWidth" is a valid property while border-width is not and in javascript when assigning css styles the property name is "borderWidth".

HTH

[itg-assistant]

Frank (ITG) answered 2018-02-08 14:27:40 UTC

You might also want to take a look at one of our blog articles to get another sample of using styles in Wisej:

http://wisej.com/blog/shadow_on_the_panel/

Best regards
Frank

[itg-assistant]

Behzad answered 2020-07-01 22:05:38 UTC

I do not know why I cannot get this to work in wisej 2.1

I have a form with two textboxs and a button on it and the following code does not work for me.

private void button1_Click(object sender, EventArgs e)
{
this.styleExtender1.SetStyle(this.textBox1, new { border = "5px solid blue" });
this.styleExtender1.SetStyle(this.textBox2, new { borderWidth = "15px"});
}

I also came across cssstyle property for controls in my Wisej2 environment. which one is the recommended way ?

[itg-assistant]

Luca answered 2020-07-02 22:36:12 UTC

We don't have a SetStyle() method. If this is VWG code it cannot work with Wisej.

Use this.textBox1.CssStyle = "border:5px solid red";