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

    QTree - is it possible to extend the header slots?

    Framework
    3
    5
    416
    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.
    • D
      ddenev last edited by ddenev

      Would it be possible to extend the QTree header slots to include the whole header element and not only the header content part (which excludes the expand icon and the header element itself)?

      Here is an illustration of what I mean (use-cases follow):
      39a822c3-6ed9-42d2-9e5a-a9142bae630b-image.png

      I have 2 use-cases why I need this:

      1. Adding drag-n-drop capability to the QTree elements via the TouchPan directive

      Unfortunately QTree does not support drag-n-drop so I decided to find a way to implement my own. I was thinking that having access to the QTree header slot would allow me to insert such functionality. Alas, currently I can only control the contents of the .q-tree__node-header-content element (which is a descendant of where I want to add draggability) via the QTree header slot but in order to add v-touch-pan I need access to an ancestor element. If it would be possible to override the whole .q-tree__node-header element via a header slot, that would work since then I would build the header myself (e.g. using QItem component or something else) and I would be able to add the v-touch-pan directive.

      1. I also want to make every item in the tree span the whole width of the main container. Here is an illustration of what I mean (I have removed the connector lines via CSS):
        95645872-250b-490f-be9e-02b64e084bad-image.png

      IMHO if I can override the whole header element then I would calculate the padding for each item (increasing with indent level) and that way I could keep the header element span the full width.
      Just for the record - currently I believe it might not be possible to overcome this simply with CSS because I could remove the default padding for children but then it would be a nightmare to add paddings to every element without full access to the header element.

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

        You might want to look at QList, QItem, and QExpansionItem.

        Scott

        1 Reply Last reply Reply Quote 1
        • D
          ddenev last edited by

          Yes, that is the “build your own Tree View component from scratch” approach. I was considering this but before I jump into the deep I wanted to explore if QTree could be exploited for the purpose.

          So my original question still stands - would it be possible to extend the QTree component with such capabilities?

          Thanks for the suggestion! 🙂

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

            @ddenev post a detailed feature request in gh, i saw your post there but it’s more like a question.

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

              @metalsadman, thank you, I was not completely sure if that is feasible to implement and that is why I stated it as a question.

              BTW, Razvan just stated in GH that he is OK to add a “full header slot” support.

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