Selected array on multi selection not working

[Yogiii]

Hello,

First, thanks for your work, Im testing the component with multi selection and it seems the selected array is not working. It is always empty Here the simple exemple i use : selected ref is always empty

<template>
  <q-grid :data="data" :columns="columns" :columns_filter="true" :draggable="true" selection="multiple"
          :csv_download="true" file_name="sample" :groupby_filter="true"
          :selected="selected"
          @selected-val="GetSelected($event)"></q-grid>

  <div class="q-mt-md">
    Selected: {{ JSON.stringify(selected) }}
  </div>

</template>

**....**

export default defineComponent({
  name: "GroupingComponent",
  setup() {
    return {
      columns,
      data,
      selected:ref([]),
      GetSelected(Selected) {
        console.log(Selected)
        console.log(this.selected)
      }
    }
  }
})
</script>

[pratik227]

Yes it will not update that variable.

You need to reassign it to selected.

<q-grid :data="data" :columns="columns" :columns_filter="true" :draggable="true" selection="multiple"
            :csv_download="true" file_name="sample" :groupby_filter="true"
            :selected="selected"
            @selected-val="GetSelected($event)">
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th auto-width></q-th>
          <q-th
            v-for="col in props.cols"
            class="text-italic text-purple"
          >
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>
    </q-grid>
    {{selected}}

setup() {
    return {
      data,
      columns,
      selected: ref([]),
      GetSelected(Selected) {
        this.selected = Selected
        console.log(Selected)
        console.log(this.selected)
      }
    }
  }

This work fine for me. let me know if it works

[Yogiii]

Perfect thank you !

[Yogiii]

Im trying to add a button to clear the selection, I tried to clear the ref seleted array, is not working Could you help me please

[pratik227]

Please Try the new version.

<q-btn @click="selected=[]" label="Clear Selection"></q-btn>

    <q-grid :data="data" :columns="columns" :columns_filter="true" :draggable="true" selection="multiple"
            :csv_download="true" file_name="sample" :groupby_filter="true"
            :selected="selected"
            @selected-val="GetSelected($event)">
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th auto-width></q-th>
          <q-th
            v-for="col in props.cols"
            class="text-italic text-purple"
          >
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>
    </q-grid>

[Yogiii]

Hello, Its cleaning the selected ref, but the checkboxs are still checked

[pratik227]

It's working fine for me

[pratik227]

screencast-localhost_8080-2022.09.30-18_07_11.webm

    <q-btn @click="selected=[]" label="Clear Selection"></q-btn>

    <q-grid :data="data" :columns="columns" :columns_filter="true" :draggable="true" selection="multiple"
            :csv_download="true" file_name="sample" :groupby_filter="true"
            :selected="selected"
            @selected-val="GetSelected($event)">
      <template v-slot:header="props">
        <q-tr :props="props">
          <q-th auto-width></q-th>
          <q-th
            v-for="col in props.cols"
            class="text-italic text-purple"
          >
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>
    </q-grid>
    {{selected}}
  </q-page>```

export default defineComponent({
  name: 'Test10',
  setup() {
    return {
      data,
      columns,
      selected: ref([]),
      GetSelected(Selected) {
        this.selected = Selected
        console.log(Selected)
        console.log(this.selected)
      }
    }
  }
})

[pratik227]

Please check you are using the latest version or not.

[Yogiii]

Just reinstalled now, the latest version i found is 1.0.9, and still not working

[pratik227]

Please refer this Repo it's working

https://github.com/pratik227/grid-check

[plebanip]

Hi,

related to the same topic, I have the opposite problem. When I select a single row (regardless of the row), the components select all the rows.

Any hints?

Here the code. Thanks!

  <q-page class="q-pa-md">
    <q-grid
      :data="my_data"
      :columns="my_columns"
      :columns_filter="true"
      selection="multiple"
      :selected="selected"
      @selected-val="GetSelected($event)"
    ></q-grid>
    <q-card>
      <q-card-section> Selected: {{ selected }} </q-card-section>
    </q-card>
  </q-page>
</template>

<script>
import { defineComponent, ref } from "vue";

import DataService from "../services/DataService";

const my_columns = [
  {
    name: "id",
    required: true,
    sortable: true,
    align: "left",
    field: "id",
  },
  {
    name: "name",
    required: true,
    sortable: true,
    align: "left",
    field: "name",
  },
  {
    name: "address",
    required: true,
    sortable: true,
    align: "left",
    field: "address",
  },
  {
    name: "zip",
    required: true,
    sortable: true,
    align: "left",
    field: "zip",
  },
  {
    name: "city",
    required: true,
    sortable: true,
    align: "left",
    field: "city",
  },
];

export default defineComponent({
  name: "NamePage",

  setup() {
    return {
      my_data: ref([]),
      my_columns,
      selected: ref([]),
      GetSelected(Selected) {
        this.selected = Selected;
      },
    };
  },
  created() {
    this.DataService = new DataService();
  },
  mounted() {
    this.DataService.getData().then((data) => (this.my_data = data));
  },
});
</script>```

[pratik227]

@plebanip You need to provide :row-key="" which will be unique per data. By default it's name.

Property of each row that defines the unique key of each row (the result must be a primitive, not Object, Array, etc);

[Yogiii]

Hello,

I tried following ;

• reinstall the component with : quasar ext add qgrid -> not working

• Delete node_modules folder, and reinstall all dependencies -> not working

• I clone your qgrid-check project, and copy manually your QGrid.vue component on mine -> Worked

Did you publish your last version ?

[pratik227]

I have created that repo after publishing the package only So I think it will work. Maybe it's installing using cache try to clear npm cache and then try to install it it should work.

[pratik227]

https://www.npmjs.com/package/quasar-ui-qgrid/v/1.0.16

[plebanip]

@plebanip You need to provide :row-key="" which will be unique per data. By default it's name.

Property of each row that defines the unique key of each row (the result must be a primitive, not Object, Array, etc);

thanks for the reply. Unfortunately, it does not work. I put

:row-key="id" but when rendering I got a warning runtime-core.esm-bundler.js:38 [Vue warn]: Property "id" was accessed during render but is not defined on instance.

Actually, id is one of the fields in the column

Best

P.S.: I checked the documentation, but I was not able to find any mention to the row-key properties. Where is it?

[pratik227]

@plebanip You need to provide :row-key="" which will be unique per data. By default it's name.

Property of each row that defines the unique key of each row (the result must be a primitive, not Object, Array, etc);

thanks for the reply. Unfortunately, it does not work. I put

:row-key="id" but when rendering I got a warning runtime-core.esm-bundler.js:38 [Vue warn]: Property "id" was accessed during render but is not defined on instance.

Actually, id is one of the fields in the column

Best

P.S.: I checked the documentation, but I was not able to find any mention to the row-key properties. Where is it?

@plebanip It should be :row-key="'id'"

[pratik227]

Closing this issue.

[plebanip]

Hi Pratik,

sorry for re-opening the issue. I tried to use the :row-key="'_id'" as you suggested but the behavior remains the same. When I click on just one of the items, all the items will become selected. To have a confirmation, I printed out the selected variable and I confirm that the values of the _id property is unique for each item

Thanks

[pratik227]

Example - https://github.com/pratik227/grid-check/blob/main/src/pages/IndexPage.vue

Sorry my bad :row_key

:row_key="'_id'"

[Yogiii]

Hello Pratik,

Im trying to customize only one particular column with body slot, but with this i need to redefine others columns also, including checkbox on the first columns with his behaviour that is problematic. How can i do ?

Thank you

[plebanip]

Example - https://github.com/pratik227/grid-check/blob/main/src/pages/IndexPage.vue

Sorry my bad :row_key

:row_key="'_id'"

Great! it works! Thanks a lot