How to set checkbox state of TreeView?

How to set checkbox state of TreeView?

Posted by: fejlesztes on 16 January 2018, 12:32 pm EST

• 

  fejlesztes

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 16 January 2018, 12:32 pm EST

  I’m using the WjTreeView with Vue and I want to initialize the tree with some items checked by default.

  How can I do this?

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 17 January 2018, 2:11 am EST

  Hi,
  
  For this, you need to get the node to be checked and use setChecked method for TreeNode in initialized event. Please use the following code snippet and attached sample for the same:

  var node=treeView.getNode(treeView.nodes[0].dataItem.items[2].items[0]);                
                  node.setChecked(true,true);
              node=treeView.getNode(treeView.nodes[0].dataItem.items[3].items[1]);                
              node.setChecked(true,true);
  

  ~Manish

  TreeView_checkNode.zip

• 

  mobeen.asif.el

  • Post Options:
  • Link
    Copy

  Posted 28 September 2020, 8:05 am EST

  I want to restore the check boxes like this
  
  tree.checkedItems = ; //result array of tree.checkedItems

  it is not working and i dont want to manually set check boxes checked

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 29 September 2020, 6:20 am EST

  Hi Mobeen,

  You can use the checkAllItems method of the TreeView to set all the nodes as checked or unchecked.

  API: https://www.grapecity.com/wijmo/api/classes/wijmo_nav.treeview.html#checkallitems

  Regards,
  
  Ashwin

• 

  gowri.boya

  • Post Options:
  • Link
    Copy

  Posted 5 October 2020, 5:54 am EST

  Hi Manish,

  In angular I implemented TreeView, on page loads i have to enable checkbox checked by default , but not all checkboxes, you can see my json data will be like this var items = [
  
  { header: ‘Electronics’,showChecked:true, items: [
  
  { header: ‘Trimmers/Shavers’,showChecked:true },
  
  { header: ‘Tablets’,showChecked:false },
  
  { header: ‘Phones’,showChecked:false, items: [
  
  { header: ‘Apple’,showChecked:false },
  
  { header: ‘Motorola’,showChecked:false },
  
  { header: ‘Nokia’,showChecked:false },
  
  { header: ‘Samsung’,showChecked:false }
  
  ]
  
  },
  
  {header:‘LapTop’,showChecked:true,items:[
  
  {header:‘Dell’,showChecked:false},
  
  {header:‘Lenovo’,showChecked:true}
  
  ]},
  
  { header: ‘Speakers’,showChecked:false },
  
  { header: ‘Monitors’,showChecked:false }
  
  ]},
  
  { header: ‘Toys’,showChecked:false, img: ‘resources/toys.png’, items: [
  
  { header: ‘Shopkins’ ,showChecked:false},
  
  {header:‘Train Sets’,showChecked:false},
  
  {header:‘Science Kit’,showChecked:false},
  
  {header:‘Play-Doh’,showChecked:false},
  
  {header:‘Crayola’,showChecked:false},
  
  ]},
  
  { header: ‘Home’,showChecked:true, img: ‘resources/home.png’}
  
  ];
  
  where showChecked is true, that particular checkbox should be checked by default on component load, I have tried by using above code which you have mentioned, but it is not working in my case, will plz suggest me any other alternative solution for this.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 5 October 2020, 11:46 pm EST

  Hi Gowri,

  You may use the checkedMemberPath property of the TreeView and assign its value to ‘showCheckbox’. This property is used to bound the checkbox state of the item to a property in the data item.

  API: https://www.grapecity.com/wijmo/api/classes/wijmo_nav.treeview.html#checkedmemberpath

  ~regards

• 

  gowri.boya

  • Post Options:
  • Link
    Copy

  Posted 8 October 2020, 3:08 am EST

  Hi Ashwin,

  Thank you so much for suggesting me, its working.

  regards,
  
  Gowri.