Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
// 1- USE HttpClient from "aurelia-http-client" to load collection asynchronously
collectionAsync: this.http.createRequest(URL_SAMPLE_COLLECTION_DATA).asGet().send(),
// OR 2- use "aurelia-fetch-client", they are both supported
// collectionAsync: this.httpFetch.fetch(URL_SAMPLE_COLLECTION_DATA),
// collectionFilterBy & collectionSortBy accept a single or multiple options
// we can exclude certains values 365 & 360 from the dropdown filter
collectionFilterBy: [{
property: 'value',
operator: OperatorType.notEqual,
value: 360
}, {
property: 'value',
operator: OperatorType.notEqual,
value: 365
}],
// sort the select dropdown in a descending order
collectionSortBy: {
property: 'value',
sortDesc: true,
fieldType: FieldType.number
},
customStructure: {
value: 'value',
label: 'label',
optionLabel: 'value', // if selected text is too long, we can use option labels instead
labelSuffix: 'text'
},
collectionOptions: {
// 1- USE HttpClient from "aurelia-http-client" to load collection asynchronously
// collectionAsync: this.http.createRequest(URL_SAMPLE_COLLECTION_DATA).asGet().send(),
// OR 2- use "aurelia-fetch-client", they are both supported
collectionAsync: this.httpFetch.fetch(URL_SAMPLE_COLLECTION_DATA),
// collectionFilterBy & collectionSortBy accept a single or multiple options
// we can exclude certains values 365 & 360 from the dropdown filter
collectionFilterBy: [{
property: 'value',
operator: OperatorType.notEqual,
value: 360
}, {
property: 'value',
operator: OperatorType.notEqual,
value: 365
}],
// sort the select dropdown in a descending order
collectionSortBy: {
property: 'value',
sortDesc: true,
fieldType: FieldType.number
},
customStructure: {
value: 'value',
label: 'label',
optionLabel: 'value', // if selected text is too long, we can use option labels instead
labelSuffix: 'text',
},
collectionOptions: {
// We can also add HTML text to be rendered (any bad script will be sanitized) but we have to opt-in, else it will be sanitized
enableRenderHtml: true,
collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k, symbol: '<i style="color:cadetblue" class="fa fa-percent"></i>' })),
customStructure: {
value: 'value',
label: 'label',
labelSuffix: 'symbol'
},
collectionSortBy: {
property: 'label',
sortDesc: true
},
collectionFilterBy: {
property: 'value',
value: 0,
operator: OperatorType.notEqual
},
model: Editors.singleSelect,
},
minWidth: 100,
params: {
formatters: [Formatters.collectionEditor, Formatters.percentCompleteBar],
}
}, {
id: 'start',
name: 'Start',
field: 'start',
filterable: true,
filter: { model: Filters.compoundDate },
formatter: Formatters.dateIso,
sortable: true,
minWidth: 100,
filter: {
model: Filters.multipleSelect,
// We can load the "collection" asynchronously (on first load only, after that we will simply use "collection")
// 3 ways are supported (aurelia-http-client, aurelia-fetch-client OR even Promise)
// 1- USE HttpClient from "aurelia-http-client" to load collection asynchronously
// collectionAsync: this.http.createRequest(URL_SAMPLE_COLLECTION_DATA).asGet().send(),
// OR 2- use "aurelia-fetch-client", they are both supported
collectionAsync: this.httpFetch.fetch(URL_SAMPLE_COLLECTION_DATA),
// collectionFilterBy & collectionSortBy accept a single or multiple options
// we can exclude certains values 365 & 360 from the dropdown filter
collectionFilterBy: [{
property: 'value',
operator: OperatorType.notEqual,
value: 360
}, {
property: 'value',
operator: OperatorType.notEqual,
value: 365
}],
// sort the select dropdown in a descending order
collectionSortBy: {
property: 'value',
sortDesc: true,
fieldType: FieldType.number
},
customStructure: {
value: 'value',
label: 'label',
// We can also add HTML text to be rendered (any bad script will be sanitized) but we have to opt-in, else it will be sanitized
enableRenderHtml: true,
collection: Array.from(Array(101).keys()).map(k => ({ value: k, label: k, symbol: '<i style="color:cadetblue" class="fa fa-percent"></i>' })),
customStructure: {
value: 'value',
label: 'label',
labelSuffix: 'symbol'
},
collectionSortBy: {
property: 'label',
sortDesc: true
},
collectionFilterBy: {
property: 'value',
value: 0,
operator: OperatorType.notEqual
},
model: Editors.singleSelect
},
minWidth: 100,
params: {
formatters: [Formatters.collectionEditor, Formatters.percentCompleteBar]
}
}, {
id: 'start',
name: 'Start',
field: 'start',
filterable: true,
filter: { model: Filters.compoundDate },
formatter: Formatters.dateIso,
sortable: true,
minWidth: 100,
filter: {
model: Filters.multipleSelect,
// We can load the "collection" asynchronously (on first load only, after that we will simply use "collection")
// 3 ways are supported (aurelia-http-client, aurelia-fetch-client OR even Promise)
// 1- USE HttpClient from "aurelia-http-client" to load collection asynchronously
collectionAsync: this.http.createRequest(URL_SAMPLE_COLLECTION_DATA).asGet().send(),
// OR 2- use "aurelia-fetch-client", they are both supported
// collectionAsync: this.httpFetch.fetch(URL_SAMPLE_COLLECTION_DATA),
// collectionFilterBy & collectionSortBy accept a single or multiple options
// we can exclude certains values 365 & 360 from the dropdown filter
collectionFilterBy: [{
property: 'value',
operator: OperatorType.notEqual,
value: 360
}, {
property: 'value',
operator: OperatorType.notEqual,
value: 365
}],
// sort the select dropdown in a descending order
collectionSortBy: {
property: 'value',
sortDesc: true,
fieldType: FieldType.number
},
customStructure: {
value: 'value',
label: 'label',