Log in to start a topic

Regarding the TreeView checkboxes

Posted by: mayank.dixit on 28 September 2021, 3:15 am EST

  • mayank.dixit

    • Post Options:
    • Link
      Copy

    Posted 28 September 2021, 3:15 am EST - Updated 3 October 2022, 12:20 pm EST



    There are two points I want to highlight here

    1:-I need a blue color fill inside the checkbox square I am doing it like this.

    ele.getElementsByClassName("wj-node-check")[0].style.backgroundColor="#58bef6"
``` inside the Formatitem fucntion but it is not highligthing there.
2:- when I checked or unchecked on the checkbox  it is going to the next level even I am using this property of treeview [expandOnClick]="false" still it is going to the next level. what I want is when we are clicking on the text we are going to the next level and when we are check or uncheck the checkbox it will call a function based on conditions.
For reference, you can check the attachment 
Thank You

  • sonu.pandey

    Posted 29 September 2021, 1:57 am EST

    Hello,

    1. As per my understanding, you want to change the default edge color of the checkboxes (when checked), if that’s the case then you may use the following CSS given below to change the color:
    

.wj-node-check {
  color: blue !important;
  accent-color: currentcolor;
}

    Note: please refer to the documentation for more information on the browser support for accent-color

    You may also refer to the sample demonstrating the same: https://stackblitz.com/edit/js-wrpnyz?file=style.css

    Let us know if that’s works for you.

    Regards

  • mayank.dixit

    Posted 29 September 2021, 2:17 am EST - Updated 3 October 2022, 12:20 pm EST

    Thank you for the quick reply but I want something like this it has to be visible when the checkbox is not checked.

  • sonu.pandey

    Posted 30 September 2021, 3:19 am EST

    Hello,

    It would not be possible to directly change the unchecked state to the background color, if you wish to do so then you may create a custom checkbox and replace it with the default checkboxes. Please refer to the sample link below demonstrating the above:

    https://stackblitz.com/edit/js-ci2vaf?file=style.css

    You can refer to the style.css to refer to the CSS applied to the added checkboxes. Let us know if that’s works for you.

    Regards

  • mayank.dixit

    Posted 30 September 2021, 4:05 am EST

    Thank You for this please check the second one as well.

  • sonu.pandey

    Posted 1 October 2021, 5:05 am EST

    Hello,

    As per our understanding, you are facing any issue with expanding/collapsing of the parent nodes on check/uncheck of their checkboxes, if that’s the case then we are unable to replicate the issue at our end. Could you please clarify if you are facing the issue with the shared sample too? If you are facing this issue only in your application but not in the shared sample then it is possible that the issue is arising due to some code specific to your application. Since we are unable to replicate the issue, I would request you to share a sample that demonstrates the issue so that we could further investigate the root cause of the issue and assist you accordingly.

    If you wish to make a function call when a checkbox gets checked then you may handle the checkedItemsChanged event to the TreeView to get information of the checkedItems to call your function.

    If my understanding is wrong please do let us know the exact issue you are facing.

    Regards

  • mayank.dixit

    Posted 4 October 2021, 1:56 am EST - Updated 3 October 2022, 12:21 pm EST

    Hi Team we have this link for treeView checkboxes whenever I am checking the checkbox named electronics, toys, home it got expanded. I am attaching the screenshot of it as well.

    <wj-tree-view #theTree [itemsSource]=“items” [displayMemberPath]=“‘name’” [childItemsPath]=“‘test’”

    (formatItem)=“FormatItem(theTree, $event)” [allowDragging]=“true” [showCheckboxes]=“true”

    [expandOnClick]=“false” [expandOnLoad]=“false” (itemClicked)=“getNodeValue($event)”>



    this is the code for my treeview component

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



    as we can see in demo it is not expanding at all after clicking there

  • sonu.pandey

    Posted 5 October 2021, 5:59 am EST

    Hello,

    As per our understanding, you don’t want the parentNode to get expanded when checking the checkbox,

    if so, then as you mentioned above we are unable to replicate the issue on wijmo demos. So could you please provide a sample replicating the issue as we are unable to replicate the issue at our end?

    if not, could you please let us know the scenario you want to achieve when checkboxes are clicked?

    Let us know the information mentioned above, we would be happy to help you out.

    Regards

  • mayank.dixit

    Posted 11 October 2021, 5:58 am EST - Updated 3 October 2022, 12:21 pm EST

    Hi Team, What I want is when we click on the checkbox then x event will trigger and it will only expand when we click on the node text. But in my case on clicking a checkbox and on the text is expanding.



    as in the below image we have both checkbox and text.

    <wj-tree-view #theTree [itemsSource]=“items” [displayMemberPath]=“‘name’” [childItemsPath]=“‘test’”

    [allowDragging]=“true” [showCheckboxes]=“true”

    [expandOnClick]=“false” (checkedItemsChanged)=“onCheckedItemsChanged()” (itemClicked)=“onItemClicked()”>



    so I tried this by myself here we are calling two functions in treeView or we can say two events one is itemClicked and the other is checkedItemsChanged, the output is coming like whenever I am clicking on checkBox it is printing checkbox clicked and itemClicked whenever I am clicking on the text or we can say node text, in that case, it is printing itemClicked only but I want that when we are clicking on checkbox it will print only checkbox clicked or only (checkedItemsChanged) event will trigger.

    Below is my reference link

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

    i am using this demo as a reference

    These are fucntions i am calling

    onCheckedItemsChanged(){

    console.log(“checkbox clicked”)

    }

    onItemClicked(){
    console.log('itemclicked')
}

  • sonu.pandey

    Posted 14 October 2021, 5:51 am EST - Updated 3 October 2022, 12:21 pm EST

    Hello,

    As per my understanding, You want to only trigger the onCheckedItemsChanged event when clicked on the checkboxes, if so then we apologize but this is by design, however, you may use a flag variable to check if the checkbox is clicked or not and prevent onItemClicked event execution. Please refer to the sample link demonstrating the same:

    https://stackblitz.com/edit/angular-mqsvgy?file=src%2Fapp%2Fapp.component.ts

    Also, we are unable to replicate the issue of expanding/collapsing the nodes when clicked on checkboxes(when checked/unchecked). I have attached a gif demonstrating the behaviour at our end. Could you confirm if the behaviour is the same at your end too? if not could you please share a gif or video of the behavior you have observed at your end? so that we can investigate the issue accordingly.

    Regards

  • mayank.dixit

    Posted 19 October 2021, 3:25 am EST - Updated 3 October 2022, 12:21 pm EST

    Hi Team above stackblitz is perfectly working for us but for our usage we have three states one is

    Never

    Always

    Conditional

    In never state checkbox will not be clicked and when we clicked there must be some functional calling.

    In always state it will be always clicked

    In the conditional state, it will be colorful as the above stackblitz has and when we are clicking on that colorful checkbox it will perform a function as it is doing.

    Thank you for that so our 2 requirements got fulfilled by the above demo but we also want never state as well.

    Please help with that as well



    I added a image of three states

  • mayank.dixit

    Posted 19 October 2021, 3:33 am EST

    This zip contains the gif regarding the checkbox states please look into that.

    Gif checkbox.zip

  • sonu.pandey

    Posted 20 October 2021, 7:54 am EST

    Hello,

    As per my understanding, you want to disable a checkbox to be never gets checked, and on click of the checkbox you would like to call a function, if so then you may refer to the sample link below demonstrating the same:

    https://stackblitz.com/edit/angular-ceadk4?file=src%2Fapp%2Fapp.component.ts

    In the above sample, the Toys item checkbox is disabled and cannot be checked. Let us know if that fulfills your requirement.

    Regards

Need extra support?

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

Learn More

Forum Channels

  • © 2023 MESCIUS USA, Inc. All Rights Reserved.  ·  1.800.858.2739

    All product and company names herein may be trademarks of their respective owners.