SmartComponent Library NG
  1. Components
  2. SmartComboEditorComponent

File

src/ui/combo-editor/smart-combo-editor.component.ts

Extends

AbstractSmartViewerFieldComponent

Implements

OnInit OnChanges DoCheck

Metadata

selector smart-combo-editor
styleUrls ./smart-combo-editor.component.css
templateUrl ./smart-combo-editor.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor(serviceAdapter: SmartServiceAdapter, smartHttp: SmartHttpService, elementRef: ElementRef, dsRegistry: DataSourceRegistry, errorHandler: SmartErrorHandlerService, widgetFacadeFactory: WidgetFacadeFactory, formInstanceService: SmartFormInstanceService, viewerHelper: SmartViewerHelperService)
Parameters :
Name Type Optional
serviceAdapter SmartServiceAdapter No
smartHttp SmartHttpService No
elementRef ElementRef No
dsRegistry DataSourceRegistry No
errorHandler SmartErrorHandlerService No
widgetFacadeFactory WidgetFacadeFactory No
formInstanceService SmartFormInstanceService No
viewerHelper SmartViewerHelperService No

Inputs

display-column-name
Type : string

The field which should be used to display the combo editor's value.
display-fields
Type : string

The fields that will be used to render the Combo Editor's item template
display-substitute
Type : string

The pattern that will be used to render the Combo Editor's item template Example: [Field1] - [Field2]
enabled
Type : boolean
id
Type : string
key-column-name
Type : string

The key field by which the combo editor should filter it's data source.
provide-foreign-field-value
Type : function
selected
Type : any
smart-business-entity-name
Type : string
smart-combo-allow-filter
Type : boolean
smart-data-source
Type : string
smart-entity-table
Type : string

Smart Data Source Binding

smart-entity-view
Type : string
smart-field-binding
Type : any
smart-filter
Type : any
smart-flag-image
Type : string
smart-flag-label
Type : string
smart-flag-value
Type : string
smart-foreign-fields
Type : string
smart-query-string
Type : string
smart-sort
Type : any
smart-value-list
Type : string

The SmartValueList that this combo editor should bind to.
smartModel
Type : any
style
Type : any
value-list
Type : string[]
value-list-pair
Type : string[]

Outputs

blur
Type : EventEmitter<void>
focus
Type : EventEmitter<void>
smartModelChange
Type : EventEmitter<string>

Methods

callNativeMethod
callNativeMethod(methodName: string, args: any[])
Parameters :
Name Type Optional
methodName string No
args any[] No
Returns : any
Public getImageUrl
getImageUrl(key: string)
Parameters :
Name Type Optional
key string No
Returns : string
getNativeProperty
getNativeProperty(propertyName: string)
Parameters :
Name Type Optional
propertyName string No
Returns : any
Public onBlur
onBlur()
Returns : void
Public onComboSelectionChange
onComboSelectionChange(value)
Parameters :
Name Optional
value No
Returns : void
setNativeProperty
setNativeProperty(propertyName: string, value: any)
Parameters :
Name Type Optional
propertyName string No
value any No
Returns : void
setQueryStringFilter
setQueryStringFilter()
Returns : void

Properties

comboNgModel
Type : NgModel
Decorators :
@ViewChild('comboModelDirective')
dataSourceId
Type : string
Public formContainer
Type : ViewContainerRef
previousSelection
Type : ComboOption
Public selectedItem
Type : ComboOption
visible
Default value : true

Accessors

enabled
getenabled()
Returns : boolean
setenabled(value: boolean)
Parameters :
Name Type Optional
value boolean No
Returns : void
ngModel
getngModel()
setngModel(value: any)
Parameters :
Name Type Optional
value any No
Returns : void
smartValueList
setsmartValueList(value: string)

The SmartValueList that this combo editor should bind to.

Parameters :
Name Type Optional
value string No
Returns : void
foreignFields
getforeignFields()
Returns : string
setforeignFields(value: string)
Parameters :
Name Type Optional
value string No
Returns : void
dropdownList
getdropdownList()
Returns : ComboOption[]
setdropdownList(value: [])
Parameters :
Name Type Optional
value [] No
Returns : void
combo
getcombo()
Returns : ComboBoxComponent
setcombo(value)
Parameters :
Name Optional
value No
Returns : void
dropdown
getdropdown()
Returns : DropDownListComponent
setdropdown(value)
Parameters :
Name Optional
value No
Returns : void
comboBoxComponent
getcomboBoxComponent()
Returns : ComboBoxComponent
dropDownListComponent
getdropDownListComponent()
Returns : DropDownListComponent 
<kendo-combobox 
        *ngIf="allowFiltering !== false"
        #combo 
        (blur)="onBlur()" 
        (focus)="focus.next()" 
        [clearButton]="false" 
        [ngStyle]="style || {}" 
        [hidden]="!visible" 
        [disabled]="!enabled" 
        [value]="selectedItem"
        [data]="dropdownList" 
        [ngModel]="selectedItem" 
        [valuePrimitive]="false" 
        [textField]="'display'" 
        [valueField]="'value'" 
        [popupSettings]="{ appendTo: formContainer || 'component' }"
        (open)="setQueryStringFilter()" 
        (valueChange)="onComboSelectionChange($event)"
        >
            <ng-template kendoComboBoxItemTemplate let-dataItem>
                <span class="template" *ngIf="dataItem.image">
                    <img [src]="dataItem.image">
                </span>
                {{dataItem.display}}
            </ng-template>
    </kendo-combobox>

    <kendo-dropdownlist 
        *ngIf="allowFiltering === false"
        #dropdown 
        (blur)="onBlur()" 
        (focus)="focus.next()" 
        [ngStyle]="style || {}" 
        [hidden]="!visible" 
        [disabled]="!enabled" 
        [value]="selectedItem"
        [data]="dropdownList"
        [ngModel]="selectedItem" 
        [valuePrimitive]="false" 
        [textField]="'display'" 
        [valueField]="'value'" 
        (open)="setQueryStringFilter()" 
        [popupSettings]="{ appendTo: formContainer || 'component' }"
        (valueChange)="onComboSelectionChange($event)">
    </kendo-dropdownlist>

    <smart-data-source *ngIf="dataSourceId && businessEntity && table"
        [smart-instance-name]="dataSourceId"
        [smart-business-entity-name]="businessEntity"
        [smart-entity-table]="table"
        [smart-entity-view]="tableView"
        [smart-filter]="filter"
        [smart-sort]="sort"
        [smart-data-source]="parentDs">
    </smart-data-source>
Copy

./smart-combo-editor.component.css 

::ng-deep [hidden] {
     display: none !important; 
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""