File

src/ui/filter/vertical-field/vertical-field.component.ts

Implements

OnInit

Metadata

selector VerticalField
styleUrls ./vertical-field.component.css
templateUrl ./vertical-field.component.html

Index

Properties
Methods
Inputs

Constructor

constructor(formInstanceServ: SmartFormInstanceService)
Parameters :
Name Type Optional
formInstanceServ SmartFormInstanceService No

Inputs

filter
Type : any
inputType
Type : string
operators
Type : any[]
title
Type : string

Methods

setFilterValue
setFilterValue(value: any)
Parameters :
Name Type Optional
value any No
Returns : void

Properties

containerRef
Type : ViewContainerRef
<label *ngIf="inputType === 'checkbox'" (click)="setFilterValue(!filter.value)" class="smart-filter-label vertical k-form-field">
        <input class="smart-filter-field vertical filter-checkbox k-checkbox" type="checkbox"
            [checked]="filter.value === true" (click)="setFilterValue(!filter.value)"/>
        <label class="k-checkbox-label">{{title}}</label>
</label>
<label *ngIf="inputType !== 'checkbox'" class="smart-filter-label vertical k-form-field" style="background-color: inherit">
            <kendo-textbox-container [floatingLabel]="title" style="width: 100%; background-color: inherit;">
                <div class="input-group">
                    <input kendoTextBox class="smart-filter-field vertical fill" [type]="inputType"
                        [(ngModel)]="filter.value"/>
                            <kendo-dropdownbutton class="input-group-addon" style="display: table-cell; padding: 0px; background-color: inherit;" [data]="operators" (itemClick)="filter.operator = $event.value" [popupSettings]="{ appendTo: containerRef}">
                                &nbsp;
                                <span class="fa fa-caret-down"></span>
                                &nbsp;
                                <ng-template kendoDropDownButtonItemTemplate let-dataItem>
                                    <span [ngClass]="{ bolded: dataItem.value === filter.operator }">{{ dataItem.display }}</span>
                                    <span class="fa fa-check" *ngIf="dataItem.value === filter.operator" style="margin-left: 3px"></span>
                                </ng-template>
                            </kendo-dropdownbutton>
                </div>
            </kendo-textbox-container>
</label>

./vertical-field.component.css

::ng-deep .bolded {
    font-weight: bold !important;
}

::ng-deep .op-dropdown, ::ng-deep .op-dropdown * {
    height: 100% !important;
    vertical-align: middle;
    text-align: center;
}

::ng-deep .smart-filter-field.fill {
    width: auto;
    flex-grow: 1;
}

::ng-deep .k-textbox-container:not(.k-state-focused) label {
    color: gray;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""