CODEWITHSUNDEEP
jsfprimefaces
bluelabel
bluelabel

Reputation: 2104

How to disable PrimeFaces tree with checkbox selection mode

I have a requirement to disable a PrimeFaces tree (checkbox selection mode) for some occasions. User should be able to see selected as well as un-selected checkboxes, but they need to be disabled in this occasion. Does anybody know how to do it?

I'm using PrimeFaces 4

Upvotes: 5

Views: 9821

Answers (5)

Георгий Барсегян
Георгий Барсегян

Reputation: 102

In PrimeReact for the tree component there is an option to set the selectable property for each node

TreeNode/selectable

Upvotes: -1

numanu
numanu

Reputation: 11

I am using primereact and i disabled the checkbox like following. First, create a custom css:

.disabled-tree-table-checkbox .p-checkbox-box,
.disabled-tree-table-checkbox .p-checkbox-input {
     pointer-events: none;
     opacity: 0.65;
     border: none;
 }

Then, in your treeNodes, add this classname to the nodes you want to disable ,

const treeNode: TreeNode = {
  key: ...your key,
  data: {
    ...your data
  },
  children: ...your children
  className:  'disabled-tree-table-checkbox',
};

Upvotes: -1

Vladislav Karpenko
Vladislav Karpenko

Reputation: 61

You can set for node userNode.setSelectable(false) and in jsf treetable add

showUnselectableCheckbox="true"

Upvotes: 6

bluelabel
bluelabel

Reputation: 2104

I found a solution for this. But is not elegant, this can be done with css, We can add a conditional css to the tree and make it unclickable.

    .not-clickable {
    cursor: not-allowed;
    pointer-events: none;
}

Used above css style in the tree with a condition,

<p:tree id="tree" styleClass="#{not backingBean.editable?'not-clickable':''}" cache="false" value="#{backingBean.treeRoot}" var="node" selectionMode="checkbox" selection="#{backingBean.selectedValuesNodes}">

Upvotes: 3

Zak
Zak

Reputation: 327

Set Node.setSelectable(false) for the nodes whose checkboxes you want disabled.

Upvotes: 1

Related Questions