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>
Related
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 ?
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)
Mates, I would like to modify the group order, I did many searchs and nothing was found besides ASC and DES order. I've that sequence defined by kendo(Alfabetic order):
https://dojo.telerik.com/AJomALET/6
Sequence that I want:
Boston Crab Meat,
Camembert Pierrot,
Chang,
Aniseed Syrup,
....
Thanks in advance
When you export your kendo grid in PDF, it will copy the grid's style and data ,on how your grid is shown in the page. The best thing you can do is to make a custom sorting/ranking of your kendo grid groups before exporting. See this link.
Here's my situation. I have a main grid, where each row expands to show 2 tabs. The first tab has another grid, with dynamically columns. One of the columns needs to display a template with a modified Kendo Menu (in order for it to look like a dropdown).
When the column is rendered in the main grid, it works just fine. However, when I move that column to the sub-grid, I just see the list, without the kendo menu applied to it.
Two workarounds I tried:
http://dojo.telerik.com/OmiBu/3
Visuals:
Good and Bad