LabVIEW NXG Web module Customize Tree control column widths

[Desruelle_luc]

Hello I’m trying to build a Web application using LabVIEW NXG and the Web Module.

To customize controls and indicators, there are some examples with custom style and CSS file.

In my WebVI, I use “Tree control” to display information, and I need to fix the columns size.

Unfortunately, in the LabVIEW NXG 3.1 release, there is no property node to define the size of the columns. By default:

column-widths='["auto", "100", "100"]'

In the LabVIEW NXG IDE, I define a “HTML class attribute” to the “Tree control” (my-Event-LD), add:

<link rel="stylesheet" href="css/style.css"> 

in the HTML code and I define a CSS file to customize the appearance of control.

I try current property, but it doesn’t work:

Someone can help me?

thanks a lot

A+Luc

[Christina_R]

Hello Luc,

With LabVIEW NXG 3.1, the only way to set a WebVI tree column's width is using JavaScript.

This interface is likely to change in a future version, so if you choose to use it please be prepared to test and modify your code whenever you upgrade to a newer version of LabVIEW NXG.

You would need to use the JavaScript Library Interface (JSLI) document to call JavaScript like the examples below:

• niTree.columnWidths = [200, 100]; (sizes a tree with 2 columns, and sets their widths to 200px and 100px)
• niTree.columnWidths = [200, ‘auto’]; (sizes first column to 200px, and the 2^nd column fills the remaining space)

I can't promise any timeline for it, but in the future we'd like to make the column widths more easily configurable from within LabVIEW NXG, similar to how you can configure the column width of the Data Grid on desktop VIs. If you have time to review that configuration, I'd love to know if it would meet your needs.

I hope this helps, and thank you for the feedback on LabVIEW NXG!

- Christina

[Desruelle_luc]

Bonjour - Hello Christina,

Thank you for your kind assistance. I will test. I will keep you informed of my progress.

very good news

I can't promise any timeline for it, but in the future we'd like to make the column widths more easily configurable from within LabVIEW NXG, similar to how you can configure the column width of the Data Grid on desktop VIs.

thanks again

Luc

[Desruelle_luc]

Bonjour - Hello Christina,

I added a JLSI node and it works well.

(function () {
    // Use strict prevents silent and common JavaScript errors.
    'use strict';
    window.ColumnSize = function () {
		document.getElementsByTagName('ni-tree')[0].setAttribute('column-widths','["150", "200", "auto"]');
    };
}());

thank you so much!

A+ Luc

[Mike1979]

Hi Luc

Is there any chance you could post the code you used to set the column widths?

[Desruelle_luc]

Hi mike1979;,

yes, i can!

code from NXG 5.0 released with a ni-tree-grid control. I've build a JLSI node to call this code, and customize tree control column widths. 

// Example JavaScript JSLI 

(function () {
    // Use strict prevents silent and common JavaScript errors.
    'use strict';
    window.ColumnSize = function () {
		document.getElementsByTagName('ni-tree-grid')[0].setAttribute('column-widths','["170", "200", "auto"]');
    };
}());

[Mike1979]

Thank you!!!