I'm using vuetify v3.
In my use case, I have a multiple lists with different sizes (the big one can reach ~100k items) that I want to render in multiple v-combobox, I've tried this code :
<v-col v-for="property in filterableProperties">
<v-combobox v-model="filter[property.code]" :label="property.label" :items="values[property.code]"
variant="outlined" hide-details bg-color="white" clearable/>
</v-col>
values is an objet containing those lists.
My issue is that browser freeze when clicking on the v-combobox containing the huge list. I don't need to display all 100k items in a time, a lazy loading will do just fine. I haven't find a way to do that.
Any help ?
Related
It doesn't appear the Vuetify data table grouping handles the paging correctly when group headers are collapsed. If you want to collapse all group headers, you have to page through was appears to be empty pages until you get to the next group header.
Codepen example
<v-data-table
:headers="headers"
:items="stocks"
item-key="name"
sort-by="name"
group-by="sector"
class="elevation-1"
></v-data-table>
After collapsing the first header, I would think the next group header would appear with enough rows to fill the page. Instead, you have to page through several "empty" pages (the number of pages corresponds to the number of rows in the first grouping). How can I configure the grouping which will bring the next grouping into view when I collapse the previous grouping?
yes, this is pretty annoying. there is an open issue for it: https://github.com/vuetifyjs/vuetify/issues/13754
as you're likely aware, the 'workaround' is to disable paging (or grouping). if you have a large table performance will be poor - which is why you used paging in the first place.
Is it possible to have a slickgrid inside another slickgrid (without modal ) ?
As an example, using Magic TCG and the example http://6pac.github.io/SlickGrid/examples/example-grouping-checkbox-row-select.html .
I want a slickgrid were I can order the collections and when I select the collection, it will open another slickgrid in the same window, with the cards.
On the "main-grid" will have the columns related to collections (e.g. collection name, # of cards in that collection, etc) and on "child-grid" will have the columns related to the cards (e.g. card name, card cost, card info, etc).
EDIT: I forgot to tell I replicated the code from the first grid and then tried to called it but got this error :
SlickGrid requires a valid container, #myGrid2 does not exist in the DOM.
I'm calling it like this :
<div id="myGrid" style="width:100%;height:500px;">
<div id="myGrid2" style="width:100%;height:500px;">
</div>
</div>
Is it possible or do I need to use modal ?
Thanks in advance
It is indeed possible, I have a slick-combo control (not publicly released) that provides a multi-column combo inside a cell using a dynamically created Slickgrid.
It looks like you want a side-by-side grid, not a grid-within-a-cell. Could you provide more information around how you want the screen visually to look (a diagram would be good)
I saw the nested grid example in https://vuetifyjs.com/en/framework/grid#nested-grid.
However I need some different layout, and the order should change in different breakpoints.
Desired layouts:
md and up: https://codepen.io/jcpribeiro/pen/NJReGm
sm and down: https://codepen.io/jcpribeiro/pen/gEPEOj
Note that the order is different.
In another example I could use have different orders in different layouts using order-xs1 (see https://vuetifyjs.com/en/framework/grid#order), but v-flex items in nested grids do not belong all to the same v-layout item, so it will not work the same way.
I would like to avoid moving items with javascript.
Does anyone have any idea?
Since order is different I would apply a v-if="$vuetify.breakpoint.mdAndUp" on one layout and a v-if="$vuetify.breakpoint.smAndDown" on the other.
https://vuetifyjs.com/en/framework/breakpoints#breakpoints
As an example:
<v-layout v-if="$vuetify.breakpoint.mdAndUp" row wrap>
1st set of flex items in here
</v-layout>
<v-layout v-if="$vuetify.breakpoint.smAndDown" row wrap>
2nd set flex items in here
</v-layout>
I have a potentially long repeating list with lots of data associated with each reapeated list element. There is also a hidden panel that contains more data and interactive tools that can be used on each repeated element (comments, tags, etc.).
My question is: Is it more efficient to include a duplicate of this panel within each ng-repeat, already filled with the appropriate data, or have one panel outside of the ng-repeat scope, who's data get's fill after clicking the 'panel toggle' button?
Extra details: This is a responsive site, with an emphasis on mobile use, so we are trying to minimize data sent, and make the amount of Javascript short and sweet (so far it hasn't been a problem at all).
After typing it out, I think the best option would be to have one tools panel, and populate it depending on which 'panel toggle' button is clicked. Fewer DOM elements the better, right?
It also leave it open for lazy-loading of the extra details in the future.
A blog posting (single entry page) consists of text and images.
The channel “blog” has the field group “blog_entries”. The interesting fields in the fieldgroup are "blog_body" and the three relationship fields called "image1", "image2", "image3"
The images are stored in a different channel called "images". The fieldgroup "image_entries" has a few fields. The image upload field itself, the caption, credits and a few more.
I can combine images and text via the relationship fields.
My problem is: The editor should place the image where it has to be in the content. And he should be able to choose the size of the image (should it span 4,8,or 12 columns) The example below has an image eight columns wide.
Adding an image would add the following code
<div class="eight columns picture">
<div id="copyright" class="text-right">
© Photographer name, Flickr
</div>
<img src="http://placehold.it/700x525&text=[700x525]" />
<div class="panel">
<p>I am the caption. Nulla corned beefsunt ball tip.</p>
</div>
What I want to achive is:
The editor types the text into the blog_entries field within the CP. This field is a textarea with custom HTML buttons.
After two paragraphs of writing he needs an image to ilustrate what he wrote.
He clicks on a custom HTML button,sees the related images, gets to choose the size of the image (should it span 4,8 or 12 columns) and with the next click EE integrates all the neccessary code into the entry.
So the editor has not to worry about the DIVs and all the code but can position an previously uploaded image where ever he wants in the article.
How can I achive that?
I´m not bound to do it this way. If there´s another way or a plugin to solve that problem,I´d like to hear it.
A pretty different approach but one that I've used for this sort of thing in the past is Matrix. You set up the blog_body as a matrix field which is intended to have a row added for each breakpoint in the article (a breakpoint being the insertion of an image, for example). And so the matrix might include 3 columns - one for the image, one for the image width (radio between your three different span widths, for example) and one for "paragraph content".
The challenge here though is that you're using a relationship field for the images rather than having the images as part of the blog entry. Since a relationship field is not, to the best of my knowledge, a fieldtype you can use within a matrix field, that makes it a lot tougher to take this approach. But if you are keep a fixed number of relationship fields - as you suggested, image1, image2, image3, then the first column in the matrix could simply be a radio button for the editor to choose between image1, image2 and image3 to be inserted at this breakpoint. Not a typical use of Matrix, but it would allow you to be relative object-oriented about the editor's control over the content.
Hope that idea helps or sparks new ones!
I frequently use that approach on content rich website, but I generally use default field types. Just a variant of what Jean proposed, the underlying logic stays the same.
Images and text of blogpost in same channel
Determine the min and max number of images you want per post (usually I go with 3)
Instead of just having one body field, one caption field, one image field, and 1 field for your image dimensions (I usually use P&T field), you duplicate the whole lot three times (if you went with 3 images max).
I generally only make the first text + image + image configs fields mandatory
Your clients can now "compose" their own page with one, two or three images, displayed in various ways, but will stay in the boundaries you have defined.
Hope it helps