File

src/ui/lookup/smart-lookup.component.ts

Extends

AbstractSmartViewerFieldComponent

Implements

OnInit OnChanges DoCheck

Metadata

selector smart-lookup
styleUrls ./smart-lookup.component.css
templateUrl ./smart-lookup.component.html
viewProviders SmartGridRegistryService

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor(elementRef: ElementRef, errorHandler: SmartErrorHandlerService, vcRef: ViewContainerRef, dlgSvc: DialogService, widgetFacadeFactory: WidgetFacadeFactory, viewerHelper: SmartViewerHelperService, formInstanceService: SmartFormInstanceService)
Parameters :
Name Type Optional
elementRef ElementRef No
errorHandler SmartErrorHandlerService No
vcRef ViewContainerRef No
dlgSvc DialogService No
widgetFacadeFactory WidgetFacadeFactory No
viewerHelper SmartViewerHelperService No
formInstanceService SmartFormInstanceService No

Inputs

allow-optional-filter-fields
Type : boolean

Determines whether the lookup's Smart Filter should allow optional filter fields to be set.

beforePerformLookup
Type : BeforePerformLookupEventHandler
dataRequested
Type : function
filter-fields-initial
Type : string

Initial filter fields that should be activated within the lookup's Smart Filter.

filter-fields-optional
Type : string

The optional filter fields that the lookup's Smart Filter should offer. Requires that the allow-optional-filter-fields attribute is set to true.

id
Type : string
keyValueModel
Type : any
numeric
Type : boolean
provide-foreign-field-value
Type : function
selected
Type : any

The parent Smart Viewer's attached datasource's selection. This is always set internally by the Smart Viewer and should NOT be used in development.

show-filter
Type : boolean

If set to true, the lookup will display a Smart Filter above the grid in it's dialog.

smart-business-entity-name
Type : string

The business entity that the lookup's attached data source should use.

smart-entity-table
Type : string

The table that the lookup's attached data source should use.

smart-filter

Sets the smartFilter property of a lookup, uses SmartFilterDescriptor or ABL strings

smart-foreign-fields
Type : string
smart-grid-layout
Type : any

The grid layout that the lookup's grid should use.

smart-lookup-auto-complete
Type : string

The lookup's autocomplete options.

smart-lookup-dialog-options
Type : string
smart-lookup-disable-autocomplete
Type : boolean
smart-lookup-fields
Type : string

Additional fields to fetch from the lookup's internal data-source when selecting a record in the lookup dialog or when the user typed a value in the lookup field

smart-lookup-fields-binding
Type : any
smart-lookup-header
Type : string

The title that should be displayed by the lookup's dialog.

smart-lookup-key
Type : string
smart-lookup-key-field
Type : string

The name of the field that the lookup component should use to perform autocomplete.

smart-lookup-key-field-binding
Type : string
smart-lookup-key-value
Type : string

The value that the lookup component should use to filter it's data source by the provided key field.

smart-lookup-key-value-field
Type : string

The name of the field from the lookup's internal data-source to match with the bound smart-lookup-key-value.

smart-lookup-key-value-field-binding
Type : string
smart-lookup-parent-filter-field
Type : string

Additional filter that the lookup should apply on top of the user input.

smart-lookup-parent-filter-operator
Type : string

Additional filter that the lookup should apply on top of the user input.

smart-lookup-parent-filter-value
Type : string

Additional filter that the lookup should apply on top of the user input.

smart-partial-dataset
Type : boolean
smart-query-string
Type : string
smart-server-side-filtering
Type : boolean

Optional flag used for setting the serverSideFiltering property on the smart data sources connected to the lookup.

smart-server-side-sorting
Type : boolean
smartModel
Type : any

Outputs

blur
Type : EventEmitter<void>
focus
Type : EventEmitter<void>
keyValueModelChange
Type : EventEmitter<any>
on-change
Type : EventEmitter<any>

Fires when the lookup's selection has changed, either by autocomplete or by selecting a value from the lookup's grid.

smartModelChange
Type : EventEmitter<any>

Methods

callNativeMethod
callNativeMethod(methodName: string, args: any[])
Parameters :
Name Type Optional
methodName string No
args any[] No
Returns : any
closeLookupDialog
closeLookupDialog(result: string)
Parameters :
Name Type Optional
result string No
Returns : void
externalDataGridSelectionChanged
externalDataGridSelectionChanged(selectionEvent: SelectionEvent)
Parameters :
Name Type Optional
selectionEvent SelectionEvent No
Returns : void
getDataSource
getDataSource()

Observable

getNativeProperty
getNativeProperty(propertyName: string)
Parameters :
Name Type Optional
propertyName string No
Returns : any
handleAutocompleteDropdown
handleAutocompleteDropdown(event: any)
Parameters :
Name Type Optional
event any No
Returns : void
handleFilterChange
handleFilterChange(ev: any)
Parameters :
Name Type Optional
ev any No
Returns : void
Async handleValueChange
handleValueChange(value: any)
Parameters :
Name Type Optional
value any No
Returns : any
Async lookup
lookup()

Opens the lookup's dialog, and updates the selected record accordingly should the user select a value from the lookup's grid.

Returns : any
onGridDoubleClicked
onGridDoubleClicked()
Returns : void
reInitDatasource
reInitDatasource()
Returns : void
setDataSource
setDataSource(dataSourceName: string)
Parameters :
Name Type Optional
dataSourceName string No
Returns : void
setNativeProperty
setNativeProperty(propertyName: string, value: any)
Parameters :
Name Type Optional
propertyName string No
value any No
Returns : void

Properties

autocompleteItem
Type : any

The value determined by executing autocomplete.

autocompleteItems
Type : any[]
Default value : []

A list of possible autocomplete values determined by the user's input.

autoCompleteOptions
Type : any
datasourceId
Type : string
Default value : 'internal_' + new Date().getTime()
dialogComponent
Type : SmartDialogComponent
Decorators :
@ViewChild('lookupDialog')
dialogOpened
Default value : false
dialogTemplate
Type : TemplateRef<any>
Decorators :
@ViewChild('dialogTemplate', {static: true})
externalDataLoading
Default value : false
externalDialogData
Type : ReplaySubject<any[]>
Default value : new ReplaySubject(1)
isUsingNamedQuery
Type : boolean
lookupDialogDatasourceId
Default value : UUID.UUID()
lookupDialogInstanceId
Default value : UUID.UUID()
lookupLoadedOnce
Default value : false
namedQueryDialogTemplate
Type : TemplateRef<any>
Decorators :
@ViewChild('dialogNamedQueryTemplate', {static: true})
visible
Default value : true

Accessors

autoComplete
setautoComplete(value: string)

The lookup's autocomplete options.

Parameters :
Name Type Optional
value string No
Returns : void
_dialogOptions
get_dialogOptions()
Returns : any
smartModel
getsmartModel()
Returns : any
setsmartModel(value: any)
Parameters :
Name Type Optional
value any No
Returns : void
selected
getselected()
setselected(value: any)

The parent Smart Viewer's attached datasource's selection. This is always set internally by the Smart Viewer and should NOT be used in development.

Parameters :
Name Type Optional
value any No
Returns : void
keyValueModel
getkeyValueModel()
Returns : any
setkeyValueModel(value: any)
Parameters :
Name Type Optional
value any No
Returns : void
selectionBoundFields
setselectionBoundFields(value: string)

Additional fields to fetch from the lookup's internal data-source when selecting a record in the lookup dialog or when the user typed a value in the lookup field

Parameters :
Name Type Optional
value string No
Returns : void
smartFilter
getsmartFilter()

Gets the smartFilter

setsmartFilter(value)

Sets the smartFilter property of a lookup, uses SmartFilterDescriptor or ABL strings

Parameters :
Name Optional
value No
Returns : void
lookupFilter
getlookupFilter()

Gets the lookupFilter, this returns beforePerformLookupFilter or the smartFilter property. If both are defined it will return the beforePerformLookupFilter.

smartFilterFields
getsmartFilterFields()
Returns : string
setsmartFilterFields(value: string)

Initial filter fields that should be activated within the lookup's Smart Filter.

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
queryString
getqueryString()
Returns : string
setqueryString(value: string)
Parameters :
Name Type Optional
value string No
Returns : void
optionalFilterFields
getoptionalFilterFields()
Returns : string
setoptionalFilterFields(value: string)

The optional filter fields that the lookup's Smart Filter should offer. Requires that the allow-optional-filter-fields attribute is set to true.

Parameters :
Name Type Optional
value string No
Returns : void
smartFilterId
getsmartFilterId()

The smart-object-name of the lookup's Smart Filter.

Returns : string
datasource
getdatasource()
Returns : SmartDataSource
setdatasource(value)
Parameters :
Name Optional
value No
Returns : void
autocompleteField
getautocompleteField()
Returns : AutoCompleteComponent
setautocompleteField(value)
Parameters :
Name Optional
value No
Returns : void
autocompleteComponent
getautocompleteComponent()
Returns : AutoCompleteComponent
enabled
getenabled()

Indicates whether the lookup's input and search button are enabled.

Returns : boolean
setenabled(value: boolean)
Parameters :
Name Type Optional
value boolean No
Returns : void
            <smart-data-source
                    *ngIf="lookupLoadedOnce" 
                    [smart-filter]="lookupFilter"
                    [smart-instance-name]="datasourceId" 
                    [smart-business-entity-name]="businessEntity" 
                    [smart-partial-dataset]="partialDataset"
                    [smart-entity-table]="table">
            </smart-data-source>
            <smart-data-source
                    *ngIf="lookupLoadedOnce"
                    [smart-filter]="lookupFilter"
                    [smart-filter-source]="smartFilterId"
                    [smart-business-entity-name]="businessEntity"
                    [smart-entity-table]="table"
                    [smart-instance-name]="lookupDialogDatasourceId"
                    [smart-partial-dataset]="partialDataset">
            </smart-data-source>
            <div class="input-group" [hidden]="!visible">
                    <kendo-autocomplete 
                        [ngClass]="{ numeric: numeric }"
                        class="form-control"
                        [readonly]="disableAutocomplete"
                        [disabled]="!enabled || !selected" 
                        (focus)="focus.next()"
                        (blur)="blur.next()"
                        #autocompleteField 
                        [filterable]="true"
                        (valueChange)="handleValueChange($event)" 
                        (filterChange)="handleFilterChange($event)" 
                        [valueField]="keyField" 
                        [suggest]="true" 
                        [clearButton]="false"
                        [data]="autocompleteItems">
                            <ng-template kendoDropDownListNoDataTemplate>
                                <h4><span class="k-icon k-i-loading"></span>&nbsp;Loading...</h4>
                            </ng-template>
                    </kendo-autocomplete>
                    <div class="input-group-append input-group-sm search-btn-wrap">
                        <button [disabled]="!selected || !enabled" class="btn k-button search-btn" (click)="lookup()">
                            <span class="k-icon k-i-search" aria-hidden="true"></span>
                        </button>
                    </div>
               </div>
               <ng-template #dialogTemplate>
                    <smart-filter 
                        *ngIf="showFilter && !!datasource && !!smartFilterId"
                        orientation="horizontal" 
                        style="margin-bottom: 20px;" 
                        class="col-12" 
                        [smart-instance-name]="smartFilterId" 
                        [filter-fields-initial]="smartFilterFields"
                        [filter-fields-optional]="optionalFilterFields">
                    </smart-filter>
                    <br *ngIf="showFilter && !!datasource && !!smartFilterId">
                    <smart-grid 
                        (onDoubleClicked)="onGridDoubleClicked()"
                        (onOpen)="handleAutocompleteDropdown($event)" 
                        [smart-grid-layout]="smartGridLayout" 
                        [smart-data-source]="lookupDialogDatasourceId"
                        [smart-instance-name]="lookupDialogInstanceId"
                        [disable-text-selection]="true">
                    </smart-grid>
               </ng-template>
               <ng-template #dialogNamedQueryTemplate>
                   <kendo-grid
                        #externalDataGrid
                        (selectionChange)="externalDataGridSelectionChanged($event)"
                        (dblclick)="onGridDoubleClicked()"
                        [style.height]="'100%'"
                        [data]="externalDialogData | async"
                        [filterable]="smartGridLayout.filterable"
                        [selectable]="'row'"
                        [loading]="externalDataLoading">
                            <kendo-grid-column
                                *ngFor="let column of smartGridLayout.columns"
                                [field]="column.field"
                                [title]="column.title"
                                [format]="column.format"
                                [filter]="column.type">
                            </kendo-grid-column>
                    </kendo-grid>
               </ng-template>

./smart-lookup.component.css

::ng-deep kendo-autocomplete {
    overflow: hidden !important;
}

::ng-deep kendo-autocomplete kendo-searchbar {
    width: 100% !important;
}

::ng-deep kendo-autocomplete.numeric kendo-searchbar input {
    text-align: right;
    transition: 0.15s padding ease-out;
    -moz-transition: 0.15s padding ease-out;
    -o-transition: 0.15s padding ease-out;
    -webkit-transition: 0.15s ease-out;
}

::ng-deep kendo-autocomplete.numeric kendo-searchbar input:hover,
::ng-deep kendo-autocomplete.numeric kendo-searchbar input:focus {
    padding-right: 25px;
}

::ng-deep kendo-autocomplete kendo-searchbar input {
    width: 100% !important;
    border-right: 0 transparent !important;
}

::ng-deep [hidden] {
    display: none !important;
}

::ng-deep .k-button.search-btn {
    height: 100% !important;
}

::ng-deep .k-dialog-wrapper {
    z-index: 100000 !important;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""