No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Q-Tree: How to retrieve the filtered nodes instead of the entire nodes

    Help
    filter q-tree
    4
    8
    325
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • F
      Florentin last edited by

      Hi, I am currently using the tree component for my quasar web app.
      When I select a node from the tree I want to retrieve my nodes filtered

      For example, when I select the node “Good food”, I want to retrieve “Good food” with only one child (because I filtered). But instead I got it with 2 children.
      7ca1b7f3-5ad9-4a2e-bca4-fceed115c539-image.png
      Here the example without filter
      3fa6ad67-e6ad-42cd-9032-9819d726570e-image.png

      Here is my codepen : https://codepen.io/FGremy/pen/yLVMdVj?editors=1010

      Do you know a way to only retrieve the filtered nodes ?

      Thanks for your attention

      metalsadman 1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel last edited by

        @beets @metalsadman any ideas? I can only come up with something complicated 😞

        1 Reply Last reply Reply Quote 0
        • metalsadman
          metalsadman @Florentin last edited by

          @florentin you will have to filter the nodes again in the selected.

          F 1 Reply Last reply Reply Quote 0
          • F
            Florentin @metalsadman last edited by Florentin

            Hi @metalsadman, if I do that in the example, I wont keep the node “satisfied customers”.

            fde6a3da-43b0-47f6-a34b-3ca062456385-image.png

            Or there is something i dont get ?

            metalsadman 1 Reply Last reply Reply Quote 0
            • metalsadman
              metalsadman @Florentin last edited by

              @florentin try to console.log your qtree’s meta property, see what’s in there. ie. console.log(this.$refs.qTreeRef.meta).

              1 Reply Last reply Reply Quote 0
              • X
                xdesai last edited by

                @Florentin I had been wondering this too, and although it feels hacky, it works. I used the Vue devtools to inspect the tree instance and you can see that the filtered nodes are in the tree’s refs.

                I’ve built on your codepen example to spit out the node names, you should be able to adjust to your needs from there (I attached it to the input function of q-input, so try clearing then typing in and you’ll see the selected nodes at the top.

                https://codepen.io/xariusdesai/pen/RwogmdE

                dobbel 1 Reply Last reply Reply Quote 3
                • dobbel
                  dobbel @xdesai last edited by

                  @xdesai

                  very nice!

                  1 Reply Last reply Reply Quote 0
                  • F
                    Florentin last edited by

                    @xdesai Thanks a lot, it’s perfectly what i was searching for 😉

                    1 Reply Last reply Reply Quote 0
                    • First post
                      Last post