Using javascript for C1TreeView 2025v2 399

Posted by: enrique.pv-ext on 14 May 2026, 7:27 am EST

enrique.pv-ext

Post Options:
Link
Copy

Posted 14 May 2026, 7:27 am EST

Hi,

Migrate from 2010v1 to 2025v2 399 in ASP.NET WebForms NET Framework 4.8.1.

Using C1TreeView from C1.Web.Wijmo.Controls.48.dll

get_value()

get_text()

get_selectedNodes methods ?

    function C1TreeViewRows_NodeClicked(sender) {
            var a = $find("<%=C1TreeViewRows.ClientID%>");
            var b = a.get_selectedNodes();

            var textbox = document.getElementById("<%= txtTreeRows.ClientID %>");
            var textbox2 = document.getElementById("<%= txtTreeRowsText.ClientID %>");

            if (b.length != 0) {
                var c = b[0].get_value();
                var t = b[0].get_text();

                textbox.value = c;
                textbox2.value = t;
            }

methods: _treeViewNodes ? get_propertiesState ?

    function C1TreeView3_NodeClicked(sender) {
        var b = sender._treeViewNodes.list[0]._treeViewNodes;
        var x = sender.get_propertiesState();
        var c = b.list[1]._treeViewNodes.list[0];
        var textbox = document.getElementById("<%= txtTreeView3.ClientID %>");
        textbox.value = x;
    }

get_selectedNodes, get_value

    function C1TreeViewColumns_OnClientNodeClicked(sender) {
        try {
                var nodeSelected = sender.get_selectedNodes();

                if (nodeSelected.length != 0) {
                    var value = nodeSelected[0].get_value();

Any alternatives?

uttkarsh.matiyal
- Post Options:
- Link
  Copy
Posted 15 May 2026, 5:56 am EST
Hello Enrique,

You can find the alternatives in the documentations:

wijtree

wijtreenode

The exact alternatives:

get_value(): node.options.value [see attached sample]

get_text(): node.options.text [see attached sample]

get_selectedNodes: getSelectedNodes

_treeViewNodes: getNodes

get_propertiesState: We could not find any alternatives for this property. Could you please tell us the usage of this property so that we can suggest best solution possible?

Sample implementing the above properties: TreeView_Sample.zip

Regards,

Uttkarsh.

enrique.pv-ext

Post Options:
Link
Copy

Posted 19 May 2026, 4:03 am EST

client events in new version:

  OnClientNodeClick="onNodeClick"
   OnClientNodeCheckChanged="onNodeCheck"
   OnClientNodeExpanded="onNodeExpand"
   OnClientNodeCollapsed="onNodeCollapse"

Legacy

OnClientNodeClicked="C1TreeViewColumns_OnClientNodeClicked"

which is the alternative in new version for OnClientNodeClicked ?

enrique.pv-ext

Post Options:
Link
Copy

Posted 19 May 2026, 11:03 am EST

_treeViewNodes: getNodes

get_propertiesState

var state = sender.get_propertiesState();
textbox.value = state !== null && state !== undefined ? String(state) : "";

        function C1TreeView3_NodeClicked(sender) {

            console.log("C1TreeView3_NodeClicked");
            var b = sender._treeViewNodes.list[0]._treeViewNodes;
            //var x = sender.get_checkedNodes();
            var c = b.list[1]._treeViewNodes.list[0];
            var textbox = document.getElementById("<%= txtTreeView3.ClientID %>");

            var state = sender.get_propertiesState();
            textbox.value = state !== null && state !== undefined ? String(state) : "";
        }

uttkarsh.matiyal
- Post Options:
- Link
  Copy
Posted 20 May 2026, 1:48 am EST

Hello Enrique,

Apologies, but the newer version does not include the ‘OnClientNodeClicked’ event.

Thank you for sharing the implementation details for ‘get_propertiesState’. However, we are still unable to clearly understand its usage.

Does this method return the checked state of a node? If so, could you please clarify what the “undefined” value represents and what the possible return values are?

If our understanding is incorrect, kindly share additional details regarding the usage and behavior of ‘get_propertiesState’.

Regards,

Uttkarsh.

enrique.pv-ext

Post Options:
Link
Copy

Posted 20 May 2026, 2:08 am EST

Thanks,

I think, it’s relations with property AllowTriState. Whats mean about it ?

Legacy code for older version.

var state = sender.get_propertiesState();

Actual code using a C1TreeView

<cc1:C1TreeView ID="C1TreeView3" runat="server" AutoPostBack="false"
                                        AllowTriState="true"
                                        ShowCheckBoxes="true" AutoCheckNodes="true"
                                        OnClientNodeCheckChanged="C1TreeView3_NodeClicked">

any suggestion for manage TriState (AllowTriState property) using javascript in new version ?

uttkarsh.matiyal
- Post Options:
- Link
  Copy
Posted 20 May 2026, 6:51 am EST
Hello Enrique,

Setting AllowTriState allows triple state of CheckBox—checked, indeterminate and unchecked.

If “get_propertiesState” is used to retrieve the checked state of a node’s checkbox when the node is clicked, then in the newer version you can obtain the same information using “node.options.checkState”, as shown below:

function onNodeClick(ev, node) { alert(`node: ${node.options.text} ("${node.options.value}") checkState: "${node.options.checkState}" checked: ${node.options.checked} selected: ${node.options.selected}`); updateInfo("Node Clicked", $(`#${ev.target.id}`), { node: node }); }

Sample: TreeView_Sample_Mod.zip

Please let us know if it works for you.

Regards,

Uttkarsh.

enrique.pv-ext

Post Options:
Link
Copy

Posted 23 June 2026, 5:39 am EST

Thanks!

I have many javascript legacy working with TreeView.

I 'm migrating code using c1treeview(‘getNodes’).

 var treeView = $("#" + WindowIdGTrafficLights + '_C1TreeViewLanes');
 var nodes = treeView.c1treeview('getNodes');
 var node2 = nodes.list[0];
var arrayDir0 = node2.c1treeview('getNodes').list[0].c1treeview('getNodes');

legacy list?

nodes.list[0] vs rootNodes[0] ?

              var rootNodes = treeView.c1treeview('getNodes');
            nodo0TrafficLights = nodes.list[0];

get_checkState, set_checkState, set_checked

set_visible

_anyCheck = (arrayDir0.list[i].get_checkState() == 0);

                for (i = 0; i < arrayDir.list.length; i++) {

                    arrayDir.list[i].set_checkState(-1);
                    arrayDir.list[i].set_checked(false);
                    arrayDir.list[i].set_visible(true);
                }

  var nodes = eventArgs.get_node().c1treeview('getNodes');
  for (i = 0; i < nodes.list.length; i++) {
      nodes.list[i].set_checkState(eventArgs.get_node().get_checkState());

get_value, get_checked ??

                for (i = 0; i < arrayDir0.list.length; i++) {
                    lista += arrayDir0.list[i].get_value().replace('LANE-', '') + '-' + arrayDir0.list[i].get_checked() + ',';

set_expanded ?

set_selected ?

nodo0TrafficLights.c1treeview('getNodes').list[0].set_expanded(true);

                nodo0TrafficLights.set_expanded(true);
                nodo0TrafficLights.set_selected(true);

please, any suggestions about all this methods ?

uttkarsh.matiyal
- Post Options:
- Link
  Copy
Posted 24 June 2026, 3:21 am EST
Hello Enrique,

Please refer to the attached sample for alternatives of mentioned options and methods: TreeView_Sample_Mod2.zip

FYI, we took reference from the following documentations to find these alternatives:

wijtree

wijtreenode

Regards,

Uttkarsh.
enrique.pv-ext
- Post Options:
- Link
  Copy
Posted 25 June 2026, 11:03 am EST - Updated 26 June 2026, 3:17 am EST
Thanks a lot !!! GReat sample !!

only questions:

Legacy getnodes()

var arrayDir0 = node2.get_nodes().list[0].get_nodes();

New using myNode.options.nodes or myNode.nodes ?

options is treenodeOptions interface?

differences with options.nodes vs nodes ?

if (node?.options?.nodes ?? node.nodes) { traverse(node?.options?.nodes ?? node.nodes); }

var arrayDir0 = node2.options.nodes[0].options.nodes;

sample:

myNode.options.text or myNode.text ?

allNodesText.push(node.options?.text ?? node.text);

and ANOTHER QUESTION:

difference

options.checkState vs c1treeviewnode(‘option’, ‘checkState’)

(arrayDir0[i].options.checkState === 'checked'); $node3 = arrayDir0[i] checkState: ${$node3.c1treeviewnode('option', 'checkState')}`);

and ANOTHER QUESTION:

set_checkState(-1) equivalent c1treeviewnode(‘option’, ‘checkState’, ‘unchecked’) ?

set_checked(false) equivalent c1treeviewnode(‘check’, false) ?

nodo0.get_nodes().list[0].set_checkState(-1); nodo0.get_nodes().list[0].set_checked(false);

and ANOTHER QUESTION:

which set_expanded(false) equivalent ??

expanded = true, then is collapse false ?

and ANOTHER QUESTION:

set_selected(true) equivalent select(true) ?

https://help.grapecity.com/wijmo/3/webframe.html#Wijmo~wijmo.tree.wijtreenode~select.html

nodo0.set_selected(true);

please, any help will be grateful, thanks a lot in advance friends !!
enrique.pv-ext
- Post Options:
- Link
  Copy
Posted 26 June 2026, 3:37 am EST - Updated 26 June 2026, 4:21 am EST
get_nodes equivalent .options.nodes

but

get_node alternatives ?

function CheckedChanged(sender, eventArgs) { try { // get_node() ????? //var nodes = eventArgs.get_node().get_nodes(); var nodes = eventArgs.options.nodes;

Not alternative for legacy set_focused ?

https://help.grapecity.com/wijmo/3/webframe.html#Wijmo~wijmo.tree.wijtreenode~select.html

arrayDir0.list[i].set_focused(true);

please, any help about it will be very grateful, thanks friends! great!
uttkarsh.matiyal
- Post Options:
- Link
  Copy
Posted 26 June 2026, 5:54 am EST
Hello Enrique,

New using myNode.options.nodes or myNode.nodes ?

myNode.options.nodes will get you nodes array with a few properties while myNode.nodes will not return anything because no such property exists.

In our sample we have described following two ways to get nodes, so that you can use anyone which fits your use case best:

Complete Node Collection: you get this using getNodes() method. The following are some code examples:

var rootNodes = $("#<%=C1TreeView1.ClientID%>").c1treeview('getNodes'); var node3Children = $("#<%=C1TreeView1.ClientID%>").c1treeview('getNodes')[2].getNodes(); //---or--- var $node3 = $("#<%=C1TreeView1.ClientID%> > ul > li").eq(2); //get a node $node3.c1treeviewnode('getNodes'); //get its children

Nodes Array: you get this using ‘nodes’ option. This option is available in nodes collection’s ‘node object → options’ property and in nodes array’s ‘node object’.

To clarify, ‘options’ property is only available when nodes are get using ‘getNodes()’ method and not when nodes are get using ‘options.nodes’ or ‘nodes’ property.

So, the code used in our sample:
node?.options?.nodes ?? node.nodes
means when ‘options’ is not available use ‘node.nodes’.

Similarly for “node.options?.text ?? node.text”.

If two different types of “nodes” is confusing, please get nodes using first method only. Use ‘getNodes()’ only. If you want, we can simplify our sample for better understanding.

options.checkState vs c1treeviewnode(‘option’, ‘checkState’)

options.checkState: use it for get; set do not work here. This option is readonly.

c1treeviewnode(‘option’, ‘checkState’): can use for both set and get.

set_checkState(-1) equivalent c1treeviewnode(‘option’, ‘checkState’, ‘unchecked’) ?

set_checked(false) equivalent c1treeviewnode(‘check’, false) ?

Yes, you are right.

expanded = true, then is collapse false ?

Yes, you are correct.

Note: this option is readonly so you cannot use it for set. To set expanded to true use “expand” method on c1treeviewnode whereas to set it to false use “collapse” method as follows:

function toggleExpand() { var tree = $("#<%=C1TreeView1.ClientID%>"); var node3 = tree.c1treeview('getNodes')[2]; var isExpanded = node3.options.expanded; var $node3 = $('#MainContent_C1TreeView1 > ul > li').eq(2); if (isExpanded) $node3.c1treeviewnode('collapse'); else $node3.c1treeviewnode('expand'); }

set_selected(true) equivalent select(true) ?

Yes, you are correct.

Regards,

Uttkarsh.
uttkarsh.matiyal
- Post Options:
- Link
  Copy
Posted 26 June 2026, 6:10 am EST
Hello Enrique,

get_node alternatives ?

The second event argument “eventArgs” is the node you are looking for. Please see the event handled in the sample we attached earlier:

function onNodeCheck(ev, node) { updateInfo("Node Checked", $(`#${ev.target.id}`), { node: node }); }

Not alternative for legacy set_focused ?

Yes, we also did not see any option or method for focusing a node. Please use jQuery’s focus() method:

$('#<%=C1TreeView1.ClientID%> > ul > li').eq(2).focus();

If it did not help, please let us know the exact behavior when using focus in legacy version so we can suggest best alternative available.

Regards,

Uttkarsh.
enrique.pv-ext
- Post Options:
- Link
  Copy
Posted 28 July 2026, 5:15 am EST - Updated 28 July 2026, 5:31 am EST
In your sample we have described following two ways to get nodes.

“If two different types of “nodes” is confusing, please get nodes using first method only. Use ‘getNodes()’ only.”

PLEASE, can you simplify your sample for better understanding ? PLEASE, THANKS !

Complete Node Collection: getNodes() method.

c1treeview(‘getNodes’);

c1treeview(‘getNodes’)[2].getNodes();

c1treeviewnode(‘getNodes’);

Nodes Array: ‘nodes’ option.

This option is available in nodes collection’s ‘node object → options’ property and in nodes array’s ‘node object’.

‘options’ property is only available when nodes are get using ‘getNodes()’ method

and not when nodes are get using ‘options.nodes’ or ‘nodes’ property.

Confusing options and getNodes vs options.nodes and nodes ? options hell???

Confusinng for me using > ul > li for get a node ??

var $node3 = $("#<%=C1TreeView1.ClientID%> > ul > li").eq(2); //get a node

Node V101

2679×887 364 KB

nodeSubParent Norte

2653×885 371 KB

nodeParent Todas

2622×869 373 KB

nodeParent Todas

SubParent Norte

1115×953 81.7 KB

nodeParent Todas

SubParent Norte

Node_V101

1325×978 95.6 KB

options not available

2602×1038 384 KB
uttkarsh.matiyal
- Post Options:
- Link
  Copy
Posted 28 July 2026, 6:52 am EST

Hello Enrique,

We understand your concerns. Having more than one option to do same thing may get confusing. Please see the simplified version:

→ Instead of using ‘options.nodes’ use options.getNodes().

→ Instead of using selectors to get a node, use element property as follows:

old: var $node3 = $(“#<%=C1TreeView1.ClientID%> > ul > li”).eq(2);

new: var $node3 = $(“#<%=C1TreeView1.ClientID%>”).c1treeview(‘getNodes’)[2].element;

Please refer to the attached simplified sample for better understanding: TreeView_Sample_Mod3.zip

Please let us know if you have further queries.

Regards,

Uttkarsh.
enrique.pv-ext
- Post Options:
- Link
  Copy
Posted 29 July 2026, 5:50 am EST - Updated 29 July 2026, 5:59 am EST
Thanks all!!

I try

// Nodo raíz (o null si el árbol está vacío). function getRootNode(windowId) { const nodes = getTree(windowId).c1treeview('getNodes'); return (nodes && nodes.length > 0) ? nodes[0] : null; }

const directions = root.options.nodes;

directions has 2 nodes.

Nodes has properties: checkState, checked, expanded, nodes (Array 4), text, value.

Not options property.

directions[0].nodes has 4 nodes (Array 4).

The node has: checkState, checked, expanded, nodes (empty ), text, value. Not options property.

var nodos = (root.getNodes());

nodos has 2 nodes.

Nodes has properties: element, and options.

Options has: checkState, checked, expanded, nodes (Array 4), text, value

nodos[0].getNodes() has 4 nodes (Array 4)

Each node has: element, and options property.

Options has: checkState, checked, expanded, nodes (empty , text, value

SAMPLE:

const directions = root.options.nodes; console.log("ClientSideValidationTrafficLightsWindow 1", root); console.log("Direcciones encontradas:", directions); var nodos = (root.getNodes()); console.log("Direcciones encontradas:", nodos); //const lanes0 = directions[0].options ? directions[0].options.nodes || [] : directions[0].nodes || []; const lanes0b = nodos[0].getNodes(); const lanes0 = directions[0].nodes || []; console.log("ClientSideValidationTrafficLightsWindow 3"); console.log(lanes0); console.log("lanes0 nodo 0 ", lanes0[0]);

Properties dissapears…

directions[0].nodes has all properties (view in console directions[0].nodes[0]…1…2 …)

IN console lanes0[0] has not all properties.

const lanes0 = directions[0].nodes || []; console.log("ClientSideValidationTrafficLightsWindow 3"); console.log(lanes0); console.log("lanes0 nodo 0 ", lanes0[0]);

908×845 49.3 KB

any suggestions ?

enrique.pv-ext

Post Options:
Link
Copy

Posted 29 July 2026, 9:24 am EST - Updated 29 July 2026, 9:42 am EST

Migrating older legacy code to latest version:

checkState, checked, get_owner

Legacy: (eventArgs.get_node().get_checkState() == 0)
New: currentNode.options.checkState == "checked"

AllowTriState=“true” and checkState

    <wijmo:C1TreeView ID="C1TreeView1"
        runat="server"
        OnClientNodeClick="onNodeClick"
        OnClientNodeCheckChanged="onNodeCheck"
        OnClientNodeExpanded="onNodeExpand"
        OnClientNodeCollapsed="onNodeCollapse" 
        ShowCheckBoxes="true" 
        AllowTriState="true">

eventArgs.get_node().set_checkState(-1); 
eventArgs.get_node().set_checked(false);

currentNode.options.checked = false;
currentNode.options.checkState = 'unchecked';

get_value().includes

LEGACY
 if(eventArgs.get_node().get_value().includes("PERMISSION_PLACE_"))

NEW
 if (currentNode.options.value && currentNode.options.value.includes("PERMISSION_PLACE_")) {

get_owner

 var nodoSeleccionado = eventArgs.get_node();
     var padre = nodoSeleccionado.get_owner();
     if(!padre.get_checked())

     var lista = padre._treeViewNodes.list;

         padre.set_checkState(1);
         padre.set_checked( true);
         nodoSeleccionado.set_checkState(0);
         nodoSeleccionado.set_checked(true);

NEW
 padre.options.checkState = "indeterminate";
 padre.options.checked = true;

 currentNode.options.checked = true;
 currentNode.options.checkState = 'checked';

Questions:

checkState : checked 0 , unchecked -1, indeterminate 1 ?

alternatives get_owner(), _treeViewNodes.list, includes ??

thx

uttkarsh.matiyal
- Post Options:
- Link
  Copy
Posted 30 July 2026, 5:14 am EST
Hello Enrique,

Please use ‘getnodes()’ pattern only. Do not use ‘options.nodes’ to avoid confusion.

Suggested usage:

var nodos = (root.getNodes()); const lanes0b = nodos[0].getNodes();

→ checkState : checked 0 , unchecked -1, indeterminate 1 ?

We checked legacy documentation for C1TreeViewNodeCheckState and found that it used to be an enum type. Since, members of C1TreeViewNodeCheckState enum does not have any value defined explicitly (as per the doc), the default values must be as follows:

Checked: 0

Indeterminate: 1

UnChecked: 2

→ alternatives get_owner(), _treeViewNodes.list, includes ??

get_owner(): use ‘getOwner()’ function

var node = $("#<%=C1TreeView1.ClientID%>").c1treeview('getNodes')[2].getNodes()[1]; node.getOwner();

_treeViewNodes.list: The mentioned member appears to be private. Please note that private members are implementation details and may change over time, so we do not recommend using them directly in your code.

Could you please let us know your exact use case for accessing this member? Based on your requirements, we’ll be happy to suggest the best possible alternative.

Old:

var padre = nodoSeleccionado.get_owner(); var lista = padre._treeViewNodes.list;

new:

var node = $("#<%=C1TreeView1.ClientID%>").c1treeview('getNodes')[2].getNodes()[1]; var padre = node.getOwner(); var lista = padre.getNodes();

includes: method is still available.

*.options.value.includes("PERMISSION_PLACE_")

Regards,

Uttkarsh.

Please login to reply to thread

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels

ComponentOne

Forums for all current editions of the ComponentOne .NET UI control product line, including ComponentOne Studio and ComponentOne Studio for Xamarin.
ActiveReports

Forums for all versions of ActiveReports and ActiveReports Server
Spread

Forums for all current versions of Spread .NET spreadsheets, SpreadJS JavaScript spreadsheets, and SpreadCOM spreadsheets.
Wijmo

Forums for all Wijmo products, including Wijmo Core, FinancialChart, FlexSheet, MultiRow, OLAP, and ReportViewer
- General Discussion
Document Solutions

Forums for all Document Solutions products, including Document Solutions for PDF (.NET and Java), Word, Excel (.NET and Java), and Imaging.