Navigation

    Quasar Framework

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

    How to set dynamic function to tree component handler ?

    Show & Tell
    6
    13
    5017
    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.
    • E
      Evandro P. last edited by Evandro P.

      How to set dynamic function to tree component handler ? For example. There is a function (myFunction) and I want to assign this with all nodes from the specific level of the tree component.

      Should I use something like that ? tree1.push({‘title’: ‘option 1’, ‘expanded’: true, handler: myFunction () })

      1 Reply Last reply Reply Quote 0
      • rstoenescu
        rstoenescu Admin last edited by

        @Evandro-P yes. this is the way. Tree component uses an array so you can start with a basic one and change it as you go. Please also take notice of the Vue reactivity regarding arrays when changing it: https://vuejs.org/v2/guide/list.html#Array-Change-Detection

        1 Reply Last reply Reply Quote 0
        • D
          dg last edited by

          Hello, I can you please help me to understand what I am doing wrong here with a tree?

          model=tree

          this.tree.push({
          title: ‘name’,
          expanded: false,
          children: [],
          handle: function(item){
          alert(‘trigger handler by click on tree leaf’)
          })
          Why alert says nothing after click?

          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by

            Could you please add your whole component and also put your code inside two sets of three backticks (```) so it stays formatted? Thanks.

            At first view, it looks like you are missing a curly brace.

            this.tree.push({
              title: ‘name’,
              expanded: false,
              children: [],
              handle: function(item){
                alert(‘trigger handler by click on tree leaf’)
              }
            })
            

            Scott

            1 Reply Last reply Reply Quote 0
            • D
              dg last edited by dg

              Hi Scott, thanks for answer. I missed curly brace just here and I have it in working version.

              My idea is to use handle function to load children by using item.id. After I call backend with item_id, I will get all items children

              <template>
                  <div> 
              
                      <q-tree :model="tree"
                              contract-html="<i>remove_circle</i>"
                              expand-html="<i>add_circle</i>">
                       </q-tree>
              
                   </div>
              </template>
              
              export default {
                      data() {
                          return {
                              tree: []
                          }
                      },
                      created() {
                          this.tree = this.get_leaves()
                      },
                      methods: {
                          get_leaves(parent_ou_id){
                              let leaves: Leaf[] = []
                              let args = {
                                  parent_ou_id: parent_ou_id ? parent_ou_id : null    // if parent_ou_id == null -> root
                              }
              
                              // get list form backend
                              entity_list('base_ou', args, ['+name']).then( ou_list => {
                                  if(ou_list && ou_list.length > 0){
                                      for(let ou of ou_list){
                                         leaves.push(this.normilizeLeaf(ou))
                                      }
                                  }
                              }).catch(err => {
                                  console.error(err)
                              })
                              return leaves
                          },
                          normilizeLeaf(ou){
                              return {
                                  id: ou.id,
                                  title: ou.name,
                                  expanded: false,
                                  children: ou.kids > 0 ? [''] : [], // need that to render <i></i>
                                  handle: function(item){
                                      alert('handler')
                                      if(item.children.length > 0){
                                          item.children = this.get_leaves(item.id) // parent_id to call  a list of children
                                      }
                                  }
                              }
                          }
                      }
                  }
              

              will this code I have got only a root since I call that function in created(), but my handler function does not work

              1 Reply Last reply Reply Quote 0
              • rstoenescu
                rstoenescu Admin last edited by

                @dg Hi, it’s handler with an ending ‘r’, instead of handle.

                1 Reply Last reply Reply Quote 0
                • s.molinari
                  s.molinari last edited by

                  Oh. Duh! 😄

                  Scott

                  1 Reply Last reply Reply Quote 0
                  • D
                    dg last edited by

                    @rstoenescu
                    thanks for that, but it still doesn’t work

                    1 Reply Last reply Reply Quote 0
                    • rstoenescu
                      rstoenescu Admin last edited by

                      @dg I can assure handler() works, but don’t know the exact specifics on your implementation. Unfortunately I’m overloaded with preparing v0.14 release. Can you ping me after that pls? Thank you and sorry I can’t help more at the moment.

                      1 Reply Last reply Reply Quote 0
                      • D
                        dg last edited by

                        @rstoenescu
                        thanks for your answer, I understand 🙂 and Good luck with a new release

                        1 Reply Last reply Reply Quote 0
                        • rstoenescu
                          rstoenescu Admin last edited by

                          Thank you. It will take everything to a new level.

                          1 Reply Last reply Reply Quote 0
                          • T
                            toso last edited by

                            @rstoenescu
                            I’m new to Quasar Framework but it looks like the handler only will be called for leaf nodes as toggle return before the handler call if the node is expandable:

                            var QTreeItem = { render: function render() {
                            …
                            methods: {
                            toggle: function toggle() {
                            if (this.isExpandable) {
                            this.model.expanded = !this.model.expanded;
                            return;
                            }

                              if (typeof this.model.handler === 'function') {
                                this.model.handler(this.model);
                              }
                            }
                            

                            },
                            computed: {
                            isExpandable: function isExpandable() {
                            return this.model.children && this.model.children.length;
                            }
                            }
                            };

                            1 Reply Last reply Reply Quote 0
                            • benoitranque
                              benoitranque last edited by

                              @dg can you confirm you are getting data from your backend? It seems to me you return leaves before you get a response from your backend

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