@Hawkeye64 Cool, thanks! That certainly takes it to another level.

So, I want to filter the tree by both a Search input box and / or a value passed by a button click that represents a status property on the leaf nodes. (Actually, there are 5 such buttons, each representing a different status, but for simplicity’s sake we pretend there is just one status value.)

This is the stripped-down solution.

<!-- The search input box -->
<q-input
  v-model="searchBox"
  label="Filter"
></q-input>

<!-- The button to filter where node status = 1 -->
<q-button @click="onClickStatus(1)">
  Status 1
</q-button>

<!-- The tree -->
<q-tree
  ref="projectTree"
  :filter="filterTrigger"
  :filter-method="customFilterMethod"
 ....
></q-tree>

export default {
  data () {
    return {
      searchBox: '',
      filterTrigger: 'true',
      statusFilter: ''
      ....
    }
  },

  watch: {
    // Whenever the searchBox property changes, 
    // use it to trigger the tree filter's reactivity
    // by assigning its value to the 
    // filterTrigger property. 
    // Actually, the value we assign here is irrelevant.
    searchBox: function (newVal, oldVal) {
      this.filterTrigger = newVal
    }
  },

  methods: {
    onClickStatus (statusId) {
      // This method is more complicated than this in reality,
      // but basically we track which of the 5 status' were clicked
      this.statusFilter = statusId
    },

    customFilterMethod (node, filterTrigger) {
      // The filterTrigger param is ignored in here.

      // Instead, we use the contents of the search box input ...
      const searchBoxText = this.searchBox.toLowerCase()

      const matchedNodeLabel = (node.label && node.label.toLowerCase().indexOf(searchBoxText) > -1)

      // And any status button that was clicked ....
      let matchedStatus = true

      if (this.statusFilter !== '') {
        // if the node status is in the list of filters, match it
        // Very simplified example code:
        matchedStatus = (this.statusFilter.indexOf(node.status) > -1)
      }

      // In our context we always AND the filters
      return (matchedNodeLabel && matchedStatus)
    }
  }
}

Now, if there is something typed into the search box, or if a status button is clicked, either or both of those values will be used to filter the tree nodes. Yay!

Oh… of course. I had done this:
extras: [
‘material-icons’
]

not realising I actually needed to add to that, eg:
‘material-icons’,
‘material-icons-outlined’,
‘material-icons-round’,
‘material-icons-sharp’

Thanks again!
Murray

I am using the out-of-the-box Material icons and when I ask for the outlined version I get the icon name as text instead of the icon.

Here is a screenshot from the Basic Example in CodePen:

From the docs: eg material-icons-outlined: o_thumb_up

How do I do that?
Thanks,
Murray

@beets Thanks for that. Sorry for the slow reply, I missed your post.

Hi. I am trying to make a vertical scrolling “panel” that fits inside another component and is responsive to both height and width. It almost works, but …

Here is my pen: https://codepen.io/flowt-au/pen/zYBarrZ

If I remove the toolbar and have a 100% height on #myPanel it works perfectly.

If I include the toolbar and have 100% height on #myPanel the scroll-area scrolling does not reveal the last items because the height is now below the bottom of the window by the height of the toolbar.

How to have a responsive height scroll-area with a toolbar above it? Any ideas?

Thanks!

So, I want to filter the tree by both a Search input box and / or a value passed by a button click that represents a status property on the leaf nodes. (Actually, there are 5 such buttons, each representing a different status, but for simplicity’s sake we pretend there is just one status value.)

This is the stripped-down solution.

<!-- The search input box -->
<q-input
  v-model="searchBox"
  label="Filter"
></q-input>

<!-- The button to filter where node status = 1 -->
<q-button @click="onClickStatus(1)">
  Status 1
</q-button>

<!-- The tree -->
<q-tree
  ref="projectTree"
  :filter="filterTrigger"
  :filter-method="customFilterMethod"
 ....
></q-tree>

export default {
  data () {
    return {
      searchBox: '',
      filterTrigger: 'true',
      statusFilter: ''
      ....
    }
  },

  watch: {
    // Whenever the searchBox property changes, 
    // use it to trigger the tree filter's reactivity
    // by assigning its value to the 
    // filterTrigger property. 
    // Actually, the value we assign here is irrelevant.
    searchBox: function (newVal, oldVal) {
      this.filterTrigger = newVal
    }
  },

  methods: {
    onClickStatus (statusId) {
      // This method is more complicated than this in reality,
      // but basically we track which of the 5 status' were clicked
      this.statusFilter = statusId
    },

    customFilterMethod (node, filterTrigger) {
      // The filterTrigger param is ignored in here.

      // Instead, we use the contents of the search box input ...
      const searchBoxText = this.searchBox.toLowerCase()

      const matchedNodeLabel = (node.label && node.label.toLowerCase().indexOf(searchBoxText) > -1)

      // And any status button that was clicked ....
      let matchedStatus = true

      if (this.statusFilter !== '') {
        // if the node status is in the list of filters, match it
        // Very simplified example code:
        matchedStatus = (this.statusFilter.indexOf(node.status) > -1)
      }

      // In our context we always AND the filters
      return (matchedNodeLabel && matchedStatus)
    }
  }
}

Now, if there is something typed into the search box, or if a status button is clicked, either or both of those values will be used to filter the tree nodes. Yay!

Hi. I have a tree that filters based on a search input. All good.

I also want to filter based on a button that relates to a status property of each node. So, when I click the button, filter the tree nodes for status === 1 (for example)

I have added the status filter to the custom filter method and as long as I type something into the search box the status filter works perfectly.

But… how do I tell the tree to start filtering ONLY from the button click? i.e. even if the search input is empty, filter on status?

I could not find a myTree.runFilter() method and as I am pretty new to Vue I could not work it out from the Quasar tree source code.

Thanks,
Murray

@metalsadman Thanks!

A more robust version:

    getParentNode (nodeid) {
      let parentNode = null
      if (nodeid) {
        const nodeMeta = this.$refs.projectTree.meta[nodeid]
        if (nodeMeta.parent) {
          parentNode = this.$refs.projectTree.getNodeByKey(nodeMeta.parent.key)
        }
      }
      return parentNode
    }

Each node in my tree has a unique nodeid property and node-key="nodeid".

With a set of ticked nodes, I also need to get their parents. getNodeByKey() and getTickedNodes() return node objects but it seems I cannot do:

const aNode = this.$refs.myTree.getNodeByKey(nodeid)
const parentNode = aNode.getParent()

Instead I have made my own method:

    getParentNode (nodeid) {
      const nodeMeta = this.$refs.myTree.meta[nodeid]
      const parentNode = this.$refs.myTree.getNodeByKey(nodeMeta.parent.key)
      return parentNode
    }

Am I missing something or is that the way to do it?
Thanks,
Murray