| <!-- |
| ag-data-grid-filter-select renders a select list filter. |
| The value(s) of the filter is provided to the ```dataSource's fetch``` function |
| as a string value or array of string values in case of multi-selection in the |
| filters map. ```filters[key]: <string|string[]>```. |
| Values come from value field of child ag-data-grid-filter-select-item elements. |
| |
| Usage: |
| ``` |
| <ag-data-grid-filter-select |
| multiple |
| key="status" |
| label="Show contacts that are"> |
| |
| <ag-data-grid-filter-select-item |
| checked |
| label="Online" |
| value="online"> |
| </ag-data-grid-filter-select-item> |
| <ag-data-grid-filter-select-item |
| checked |
| label="Away" |
| value="away"> |
| </ag-data-grid-filter-select-item> |
| <ag-data-grid-filter-select-item |
| checked |
| label="Offline" |
| value="offline"> |
| </ag-data-grid-filter-select-item> |
| |
| </ag-data-grid-filter-select> |
| ``` |
| @element ag-data-grid-filter-select |
| --> |
| <link rel="import" href="../../../polymer/polymer.html"> |
| <link rel="import" href="../../../paper-checkbox/paper-checkbox.html"> |
| <link rel="import" href="../../../paper-radio-button/paper-radio-button.html"> |
| <link rel="import" href="../../../paper-radio-group/paper-radio-group.html"> |
| <polymer-element name="ag-data-grid-filter-select" attributes="multiple key label" grid-filter expects-grid-state> |
| <template> |
| <link rel="stylesheet" href="ag-data-grid-filter-select.css"> |
| <link rel="stylesheet" href="../common.css"> |
| <content id="content" select="*"></content> |
| <div class="filter-container"> |
| <h3>{{label}}</h3> |
| <template if="{{ multiple }}" bind> |
| <core-selector id="multiSelector" multi selectedAttribute="checked" valueattr="value" core-select="{{updateGridState}}" selected="{{ selected }}"> |
| <template repeat="{{ item in items }}"> |
| <paper-checkbox value="{{ item.value }}" on-change="{{ updateGridState }}" label="{{ item.label }}"></paper-checkbox> |
| </template> |
| </core-selector> |
| </template> |
| |
| <template if="{{ !multiple }}" bind> |
| <paper-radio-group id="singleSelector" valueattr="value" selected="{{ selected }}"> |
| <template repeat="{{ item in items }}"> |
| <paper-radio-button value="{{ item.value }}" on-change="{{ updateGridState }}" label="{{ item.label }}"></paper-radio-button> |
| </template> |
| </paper-radio-group> |
| </template> |
| </div> |
| </template> |
| <script> |
| Polymer('ag-data-grid-filter-select', { |
| /** |
| * Whether multiple items can be selected |
| * @attribute multiple |
| * @type boolean |
| * @default false |
| */ |
| multiple: false, |
| |
| /** |
| * Key that will be added to filters map passed to the fetch() function of your data |
| * source. value would be a string value or array of string values in case of |
| * multi-selection in the filters map. |
| * @attribute key |
| * @type string |
| * @default '' |
| */ |
| key: '', |
| |
| ready: function() { |
| // find the selected items from the child nodes |
| this.items = Array.prototype.slice.call(this.$.content.getDistributedNodes()); |
| for(var i=0; i < this.items.length; i++){ |
| if(this.items[i].checked) { |
| if(this.multiple) { |
| this.selected = this.selected || []; |
| this.selected.push(this.items[i].value); |
| } else { |
| this.selected = this.items[i].value; |
| } |
| } |
| } |
| }, |
| |
| updateGridState: function() { |
| var me = this; |
| setTimeout(function() { |
| if (me.multiple ) { |
| // quirk: we need to copy the array so change is observed. .slice() does that |
| me.gridState.filters[me.key] = me.$.multiSelector.selected.slice(); |
| } else { |
| me.gridState.filters[me.key] = me.$.singleSelector.selected.slice(); |
| } |
| }); |
| } |
| |
| }); |
| </script> |
| </polymer-element> |