src/ui/lookup/smart-lookup.component.ts
AbstractSmartViewerFieldComponent
selector | smart-lookup |
styleUrls | ./smart-lookup.component.css |
templateUrl | ./smart-lookup.component.html |
viewProviders |
|
constructor(elementRef: ElementRef, errorHandler: SmartErrorHandlerService, vcRef: ViewContainerRef, dlgSvc: DialogService, widgetFacadeFactory: WidgetFacadeFactory, viewerHelper: SmartViewerHelperService, formInstanceService: SmartFormInstanceService)
|
||||||||||||||||||||||||
Parameters :
|
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
|
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>
|
callNativeMethod | |||||||||
callNativeMethod(methodName: string, args: any[])
|
|||||||||
Parameters :
Returns :
any
|
closeLookupDialog | ||||||
closeLookupDialog(result: string)
|
||||||
Parameters :
Returns :
void
|
externalDataGridSelectionChanged | ||||||
externalDataGridSelectionChanged(selectionEvent: SelectionEvent)
|
||||||
Parameters :
Returns :
void
|
getDataSource |
getDataSource()
|
Returns :
Observable<SmartDataSource>
Observable |
getNativeProperty | ||||||
getNativeProperty(propertyName: string)
|
||||||
Parameters :
Returns :
any
|
handleAutocompleteDropdown | ||||||
handleAutocompleteDropdown(event: any)
|
||||||
Parameters :
Returns :
void
|
handleFilterChange | ||||||
handleFilterChange(ev: any)
|
||||||
Parameters :
Returns :
void
|
Async handleValueChange | ||||||
handleValueChange(value: any)
|
||||||
Parameters :
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 :
Returns :
void
|
setNativeProperty |
setNativeProperty(propertyName: string, value: any)
|
Returns :
void
|
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
|
autoComplete | ||||||
setautoComplete(value: string)
|
||||||
The lookup's autocomplete options.
Parameters :
Returns :
void
|
_dialogOptions |
get_dialogOptions()
|
Returns :
any
|
smartModel | ||||||
getsmartModel()
|
||||||
Returns :
any
|
||||||
setsmartModel(value: any)
|
||||||
Parameters :
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 :
Returns :
void
|
keyValueModel | ||||||
getkeyValueModel()
|
||||||
Returns :
any
|
||||||
setkeyValueModel(value: any)
|
||||||
Parameters :
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 :
Returns :
void
|
smartFilter | ||||
getsmartFilter()
|
||||
Gets the smartFilter
Returns :
SmartFilterDescriptor | string
|
||||
setsmartFilter(value)
|
||||
Sets the smartFilter property of a lookup, uses SmartFilterDescriptor or ABL strings
Parameters :
Returns :
void
|
lookupFilter |
getlookupFilter()
|
Gets the lookupFilter, this returns beforePerformLookupFilter or the smartFilter property. If both are defined it will return the beforePerformLookupFilter.
Returns :
SmartFilterDescriptor | string
|
smartFilterFields | ||||||
getsmartFilterFields()
|
||||||
Returns :
string
|
||||||
setsmartFilterFields(value: string)
|
||||||
Initial filter fields that should be activated within the lookup's Smart Filter.
Parameters :
Returns :
void
|
foreignFields | ||||||
getforeignFields()
|
||||||
Returns :
string
|
||||||
setforeignFields(value: string)
|
||||||
Parameters :
Returns :
void
|
queryString | ||||||
getqueryString()
|
||||||
Returns :
string
|
||||||
setqueryString(value: string)
|
||||||
Parameters :
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 :
Returns :
void
|
smartFilterId |
getsmartFilterId()
|
The smart-object-name of the lookup's Smart Filter.
Returns :
string
|
datasource | ||||
getdatasource()
|
||||
Returns :
SmartDataSource
|
||||
setdatasource(value)
|
||||
Parameters :
Returns :
void
|
autocompleteField | ||||
getautocompleteField()
|
||||
Returns :
AutoCompleteComponent
|
||||
setautocompleteField(value)
|
||||
Parameters :
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 :
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> 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;
}