Help | Quasar Framework Community

Your browser does not seem to support JavaScript. As a result, your viewing experience will be diminished, and you have been placed in read-only mode.

Please download a browser that supports JavaScript, or enable it if it's disabled (i.e. NoScript).

V

Print preview won't show all rows of a table
• Varju

3

0
Votes

3
Posts

723
Views

I ended up writing a little helper function.
I took some sample code from @metalsadman https://codepen.io/metalsadman/pen/LYNzrEE?editors=1010 and changed it slightly
printTable: function (props) { const headers = this.columns.map(col => this.$helpers.wrapCsvValue(col.label)) const content = this.$refs.dataTable.filteredSortedRows.map(row => this.columns.map(col => this.$helpers.wrapCsvValue( typeof col.field === 'function' ? col.field(row) : row[typeof col.field === 'undefined' ? col.name : col.field], col.format ))) this.$helpers.printWindow(headers, content, this.$t('page.title')) }
And then my helper function takes the table content and uses standard HTML table to render it in a pop-up and calls the window.print()
const printWindow = function (headers, data, title) { var printWindow = window.open('', '', 'height=600,width=800') printWindow.document.write(`<html><head><title>${title}</title>`) printWindow.document.write('<style type = "text/css">') printWindow.document.write('.q-table {') printWindow.document.write('width: 100%;') printWindow.document.write('max-width: 100%;') printWindow.document.write('border-collapse: collapse;') printWindow.document.write('margin: 25px 0;') printWindow.document.write('font-size: 0.9em;') printWindow.document.write('font-family: sans-serif;') printWindow.document.write('box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);') printWindow.document.write('}') printWindow.document.write('.q-table th, td {') printWindow.document.write('padding: 12px 15px;') printWindow.document.write('}') printWindow.document.write('.q-table tbody tr {') printWindow.document.write('border-bottom: 1px solid #dddddd;') printWindow.document.write('}') printWindow.document.write('.q-table thead tr {') printWindow.document.write('text-align: left;') printWindow.document.write('}') printWindow.document.write('</style>') printWindow.document.write('</head>') printWindow.document.write('<body>') printWindow.document.write('<table class="q-table">') printWindow.document.write('<thead>') printWindow.document.write('<tr>') for (const header of headers) { if (header !== 'Actions') { printWindow.document.write(`<th>${header}</th>`) } } printWindow.document.write('</tr>') printWindow.document.write('</thead>') printWindow.document.write('<tbody>') for (const row of data) { printWindow.document.write('<tr>') for (const col of row) { printWindow.document.write(`<td>${col}</td>`) } printWindow.document.write('</tr>') } printWindow.document.write('</tbody>') printWindow.document.write('</table>') printWindow.document.write('</body>') printWindow.document.write('</html>') printWindow.document.close() const afterPrintHandler = (function (vm) { return function () { printWindow.close() } }(this)) printWindow.onafterprint = afterPrintHandler printWindow.print() }
Seems pretty re-usable for all my q-table’s and prints the filtered content too. Maybe someone has a better approach or way to improve it
A

MongoDB Realm integration with Quasar Framework
• arkaprova

5

0
Votes

5
Posts

371
Views

@damiendeville

It seems to use two different front-ends, Blaze and Quasar (why would one do that?)

yes and no. With alexander setup you seperate your backend and run Meteor as pure backend( headless) and use Quasar CLI like you normally do. You could use blaze for example if you want some gui at the meteor backend. The magic in all this is the connector package(https://github.com/Urigo/meteor-client-bundler) that will connect the 2 ( with ddp).

The beauty about this setup is that you have 1 codebase( the api folder is the meteor project inside quasar project) and can import code from your backend in your frontend.(like collections)

It also uses axios which seems similarly redundant with Meteor pub/sub through DDP. Quasar (why would one do that?)

You can also choose to use Meteor like a ‘normal’ rest api instead of sockets. In the starter kit I don’t think he uses axios at all.

I know it also confusing since:

About all those point I don’t know what the ‘official’ structure is right now. It has changed a lot over time. Does not really matter since it can be changed easily.

The great thing about using Meteor with this setup is that Quasar CLI is leading so you keep all the benefits of Quasar CLI, you can create SPA, PWA, Cordova ect. All this with the power of Meteor.

If you use the other package you will have to use Quasar in UMD mode and that is not an ideal setup. Using meteor in headless moe will only relieve yourself ( myself for sure) from creating a UI in meteor with blaze or react( Vue is a not a ‘prime’ supported front end library in meteor).

Nor does the folder structure below template/imports/ui to the folder structure below /src in the Quasar app structure guide App Structure - Quasar Framework

Quasar’s folder structure is different because it has changed too.
Setting Webpack Terser settings for build
• metcarob

2

0
Votes

2
Posts

613
Views

I managed to resolve my own issue with a bit of a hailmary guess.

First I added this to the top of quasar.conf.js:
const TerserPlugin = require("terser-webpack-plugin");
Next I added the following to the build section
extendWebpack (cfg) { cfg.optimization.minimize = true cfg.optimization.minimizer = [new TerserPlugin({ parallel: 1 })] }
I then ran my deployment process on codefresh and it worked!

That took a lot of trail and error to get to. Hopefully this post will be helpful for someone else.
Z

Scrolling inside a q-table
• zwiebel_s

8

0
Votes

8
Posts

677
Views

L

@zwiebel_s If you have that problem still, here is the codepen

I added the listener @update:pagination='goToTop'

That is the event that triggers on pagination change. I guess that’s what you wanted.
B

Deactivate QInput rules if QInput is disabled.
• Bafian

2

0
Votes

2
Posts

802
Views

B

This was quickly solved by someone in Discord (Jeff Galbraith)
The solution was this one if anyone ever finds itself in the same seat:
<q-input square outlined ref="youtube" label="YOUTUBE" class="q-pb-lg custom-field-checkbox" bg-color="white" v-model="data.youtube.link" :disable="!data.youtube.enable" :rules="[val => data.youtube.enable !== true ? true : val.match(/^(http|https):\/\/(.*)/) || 'Incorrect Link format']" lazy-rules />
TS2717: Subsequent property declarations must have the same type. Property '$router' must be of type 'VueRouter', but here has type 'VueRouter'.
• shiba

7

0
Votes

7
Posts

1137
Views

@dobbel
Oh, I’m sorry.
To be exact, I’ve not fixed the problem.
I did not need to fix.

I did not need to fix.
I’m not sure why, however I deployed my app.
F

QToggle "on change" event
• filipec

4

0
Votes

4
Posts

2434
Views

A

@tof06 This solution helped me too… Thank you!
9

Autofocus input fields with a filled mask to the beginning of the input mask, how?
• 9223000

3

1
Votes

3
Posts

267
Views

@ps-0

Here’s a thread about setting the cursor:
https://stackoverflow.com/questions/48868075/javascript-set-cursor-position-when-changing-the-value-of-input
Q

This topic is deleted!
• QuasarModo

1

0
Votes

1
Posts

1
Views

No one has replied
S

devServer.public is ignored for "quasar dev -m cordova/capacitor"
• Sfinx

3

0
Votes

3
Posts

89
Views

J

me to, Don’t know how to solve it
B

vue-native-websockets integration
• BigWinston 0

3

0
Votes

3
Posts

1118
Views

B

Thanks for your comment. I will check into boot files.
V

Help with QTable and server side pagination
• vinnyc

3

0
Votes

3
Posts

489
Views

V

I found the culprit, but am not sure why, would be good if someone posts here the reason so others could benefit from this.

my getPatients method was using the pagination variable directly, the moment I changed it to use a version that wrapped it under a props object and not refer the pagination directly it worked again.

Not sure why is that, but at least its working now 🙂
A

QUASAR + CORDOVA
• alessandropcs

12

0
Votes

12
Posts

393
Views

A

@dobbel ok thanks, from now on everything that to produce locally i will use https, thanks for the answers and for contributing to the community, you are important to us, even more.
J

Smoother scrolling
• jonafrank

8

0
Votes

8
Posts

2403
Views

@anandtripathi You’re aware that you are commenting on a 4 year old thread, meant for a very old Quasar (v0.x).
P

quasar v2 vuex
• pospi

3

0
Votes

3
Posts

718
Views

P

@metalsadman Thanks, it helped me a lot !
Windows app icon with Electron & Electron Builder are Jagged
• somascope

13

0
Votes

13
Posts

4467
Views

Added the assets

created appx folder in the build directory, keep the package.json as mentioned above.

3)Make sure the app logos named should be specific as metioned in the link .PNG format.

4)Earlier I had icon names as e.g: Square44x44Logo.png format .PNG then after changing the name to Square44x44Logo kept format .PNG as it is I was able to solve installed app issue.

What i realized by this is naming convention does matter a lot in case of applying icons. So the main issue caused due to pont 4.
K

Reacting to router param change.
• kernelconf

6

0
Votes

6
Posts

1614
Views

Q

@kernelconf that is crazy amazing I have wasted a lot of time since I am using typescript + 1.5.4 Quasar + Composition API and there is no useRoute function. Your solution works amazingly. Could you please describe how it technically works? Very interesting!
L

Return SVG paths in iconMapFn
• lazaroofarrill

1

0
Votes

1
Posts

140
Views

No one has replied
S

QSelect yields label on native form submit
• szabiaura

3

0
Votes

3
Posts

97
Views

S

@metalsadman Never mind, it went away somehow. Works now. Sorry for the noise.
R

Twitter cards support
• rab

2

0
Votes

2
Posts

90
Views

@rab

Here’s an article about Twitter Cards and Vue.js:
https://loftie.com/post/how-to-add-twitter-and-facebook-cards-to-your-vue-app/

5 / 186

No More Posting New Topics!

Print preview won't show all rows of a table • Varju

MongoDB Realm integration with Quasar Framework • arkaprova

Setting Webpack Terser settings for build • metcarob

Scrolling inside a q-table • zwiebel_s

Deactivate QInput rules if QInput is disabled. • Bafian

TS2717: Subsequent property declarations must have the same type. Property '$router' must be of type 'VueRouter', but here has type 'VueRouter'. • shiba

QToggle "on change" event • filipec

Autofocus input fields with a filled mask to the beginning of the input mask, how? • 9223000

This topic is deleted! • QuasarModo

devServer.public is ignored for "quasar dev -m cordova/capacitor" • Sfinx

vue-native-websockets integration • BigWinston 0

Help with QTable and server side pagination • vinnyc

QUASAR + CORDOVA • alessandropcs

Smoother scrolling • jonafrank

quasar v2 vuex • pospi

Windows app icon with Electron & Electron Builder are Jagged • somascope

Reacting to router param change. • kernelconf

Return SVG paths in iconMapFn • lazaroofarrill

QSelect yields label on native form submit • szabiaura

Twitter cards support • rab

Print preview won't show all rows of a table
• Varju

MongoDB Realm integration with Quasar Framework
• arkaprova

Setting Webpack Terser settings for build
• metcarob

Scrolling inside a q-table
• zwiebel_s

Deactivate QInput rules if QInput is disabled.
• Bafian

TS2717: Subsequent property declarations must have the same type. Property '$router' must be of type 'VueRouter', but here has type 'VueRouter'.
• shiba

QToggle "on change" event
• filipec

Autofocus input fields with a filled mask to the beginning of the input mask, how?
• 9223000

This topic is deleted!
• QuasarModo

devServer.public is ignored for "quasar dev -m cordova/capacitor"
• Sfinx

vue-native-websockets integration
• BigWinston 0

Help with QTable and server side pagination
• vinnyc

QUASAR + CORDOVA
• alessandropcs

Smoother scrolling
• jonafrank

quasar v2 vuex
• pospi

Windows app icon with Electron & Electron Builder are Jagged
• somascope

Reacting to router param change.
• kernelconf

Return SVG paths in iconMapFn
• lazaroofarrill

QSelect yields label on native form submit
• szabiaura

Twitter cards support
• rab