Design checkbox list no triangle icon, no collapse, no expand

Design checkbox list no triangle icon, no collapse, no expand

Posted by: viethdhe130200 on 18 May 2022, 2:53 am EST

• 

  viethdhe130200

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 18 May 2022, 2:53 am EST - Updated 3 October 2022, 2:58 am EST

  Hi wijmo, I need to design a checkbox list with childItemPath (Parent - child). I tried to see on wijmo there is Nav - treeview. But I want to remove this triangle icon and checkbox list without collapse. Treeview will display only parent and child without expanding or collapse.
  
  So, how do I remove the triangle icon and remove the collapse and expand from this treeview.
  
  I need a design like in the picture ( no triangle icon, no collapse, no expand)
  
  I have attached an example below, hope wijmo can help me : https://stackblitz.com/edit/js-kvsagi?file=index.js,data.js,style.css

  

  92×598 1.44 KB

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 19 May 2022, 2:47 pm EST

  Hello,

  Sorry for the delayed response, you may use the following CSS given below to remove the expand/collapse icon from the TreeView:

  
  .wj-treeview .wj-node:before {
    display: none !important;
  }
  
  

  To handle the expand/collapse behavior when clicked at the position of icons, you attach a mousedown event on TreeView hostElement and prevent the default behavior. Please refer to the sample link below demonstrating the same:

  https://stackblitz.com/edit/js-5adybz?file=index.js,data.js,style.css

  Regards

• 

  viethdhe130200

  • Post Options:
  • Link
    Copy

  Posted 22 May 2022, 12:38 pm EST

  Thank you Sonu.pandey, I have a problem when I use: “display: none”, I still click to collapse the checkbox list. Before I create the question, I tried to use: “display: none”. SO I want when hiding the icon triangle, I can’t use collapse.

  I have attached a video below, hope wijmo can help me : https://www.youtube.com/watch?v=Wz9W4z8mbTo

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 22 May 2022, 10:41 pm EST

  Hello,

  Sorry, but it seems you have missed the 2nd part of the above response, as explained previously to handle the expand/collapse behavior when clicked at the position of icons, you can attach a mousedown event on TreeView hostElement and prevent the default behavior.
  
  Could you please let us know if you are facing the issues in the above-shared sample as well? if not please provide the sample replicating the issue so that we can investigate the issue at our end and assist you accordingly.

  Regards

• 

  viethdhe130200

  • Post Options:
  • Link
    Copy

  Posted 24 May 2022, 3:35 am EST

  I am very sorry for this problem. Because I didn’t pay close attention to your 2nd part. I’m really sorry
  
  The 2nd part is exactly what I was looking for. Thank you very much for your reply, sonu.pandey. Thank you very much <3