How to disable/enable a checkbox in igTree

I am using aa ignite tree with checkbox (TriState). I have some business to make checkbox be disabled or enabled.

How can i do that?

Thanks,

Ngan

Hello, 

In order to implement custom business logic, it will require to know the available collections and methods to be used when having checkboxes. You will find the corresponding checked nodes options and events described here:

http://www.igniteui.com/help/igtree-configure-checkboxes-and-selection

Additional details regarding each one are included in the official API here:
https://www.igniteui.com/help/api/2022.2/ui.igtree

It is a general asking and yet you could consider using the following resources:
–How to make the checkbox checked while loading igTree
–ToggleCheckState

 

 

Hi Ivaylo,

I meant is there any way to disable a checkbox(btw, it is a parent node) in tree. I have a tree (2 levels) and there're some nodes should be disabled (not allow for user check the checkbox). Or can we apply a class/style for checkbox to make it disable (when user click checkbox, no event is fired)

It's like business to disable/enable a button. I couldn't found out an API or option to make a checkbox node disabled in tree.

Thanks,

Ngan

 

Hello,

If you would prefer to attach the logic on an appropriate event, I suggest handling nodeCheckstateChanging. It is a cancellable event so you could run the checks if this is a root lv or a particular root lv node checked and return false in case you want to disable the user from interacting with it. 

ui.node.path – returns string showing the node path. Could be used to locate specific node or if it is specific node lv

For example in case you have tree parent and nodes and each has 2 child nodes. If you want to check for a particular root node, inspect the returned root value. It will be “zero based”.
Clicking the first root node will return “0”
Clicking the second one will return “1”
Clicking the second child node of the second root node will return “1_1”  

An easy way to find if it is a root lv node you could check the path length (ui.node.path.length) and if it is 1, obviously it is a root node. You could use this check to apply logic to all root nodes.  

Similar approach will be to access the checked/unchecked node data and see if this is the one you want to conditionally disable. For example In case the Root Node you want to disable has a RegionName == “North America”, it is possible to use the following condition and check:
if ((ui.node.data.RegionName !== undefined) && (ui.node.data.RegionName === “North America”)) {return false;}

Please notice, this will still allow you to check/uncheck the child nodes for the North America root node and the state of the root node as well as the css will be applied correctly. In a similar manner it is possible to disable the child nodes as well.
I am attaching code sample illustrating this for reference.

igTree_Checkboxes_ConditionalyChange

Hi Ivaylo,

Sorry for reply late. I think that’s a way too. Howerer, I use another way and it works fine also: Right after the tree rendered:

– Add class ‘ui-state-disabled’ for the span[data-role=”checkbox”] for each item need to be disabled (select nodes by Value or Text, depends on your business)

– Remove all classes of span.ui-icon nested in span[data-role=”checkbox”]

Then user cannot check the item (like a disabled checkbox).

(you can see attachment)

Thannk,

Ngan

Hello Ngan Le Thi,

We are glad that you managed to resolve the issue. If you need further assistance, don't hesitate to contact us.

Best Regards,

Marina Stoyanova

Software Developer,

Infragistics, Inc.