Visual Builder

Get Involved. Join the Conversation.

Topic

    Amitabha Dutta
    How to implement Checkbox Tree in VBCSAnswered
    Topic posted October 14, 2019 by Amitabha DuttaBlue Ribbon: 750+ Points, tagged JET 
    33 Views, 4 Comments
    Title:
    How to implement Checkbox Tree in VBCS
    Summary:
    oj-tree-view in VBCS
    Content:

    I tried to implement Checkbox Tree in VBCS following JET component https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=treeView&demo=checkbox
    Based on a hard-coded static JsonTreeDataSource, the tree got rendered, but I am not able to used the row.data.selected() function inside itemTemplate slot.
    Console log shows error:- Message: row.data.selected is not a function

    Can anyone through some insights on how to use the checkbox tree? I am uploading the sample application that renders the static tree.

     

    Version:
    19.3.1.2
    Document:

    Best Comment

    David Konecny

    Have another look at the JET sample and notice how addSelectedObservables() function is used to add into each JSON node "selected" property which is of type "ko.observable()". And that is exactly what is missing in your data set which you create in populateTree() function. I find the JET sample quite complicated but I guess it is needed so that checkbox on parent branches automatically updates their state based on leaf node selection. If I were you I would start by simply adding "selected" property into your JSON payload and use it as regular property from your template (not function) - that should be enough if you are only after on/off for any tree node regardless of children selection.

    -David

    Comment

     

    • David Konecny

      Have another look at the JET sample and notice how addSelectedObservables() function is used to add into each JSON node "selected" property which is of type "ko.observable()". And that is exactly what is missing in your data set which you create in populateTree() function. I find the JET sample quite complicated but I guess it is needed so that checkbox on parent branches automatically updates their state based on leaf node selection. If I were you I would start by simply adding "selected" property into your JSON payload and use it as regular property from your template (not function) - that should be enough if you are only after on/off for any tree node regardless of children selection.

      -David

      • Amitabha Dutta

        Hi David,

        Thanks for the suggestion, I tried using addSelectedObservables but it did not work - maybe I missed something again. But the workaround idea seemed easy to use and I was able to display partially selected tree. But when I tried to capture the on/off event on a tree node using click Event on Tree View, the event.currentTarget.currentItem inside the action chain constantly returned the previously node's key. Not sure if this is a bug inside VBCS, as I can see the correct value in the console log. Please let me know if you see any workaround to this - I am uploading the application that is displaying this behavior.

         

        • Amitabha Dutta

          Got it - the current selection is accessed by using -- document.getElementById('checkboxtree').getContextByNode(<event.target>).data -- to toggle the selected flag. Thanks !

          • David Konecny

            That's very "ugly" way to change the model. I will ask JET development team whether there is more direct way to do this. Im attaching an example app where there are two examples how to handle this:

            "Regular" one is similar to what you are doing. Things to note is how the selection is turned into ko.observable in the model and how toggling selection needs to lookup right item in the underlying JSON data tree.

            There is also "Simpler" one which is intentionally not using VB event handler (in order to preserve selected as observable! VB event listener would clone the data and remove the observable). Small drawback of this one is that folder/leaf icon disappears (because everything in the template needs to be wrapped into another <span> tag with click handler). Should be easy to replace with custom icon though.

            I tried a third solution where I placed the listener directly on the <li> element but that had a strange side effect of event listener being called not only on clicked item but also on all its parents (should it have some) - again I need to ask JET dev team about this. That's not what I would expect.

            HTH,
            -David