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

    QTable with multiple selection and QPopupEdit

    Help
    4
    15
    2702
    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.
    • metalsadman
      metalsadman last edited by

      It’s a qtable feature. Pls refer to the docs it’s filled with examples https://quasar.dev/vue-components/table#Example--Multiple-selection-and-custom-selected-rows-label.

      1 Reply Last reply Reply Quote 0
      • E
        eoinom last edited by

        Thanks metalsadman but I was already aware of that and implemented it in the code above and in my script, but it’s not working when I try to combine it with the example for having editable fields using QPopupEdit. There doesn’t seem to be any example in the docs that I can find for this case.

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

          @eoinom there is (well not literally) but see this example https://quasar.dev/vue-components/table#Example--Expanded-row-and-custom-selector, then change the q-toggle to a checkbox ie. <q-checkbox v-model="props.selected" /> https://q306jwnjx6.csb.dev/vuex-data-table. quasar components can be mixed and matched with other components.

          1 Reply Last reply Reply Quote 1
          • E
            eoinom last edited by

            Ah yes that’s what I needed, thanks for that.

            1 Reply Last reply Reply Quote 1
            • M
              Mak-NOAA last edited by Mak-NOAA

              @eoinom @metalsadman I had the same situation and I got the checkboxes to show up however all the checkboxes are prechecked (with the dash icon) and I can’t uncheck them. I already had another variable called “selected” so for the purpose of the example, I renamed “selected” to “rowSelected” so my getSelectedString changed to:

              private getSelectedString() {
                  return this.rowSelected.length === 0
                    ? ''
                    : `${this.rowSelected.length} record${
                        this.rowSelected.length > 1 ? 's' : ''
                      } rowSelected of ${this.data.length}`;
                }
              

              any thoughts ?

              For my column, I had put the checkbox as such:

              <q-td auto-width>
                                  <q-checkbox dense v-model="props.rowSelected" />
                                </q-td>
              

              Screen Shot 2019-06-30 at 9.31.25 PM.png

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

                @Mak-NOAA your rowSelected property must be initiated first on your data array. ie. ... data:[ { ..., // your other fields rowSelected: false } ]. I suggest not using selected tho, since it’s being used internally by QTable.

                1 Reply Last reply Reply Quote 0
                • M
                  Mak-NOAA last edited by

                  @metalsadman I tried to add
                  trip.rowSelected = false
                  below the following line (where I retrieve the data):
                  https://github.com/nwfsc-fram/boatnet/blob/master/apps/obs-web/src/views/DebrieferTrips.vue#L402

                  however the boxes are still checked. I’m sure there’s an obvious bug there, can you please have a look?

                  I was using “selected” to figure out which column cells were selected as I have a dialog box that needs to allow the user to edit the cells selected.

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

                    @Mak-NOAA
                    just change your checkbox.

                    <q-td auto-width>
                       <q-checkbox dense v-model="props.selected" />
                    </q-td>
                    

                    selected is exposed by your slot’s props in your case the body https://quasar.dev/vue-components/table#QTable-API you can check the full properties there.
                    when a row is selected, then it will be stored in your rowSelected array and be sure that what you passed in your QTables prop row-key="id" is a prop in your row (does id exist in your row and is it unique?).

                    1 Reply Last reply Reply Quote 0
                    • M
                      Mak-NOAA last edited by Mak-NOAA

                      @metalsadman I changed the checkbox to <q-checkbox dense v-model=“props.selected” /> but what happened was that all rows get selected now if I select any checkbox.
                      Screen Shot 2019-07-01 at 10.53.21 AM.png

                      Are you saying for my own array for column cell selection, I should not use “selected” as it’s reserved by the framework?

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

                        @Mak-NOAA i think the issue here is the row-key, try giving it the __index ie row-key="__index".

                        1 Reply Last reply Reply Quote 0
                        • M
                          Mak-NOAA last edited by

                          @metalsadman yes that fixed it, thank you!

                          Sorry I’m new to Quasar but can you explain more about what just happened? 🙂

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

                            @Mak-NOAA

                            https://quasar.dev/vue-components/table#Selection

                            its a good idea to read the doc page of the component you are trying to use, so you can learn what he can do and how you should do it.

                            https://quasar.dev/vue-components/table#QTable-API

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

                              By the way __index is not so good because it is private (everything starting with __ is private), its better if your data has an unique value such as id

                              1 Reply Last reply Reply Quote 0
                              • M
                                Mak-NOAA last edited by

                                Thanks @lucasfernog looks like row-key=“key” was needed as that was my unique identifier

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