How to deal with dynamic border widths and border colors

0
0

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

 

 

  • You must to post comments
0
0

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.

 

  • You must to post comments
0
0

I’d appreciate the sample StyleExtender – it sounds like it will do the trick for us

 

Thanks!

Mitch

  • You must to post comments
0
0

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

 

 

  • You must to post comments
0
0

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

https://wisej.com/blog/shadow_on_the_panel/

Best regards
Frank

  • You must to post comments
0
0

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 ?

  • You must to post comments
0
0

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”;

  • You must to post comments
Showing 6 results
Your Answer

Please first to submit.