Customization of wijimo tree

Posted by: nilesh_nichal on 7 August 2019, 12:36 am EST

  • Posted 7 August 2019, 12:36 am EST

    We need to customize our wijimo tree as per the attached image:
    Following controls are needed in wijimo tree node-
    1)inputbox
    2)buttons
    3)customized drag-drop and expandible-collapsible icon

    Please follow the image and guide us on how we can do that.
  • Replied 7 August 2019, 11:58 pm EST

    Hi Nilesh,

    We are investigating your case. We will give you an update as soon as we have more information.
  • Replied 8 August 2019, 8:52 pm EST

    Thanks Ashwin.

    Please take it up on high priority since we are having multiple urgent client requirements. Kindly escalate this to your senior engineers immediately.

    Can we setup a call on Monday(08/12) to evaluate the possible solution.
  • Replied 9 August 2019, 12:45 am EST

    Hi,

    You may use the formatItem event of TreeView and some CSS to customize the TreeView. Please refer to the sample below:

    https://stackblitz.com/edit/angular-1labre

    I hope the solution provided above will help you and the call might not be required. In case if you have any further queries, please let us know and we will try to respond within 24 hours in working days.

    Regards,
    Ashwin
  • Replied 11 August 2019, 6:11 pm EST

    Thanks a lot Ashwin for your help..Will get back to you in case of any query.
  • Replied 19 August 2019, 11:47 pm EST

    Hi Ashwin,

    While working on the demo link provided by you, I faced one issue. The copy and delete button in the wijmo node should be clickable and we need to perform certain action on its click. When I try to make it a link or button, the whole node gets editable(which isn't relevant).
    Can you please help with this.
    Our basic requirement inside a wjimo node is:
    1) Input box which should be editable(not the complete node).
    2) Delete and copy button should be actionable.

    Please refer to the image provided in previous query for clarification.
  • Replied 20 August 2019, 2:57 pm EST

    Hi Nilesh,

    Please refer to the updated sample below:

    https://stackblitz.com/edit/angular-fncxej

    To add click events on the icons, I would suggest you handle the click event of TreeView control and get the clicked node using the selectedNode property.
    Then, you will need to check whether the event target is an icon and then perform the action accordingly.

    ~regards
  • Replied 20 August 2019, 4:51 pm EST

    We are using Wijmo5 tree for displaying the hierarchy of objects in our application. As per sample demo on site, it is giving view as shown in image 1 (attached).

    We would like to know if there is a way to show the hierarchy along with the nested lines (refer image 2) so that the structure is more readable.
  • Replied 21 August 2019, 3:11 pm EST

    Hi Nilesh,

    In order to add lines, you will need to add an empty span element before the node and use some CSS to add lines:

    .separator::before {
    content: '---';
    margin-left: -20px;
    color: #80808063;
    }


    https://stackblitz.com/edit/angular-khcd5u

    ~regards
  • Replied 27 August 2019, 4:42 pm EST

    Hi Ashwin,
    Could you help to add a node and a group node dynamically in this tree view on click of some button, outside the tree-view
  • Replied 28 August 2019, 2:30 pm EST

    Hi Nilesh,

    You may easily add new nodes to the TreeView using the addChildNode method of TreeView and TreeNode. Please refer to the link below demonstrating the same:

    https://www.grapecity.com/wijmo/demos/Nav/TreeView/Nodes/Adding/angular

    Reference: https://www.grapecity.com/wijmo/api/classes/wijmo_nav.treeview.html#addchildnode

    ~regards
  • Replied 9 September 2019, 9:53 pm EST

    Hi Ashwin,

    Is it possible to make only the "main-node" section of tree editable instead of the complete "wj-node" section.
  • Replied 10 September 2019, 4:03 pm EST

    Hi Nilesh,

    In the TreeView control, only the 'wj-node-text' part is editable and not the 'wj-node' part. In the sample I provided, only the 'wj-node-text' part is editable. We cannot make the 'main-node' part editable as it contains other elements like the copy and delete icons.
    Could you let me know the issue you are facing so that I could investigate further?

    ~regards
  • Replied 10 September 2019, 5:50 pm EST

    The issue is the complete "wj-node" is clickable, I click anywhere in "wj-node" section, "wj-node-text" becomes editable. We need just need that we click on "wj-node-text", then only it should be editable.

    We can talk about it on call if you still have any doubts.
  • Replied 11 September 2019, 2:33 pm EST

    Hi Nilesh,

    Please refer to the sample below:

    https://stackblitz.com/edit/angular-cuhag9

    To only edit the TreeView when the 'wj-node-text' is clicked, you may first set the TreeView control to read-only using the isReadOnly property. Then you will need to handle the click event of the hostElement and if the target is 'wj-node-text', then you may call the startEditing method to edit the node.

    ~regards
Need extra support?

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

Learn More

Forum Channels