src/ui/filter/smart-filter.component.ts
AbstractFormChild
ISmartFilter
OnInit
OnDestroy
AfterViewInit
| selector | smart-filter |
| styleUrls | ./smart-filter.component.css |
| templateUrl | ./smart-filter.component.html |
Properties |
Methods |
|
Inputs |
Outputs |
HostListeners |
Accessors |
constructor(registry: SmartFilterRegistry, injector: Injector, elementRef: ElementRef, renderer: Renderer2, screenService: SmartScreenService, changeDetector: ChangeDetectorRef)
|
|||||||||||||||||||||
|
Parameters :
|
| filter-fields-initial |
Type : []
|
|
The initial filter fields that the Smart Filter should display. |
| filter-fields-optional |
Type : []
|
|
The optional filter fields that the Smart Filter should allow to be set. |
| orientation |
Type : string
|
|
The Smart Filter's orientation. Possible values: horizontal, vertical (default). |
| smart-filter-style |
Type : any
|
| smart-object-name |
Type : string
|
|
The name that the Smart Filter will use to register itself with the SmartFilterRegistry. |
| title |
Type : string
|
|
The title to be displayed by the Smart Filter |
| on-filter |
Type : EventEmitter<FilterEvent>
|
|
Fires when the user clicks the "filter" button. |
| document:click |
document:click()
|
| keypress |
Arguments : '$event'
|
keypress(ev: KeyboardEvent)
|
| computeOptionalFilters |
computeOptionalFilters()
|
|
Returns :
any
|
| fireFilterEvent |
fireFilterEvent()
|
|
Fires the filtered event.
Returns :
void
|
| getFilterBtnClass |
getFilterBtnClass()
|
|
Returns :
"col-4" | "col-6"
|
| getFilterDisplay | ||||||
getFilterDisplay(field: string)
|
||||||
|
Parameters :
Returns :
any
|
| Public getInputType | ||||||
getInputType(filter: any)
|
||||||
|
Returns the appropriate HTML input type for a given filter, according to it's filter field type.
Parameters :
Returns :
any
|
| getOperators | ||||||
getOperators(filter: any)
|
||||||
|
Returns a list of possible operators than can be applied to a given filter, according to it's filter field type.
Parameters :
Returns :
any[]
|
| getOptionalFilters |
getOptionalFilters()
|
|
Returns a list of all possible optional filter field names.
Returns :
string[]
|
| Public getTitle | ||||||
getTitle(filter: any)
|
||||||
|
Returns the filter field's title from the JSDO schema.
Parameters :
Returns :
string
|
| Public handleLayoutChange | ||||||
handleLayoutChange(newLayout: literal type)
|
||||||
|
Parameters :
Returns :
void
|
| initializeFromDataSource | ||||||
initializeFromDataSource(dataSource: SmartDataSource)
|
||||||
|
Initializes from the given Smart Data Source. Intended to be called by the Smart Data Source itself. Sets the JSDO schema and initializes the filters accordingly.
Parameters :
Returns :
void
|
| insertOptionalFilter | ||||||||||||||||
insertOptionalFilter(field: string, operator: string, value?: string)
|
||||||||||||||||
|
Displays the specified optional filter field and sets the given operator (defaults to 'eq') and the given value, if any.
Parameters :
Returns :
void
|
| removeFilters |
removeFilters()
|
|
Removes all filter field values.
Returns :
void
|
| removeOptionalFilter | ||||||
removeOptionalFilter(filter: number | string | any)
|
||||||
|
Removes an optional filter field from the Smart Filter's template.
Parameters :
Returns :
void
|
| resize |
resize()
|
|
Returns :
void
|
| setFilterValue |
setFilterValue(filter: any, value: any)
|
|
Sets the given value to the given filter object.
Returns :
void
|
| toggleOptionalFilter | ||||||
toggleOptionalFilter(filter: literal type)
|
||||||
|
Toggles displaying of the given filter field in the Smart Filter's template.
Parameters :
Returns :
void
|
| toggleOptionalFilterPopup | ||||||
toggleOptionalFilterPopup(event: MouseEvent)
|
||||||
|
Parameters :
Returns :
void
|
| filters |
Type : any[]
|
Default value : []
|
| filterSize |
Type : string
|
| flexDirection |
Type : string
|
| operatorMap |
Type : any
|
Default value : {
startswith: 'Starts With',
eq: 'Equals',
contains: 'Contains',
gte: 'At least',
lte: 'At most',
gt: 'Greater Than',
lt: 'Less Than',
endswith: 'Ends With',
}
|
| optFilters |
Type : literal type[]
|
Default value : []
|
| optionalFiltersPopupOffset |
Type : object
|
Default value : {
left: 0,
top: 0,
}
|
| optionalFiltersVisible |
Default value : false
|
| filterStyle | ||||||
getfilterStyle()
|
||||||
|
Returns :
any
|
||||||
setfilterStyle(style: any)
|
||||||
|
Parameters :
Returns :
void
|
| initialFilterFields | ||||||
getinitialFilterFields()
|
||||||
|
Returns :
string[]
|
||||||
setinitialFilterFields(value: [])
|
||||||
|
The initial filter fields that the Smart Filter should display.
Parameters :
Returns :
void
|
| optionalFilterFields | ||||||
getoptionalFilterFields()
|
||||||
|
Returns :
string[]
|
||||||
setoptionalFilterFields(value: [])
|
||||||
|
The optional filter fields that the Smart Filter should allow to be set.
Parameters :
Returns :
void
|
| availableOptionalFilterFields |
getavailableOptionalFilterFields()
|
|
Returns a list of optional filter field names that have not yet been displayed by the Smart Filter
Returns :
string[]
|
| orientation | ||||||
getorientation()
|
||||||
|
Returns :
string
|
||||||
setorientation(value: string)
|
||||||
|
The Smart Filter's orientation. Possible values: horizontal, vertical (default).
Parameters :
Returns :
void
|
| filterWidthCssClass |
getfilterWidthCssClass()
|
|
Returns :
string
|
<kendo-popup *ngIf="optionalFiltersVisible" [offset]="optionalFiltersPopupOffset" [popupClass]="'opt-filter-popup'">
<label *ngFor="let filter of optFilters" class="k-form-field" (click)="toggleOptionalFilter(filter)">
<input type="checkbox" [checked]="filter.enabled"/>
<label class="k-checkbox-label">{{filter.display}}</label>
</label>
</kendo-popup>
<div class="smart-filter vertical" [ngStyle]="filterStyle" *ngIf="orientation && orientation === 'vertical'" style="padding-left: 7px; padding-right: 7px;">
<form class="k-form">
<VerticalField *ngFor="let filter of filters; let i = index"
[filter]="filter"
[title]="getTitle(filter)"
[inputType]="getInputType(filter)"
[operators]="getOperators(filter)"
>
</VerticalField>
<div class="text-right" style="padding-top: 10px;">
<kendo-buttongroup>
<button kendoButton type="button" [class]="'k-primary btn-filter-command'" (click)="fireFilterEvent()">Apply</button>
<button kendoButton [class]="'btn-filter-command'" (click)="removeFilters()">Clear</button>
<button kendoButton #optionalFiltersToggle *ngIf="optionalFilterFields && optionalFilterFields.length > 0" [class]="'btn-filter-command'" (click)="toggleOptionalFilterPopup($event)">
<span class="fa fa-plus"></span>
</button>
</kendo-buttongroup>
</div>
</form>
</div>
<div class="smart-filter horizontal container-fluid" [ngStyle]="filterStyle" *ngIf="orientation && orientation === 'horizontal'">
<div class="row" [ngStyle]="{ flexDirection: flexDirection ? flexDirection : 'row', display: 'flex' }" >
<HorizontalField *ngFor="let filter of filters; let i = index" class="col-12" style="padding-left: 7px; padding-right: 7px;"
[filter]="filter"
[title]="getTitle(filter)"
[inputType]="getInputType(filter)"
[operators]="getOperators(filter)"
>
</HorizontalField>
<div class="horizontal-field-wrapper col-12" style="padding-left: 7px; padding-right: 7px;">
<kendo-textbox-container>
<div>
<kendo-buttongroup>
<button kendoButton [class]="'btn-filter-command'" (click)="fireFilterEvent()">
<span class="fa fa-filter"></span>
</button>
<button kendoButton #optionalFiltersToggle *ngIf="optionalFilterFields && optionalFilterFields.length > 0" [class]="'btn-filter-command'" (click)="toggleOptionalFilterPopup($event)">
<span class="fa fa-plus"></span>
</button>
<button kendoButton [class]="'btn-filter-command'" (click)="removeFilters()">
<span class="fa fa-times"></span>
</button>
</kendo-buttongroup>
<!-- The invisible input is for avoiding the error from SCLNG-152 -->
<input kendoTextBox style="display: none;">
</div>
</kendo-textbox-container>
</div>
</div>
<kendo-resize-sensor (resize)="resize()"></kendo-resize-sensor>
</div>
./smart-filter.component.css
::ng-deep .filter-btns-wrap {
padding: 0px;
position: absolute;
bottom: 0;
right: 0;
}
::ng-deep .filter-field { padding-left: 0px !important; padding-right: 5px !important; }
::ng-deep .bolded { font-weight: bold }
::ng-deep .filter-toggle { border-right: none; border-radius: 0px }
::ng-deep .filter-toggle-first { border-right: none; border-radius: 4px 0px 0px 4px; }
::ng-deep .filter-toggle-item { cursor: default !important }
::ng-deep .filter-checkbox { margin-left: 50%; }
::ng-deep .btn-filter-command { padding: 6px !important }
.smart-filter { background-color: #f5f5f5 }
::ng-deep input, ::ng-deep label {
font-weight: normal !important;
}
::ng-deep .opt-filter-popup {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
}
::ng-deep kendo-popup .k-checkbox-label {
padding-left: 5px !important;
padding-bottom: 6px !important;
}