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

    [Solved] Help needed: How to do ticking in q-tree with header slot for nodes

    Help
    1
    2
    332
    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.
    • M
      Mickey58 last edited by Mickey58

      I’m trying to get a q-tree that has a custom header slot for the nodes with the ability to tick nodes. I have defined an array for the nodes (:nodes=“myArray”) and :ticked.sync=“tickedKeys”.

      The header slot has

      <template v-slot:default-header="prop">
      

      With that, I can correctly render fields like {{ prop.node.fieldName }} in the header of each node in the tree. So my q-tree works fine, except for the ticking:

      For the ticking, I added a custom

      <q-checkbox v-model="prop.node.ticked">
      

      as part of the above header. That displays a checkbox per node in the tree. But when I click one of those checkboxes, nothing happens, except that I observed that a field “ticked”: true (or false) is added to the above array specified for :nodes of the tree. I have not added that field when I load the nodes array initially, because I believed Quasar would do that internally.

      However, tickedKeys (in :ticked.sync) is not updated by these checkboxes, so the ticking through the above custom checkboxes has currently no effect.

      How do I have to define the custom header and checkbox to do the ticking? Can Quasar generate that checkbox for ticking, even for a custom header?

      1 Reply Last reply Reply Quote 0
      • M
        Mickey58 last edited by Mickey58

        I realized meanwhile that, when specifying a tick-strategy as a prop of the q-tree (which I forgot in my first tests), Quasar auto-generates the checkboxes for the ticking, even if there is a custom header slot set up for the q-tree.

        So my assumption above that I need to add a custom checkbox in the custom header was wrong. That custom q-checkbox is not needed, because ticking can be done through checkboxes generated by Quasar (if there is a tick-strategy prop for q-tree). Those Quasar checkboxes for ticking operate on the :ticked.sync array which holds the ids of currently ticked nodes.

        The node.ticked field mentioned above is also not required - it was added due to the v-model of the custom q-checkbox.

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