Comments (10)
pratik227
commented on July 26, 2024
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
from quasar-qgrid.
pratik227
commented on July 26, 2024
Hi @Orlay86 ,
Added New props. ignore_cols and ignore_rows.
Closing this issue let me know if you have any questions
Thanks,
Pratik Patel
from quasar-qgrid.
Orlay86
commented on July 26, 2024
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!
from quasar-qgrid.
pratik227
commented on July 26, 2024
: ignore_rows="[0]" it takes Index of row that you want's to ignore same for columns
from quasar-qgrid.
pratik227
commented on July 26, 2024
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.
from quasar-qgrid.
Orlay86
commented on July 26, 2024
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.
from quasar-qgrid.
pratik227
commented on July 26, 2024
Hi @Orlay86 ,
I can't help direct. Please create some codepen or sample repo with sample data then I can help.
Thanks,
Pratik Patel
from quasar-qgrid.
Orlay86
commented on July 26, 2024
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.
from quasar-qgrid.
pratik227
commented on July 26, 2024
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
from quasar-qgrid.
pratik227
commented on July 26, 2024
Closing this issue
from quasar-qgrid.
Related Issues (20)
- How to add a header filter for a field, which is an array HOT 1
- Dragged rows issue with reactive data HOT 7
- Filters doesn't work with api req HOT 2
- dragged_row not declared in emits or props HOT 2
- Prop for default value Records per page HOT 5
- QGrid Date Range Filter HOT 5
- How to display object in grid
- Throws run time error- filter is undefined on the page where qgrid is used. HOT 1
- Minor Improvements HOT 1
- Version 0.0.8 api.registerDescribeApi is not a function error HOT 2
- Selected array on multi selection not working HOT 22
- Customize column HOT 1
- Custom selected row not working HOT 7
- Filter data HOT 2
- How to get filtered data when the column filtered HOT 3
- Returns an undefined column error when using a functional field in column definitions HOT 3
- cannot sort when pass prop pagination as an object HOT 2
- cannot filter when passing string from a parent component. HOT 10
- filter type select failed HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from quasar-qgrid.