I am using a vaadin-grid in a Polymer 2.0 application with several columns that almost all have a vaadin-grid-sorter. Since I would like to give the user a chance to persist its sorting preferences my question is:
Can I set the column to sort by and the sort direction in code?
I had a short look at the grid source code but didn't find any (public) property for that.
I think there is a direction attribute for vaadin-grid-sorter, you can set the value to asc or desc. And set the path attribute for the property in the item used for sorting. For example:
<vaadin-grid-column>
<template class="header">
<vaadin-grid-sorter path="date" direction="desc">Date</vaadin-grid-sorter>
</template>
<template>[[item.date]]</template>
</vaadin-grid-column>
Related
I have a vuetify v-data-table widget that displays data. Currently the data shown uses too much space (rows have a lot of padding) so I use the dense prop. I add the property dense (like that, not dense='true') to the table opening tag but nothing happens. The display stays wide and the property is ignored.
Tried to remove all props except the items prop:
<v-data-table
dense
:items="results"
>
makes no difference. dense is ignored.
I currently have this:
<v-flex xs12>
<v-data-table
dense
:headers="headers"
:items="results"
:disable-initial-sort="true"
:pagination.sync="pagination"
class="elevation-1 results-table"
#update:pagination="updatePagination($event)"
/>
>
I had the same issue with dense property not working for v-data-table.
In my case it was the v-checkbox added to v-data-table that was causing the dense prop not to work. When using checkboxes inside v-data-table use v-simple-checkbox as explained here: https://vuetifyjs.com/en/components/data-tables/#simple-checkbox
ok, the 'elevated-1' class was overwitten causing the dense prop also to have no effect... /:
Is it even possible to search in expand slot in v-data-table?
According to my test below it doesn't work, try to search expandData property in items
<template slot="expand" slot-scope="props">
{{ props.item.expandData }}
</template>
codepen test
What should I look further for next step in case if need this kind of search for my project?
Thanks in advance
Do you know where can i find an implementation of the super select of Google Data studio with the "Only" to select only that element ?
you can also filter results , super handy if the list is long :
There is a feature request for select-all functionality, and apparently it will be possible using to-be-implemented scoped-slot called prepend-item.
So currently you will need some workaround.
Updated codepen with prepend-item slot which came in version 1.2:
https://codepen.io/anon/pen/EdVpmY
(must look into filtering more so I'll update if something changes)
Note prepend-item is also part of the parent v-list component, so we can't easily fix controls to the top.
<template slot="prepend-item">
<v-list-tile #click.stop="selected = selectedAll ? [] : states.slice()">
<v-list-tile-action>
<v-icon :color="selected.length > 0 ? 'indigo darken-4' : ''">{{ icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-title>Select All</v-list-tile-title>
</v-list-tile>
<v-divider class="mt-2"></v-divider>
<v-list-tile class="search-tile">
<v-text-field v-model="q" prepend-inner-icon="search" class="pt-0"></v-text-field>
</v-list-tile>
</template>
With regards to select-only functionality, you can use already supported scoped-slot item (see scoped slots in API docs) , and add select-only button yourself:
<v-select v-model="selected"
multiple
>
<template slot="item" slot-scope="data">
<v-list-tile-content>
<v-list-tile-title>
{{ data.item }}
</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action class="hidden">
<v-btn #click.stop="selected = [data.item]">ONLY</v-btn>
</v-list-tile-action>
</template>
</v-select>
Codepen, note that some CSS is added as well.
Expanded codepen with select-all workaround using watch, and one of the items is "All". So if we want array of selected without "All" we can do something like return this.selected.filter(v => v !== "All") in computed property or wherever it's needed.
As much as I can see this is a custom component. The one you are showing is probable made with angular + material like in this example: https://stackblitz.com/edit/angular-material-select-multi-c6vtux
So I think that you probably will end needing a component like vue-multiselect, that is fully featured and probably will accomplish what you need and more, the only thing is that you will need to work on it to use material styles.
https://github.com/shentao/vue-multiselect
https://vue-multiselect.js.org
I guess, that if you need more features, you might be able to customize the template https://vue-multiselect.js.org/#sub-custom-option-template
Now check ¨Custom configuration¨, there you will find some examples that will show you you can actually do something like the "only" with some effort.
This is the most complete component I have found for vuejs to handle multi select.
I hope it helps.
It's a feature that hasn't been implemented. Ask you desire feature HERE.
Hope it help you.
<template is="dom-bind">
<iron-ajax
auto
url="http://localhost:9000/api/version"
last-response="{{versionNumber}}"
verbose
></iron-ajax>
<template is="dom-repeat" items="{{versionNumber}}">
<small class="u-ml+">{{item.first}}</small>
</template>
<template>
<small>[[versionNumber]]</small>
</template>
</template>
I'm a little bit lost with Polymer - I have an iron-ajax element which is set up to talk an API endpoint, which is returning the current version of my application.
I want to be able to bind this version number directly on the page. Is there something I'm doing incorrectly in the above code?
I tried using a dom-repeat template and attempting to grab the first item, but I don't seem to be getting anything. Same with attempting to one-way bind inside of a <small> tag.
My understanding is that if I'm within a dom-bind template, I don't have to define a custom element.
Yes, data-binding works inside of a dom-bind template without the need for a custom element.
One problem in your code is the template tag around <small>
<template>
<small>[[versionNumber]]</small>
</template>
The content of a template by itself won't be shown/rendered in the DOM. See http://www.html5rocks.com/en/tutorials/webcomponents/template/ for some detailed information about templates).
Using <small>[[versionNumber]]</small> inside of your dom-bind template with the extra template tag should work.
Another issue is, that iron-ajax by default handles responses as JSON, so will probably run into a parse error when it receives a string and last-response will get no value.
You would have to specify the handleAs property of iron-ajax accordingly.
<iron-ajax handle-as="text" ...>
And dom-repeat will only work for arrays.
I have been using Angular Material in one of my project. Suddenly I realized the need for having a select all option on md-select. I think I will pull a git request for the same.
However, currently I am looking for a similar drop down structure with checkboxes (like md-select multiple) but also a select all option.
I am aware that I can push a dummy empty entry into md-select option array and manipulate reverse way on its selection. But it would require a lot of code change in my current structure and would also not be a elegant thing to do.
I tried looking for it in bootstrap and jQuery-UI, but could not find one yet. Is there any such control known to anyone. Any redirection will be helpful.
You can do that easily inside the HTML. It requires only one line of code, or two lines, if you want a "select none" option as well. For example
<md-input-container>
<label>Users</label>
<md-select ng-model="selectedUser" multiple=""
ng-model-options="{trackBy: '$value.id'}">
<md-optgroup label="Users">
<md-option ng-repeat="user in users"
ng-value="user">{{ user.name }}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
<button ng-click="selectedUser=users">all</button>
<button ng-click="selectedUser=[]">none</button>
Example in Plunker.
Edit: I updated the below Plunker to show the "all" button inside the select box next to the "Users" optgroup title. The relevant change:
<md-select ng-model="selectedUser" multiple="" ng-model-options="{trackBy: '$value.id'}">
<button ng-click="doSelectedUser()" style="float:right">all</button>
<md-optgroup label="Users">