Option to disable draggable for specific rows

[Orlay86]

Hi,

maybe I am overlooking this option, but I couldn't figure it out on my own.

Is it somehow possible (via class selector e.g.) to disable draggable for a row/column (while keeping it for the others)?

Thanks a lot for you great work!

[pratik227]

Hi @Orlay86,

Just published the new version. I have added New Props called ignore_rows which is array basically You can pass the index or row that you want's to ignore.

Note: If you are using Body slot then you needs to handle the class thing manually:

Example:

:class="ignore_rows && ignore_rows.includes(getFilteredValuesData.indexOf(props.row))?'ignore-elements':''"

Please let me know if you have any questions.

Thanks,
Pratik Patel

[pratik227]

Hi @Orlay86 ,

Added New props. ignore_cols and ignore_rows.

Closing this issue let me know if you have any questions

Thanks,
Pratik Patel

[Orlay86]

Hi,

excuse me for answering right after you closed the issue, I couldn't test it until right now.
First of all, thanks a lot for this lightning fast implementation!

But, in my use case I am not sure how to properly implement the properties.
To explain what I am doing (or trying to do), is using the component and body slot like this to achieve some kind of hierarchy in the table (if you need information considering the db structure, please let me know) and to be able to access the nested properties of each row:

<q-grid
  :data="structureData"
  :columns="columnsStructure"
  :pagination="pagination"
  :row-key="'id'"
  :draggable="true"
  @dragged_row="DraggedRow($event)"
>
  <template v-slot:body="props">
    <DeviceGroupTreeTableRow
      :row="props.row"
      :columns="columnsStructure"
      @refresh="fetchStructure()"
    />
  </template>
</q-grid>

And in that component it's basically the definition of the q-tr etc.:

<template>
  <q-tr :props="props" v-if="row.level == 0 || row.level == 1">
    <template v-for="col in columns" :key="col.name">
      <q-td class="bg-teal-4" v-if="col.name == 'description'" colspan="16">
        <div class="row">
        <span :style="{ 'padding-left': row.level * 20 + 'px' }" class="text-weight-bold ">
          {{ row[col.field] }}
        </span>
          <div>
            <q-btn
            class="gt-xs"
              size="12px"
              flat
              dense
              round
              icon="edit"
              v-if="col.name == 'description'"
              @click="structure.description = props.row.description"
            />
            <q-popup-edit
              v-model="structure.description"
              auto-save
              v-slot="scope"
              @save="updateStructure(structure.description)"
            >
              <q-input
                v-model="scope.value"
                dense
                autofocus
                counter
                @keyup.enter="scope.set"
                @update:modelValue="structure.description = scope.value"
              />
            </q-popup-edit>
          </div>
          <q-btn
            v-if="col.name == 'description'"
            class="gt-xs"
            size="12px"
            flat
            dense
            round
            icon="delete"
            @click="deleteProjectStructure(row.id)"
          />
        </div>
      </q-td>

    </template>
  </q-tr>

  <q-tr :props="props" v-else>
    <template v-for="col in columns" :key="col.name">
      <q-td v-if="col.name == 'measurement_location_number'">
        <div class="row no-wrap items-center content-center justify-between">
          <div class="text-weight-bold text-body1">
            <q-list v-for="value in row.deviceValues" :key="value.id">
              <div>
                {{ value.measurement_location_number ?? " - " }}
              </div>
            </q-list>
          </div>
        </div>
      </q-td>

      <q-td v-else>
        <span>
          {{ row[col.field] }}
        </span>
      </q-td>
    </template>
  </q-tr>
</template>

How or rather where do I use the new ignore_rows property here if I want only the rows under the v-else not to be draggable?
I assumed or rather hoped it would be with a simple :ignore_rows="true" or something similar on that q-tr, but it seems I didn't really understand your implementation with your example.

Could you help me out here or give some pointers please?

Thanks a lot in advance, and thanks again for your help so far already!

[pratik227]

: ignore_rows="[0]" it takes Index of row that you want's to ignore same for columns

[pratik227]

If you are using body slot then just add the class based on the condition that you want.

You just need's to add 'ignore-elements' class which row you want to ignore.

[Orlay86]

Thanks a lot for the answer!

I've ran in a bit of an issue though, not sure if you can help or if that is a "bug" or just the way the component internally renders the table rows, but if I use v-if / v-else-if / v-else for the definition of q-tr, the "ignore-elements" class only works on the first q-tr (e.g. in my case the v-if).
I can of course just reorder my component/logic there, but I would be interested in the reason for this behaviour nonetheless.

[pratik227]

Hi @Orlay86 ,

I can't help direct. Please create some codepen or sample repo with sample data then I can help.

Thanks,
Pratik Patel

[Orlay86]

Hi,

I tried to setup the codepen here:
https://codepen.io/Dominik-Fink/pen/ExOeKjV

But I couldn't get the extension itself to work, tbqh I just don't know how to.
I hope this gives you some idea what I mean though.
For me the result is that the q-tr that are using the ignore-elements class, but are conditionally rendered using v-if/v-else, are still draggable.
If I add the ignore-elements class to the first q-tr (basically the first v-if), then it works, but for every q-tr, no matter the v-if/v-else definition.

If you still need it to help, I can try to setup a working repo for the issue.

[pratik227]

Hi @Orlay86,

Apologies for late reply. It's bcz on the drag start it's not checking the ignore elements. I just published the new version. It should Work now.

<q-grid :data="data" :columns="columns" :draggable="true">
      <template v-slot:body="props">
        <q-tr :props="props" v-if="(['Cupcake','Frozen Yogurt'].includes(props.row.name))" class="bg-teal-4">
          <q-td key="name">
            {{ props.row.name }}
          </q-td>
          <q-td key="calories">
            <q-badge color="green">
              {{ props.row.calories }}
            </q-badge>
          </q-td>
          <q-td key="fat">
            <q-badge color="purple">
              {{ props.row.fat }}
            </q-badge>
          </q-td>
          <q-td key="carbs">
            <q-badge color="orange">
              {{ props.row.carbs }}
            </q-badge>
          </q-td>
          <q-td key="protein">
            <q-badge color="primary">
              {{ props.row.protein }}
            </q-badge>
          </q-td>
          <q-td key="sodium">
            <q-badge color="teal">
              {{ props.row.sodium }}
            </q-badge>
          </q-td>
          <q-td key="calcium">
            <q-badge color="accent">
              {{ props.row.calcium }}
            </q-badge>
          </q-td>
          <q-td key="iron">
            <q-badge color="amber">
              {{ props.row.iron }}
            </q-badge>
          </q-td>
        </q-tr>

        <q-tr :props="props" v-else class="bg-red-9 testclass ignore-elements">
          <q-td key="name">
            {{ props.row.name }}
          </q-td>
          <q-td key="calories">
            <q-badge color="green">
              {{ props.row.calories }}
            </q-badge>
          </q-td>
          <q-td key="fat">
            <q-badge color="purple">
              {{ props.row.fat }}
            </q-badge>
          </q-td>
          <q-td key="carbs">
            <q-badge color="orange">
              {{ props.row.carbs }}
            </q-badge>
          </q-td>
          <q-td key="protein">
            <q-badge color="primary">
              {{ props.row.protein }}
            </q-badge>
          </q-td>
          <q-td key="sodium">
            <q-badge color="teal">
              {{ props.row.sodium }}
            </q-badge>
          </q-td>
          <q-td key="calcium">
            <q-badge color="accent">
              {{ props.row.calcium }}
            </q-badge>
          </q-td>
          <q-td key="iron">
            <q-badge color="amber">
              {{ props.row.iron }}
            </q-badge>
          </q-td>
        </q-tr>
      </template>
    </q-grid>

This is working. Please check and let me know if it works.

Thanks,
Pratik Patel

[pratik227]

Closing this issue