How to use the aurelia-slickgrid.Filters.multipleSelect function in aurelia-slickgrid
To help you get started, we’ve selected a few aurelia-slickgrid examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
ghiscoding / aurelia-slickgrid / doc / github-demo / src / examples / slickgrid / example4.ts View on Github 
model: Filters.compoundInputText
}
},
{
id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80,
type: FieldType.string,
filter: {
model: new CustomInputFilter() // create a new instance to make each Filter independent from each other customFilter
}
},
{
id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, exportCsvForceToKeepAsString: true,
minWidth: 55,
filterable: true,
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
}, {defineGrid() {
this.columnDefinitions = [
{ id: 'name', field: 'name', headerKey: 'NAME', filterable: true, sortable: true, type: FieldType.string, width: 60 },
{
id: 'gender', field: 'gender', headerKey: 'GENDER', filterable: true, sortable: true, width: 60,
filter: {
model: Filters.singleSelect,
collection: [{ value: '', label: '' }, { value: 'male', label: 'male', labelKey: 'MALE' }, { value: 'female', label: 'female', labelKey: 'FEMALE' }]
}
},
{
id: 'company', field: 'company', headerKey: 'COMPANY', width: 60,
sortable: true,
filterable: true,
filter: {
model: Filters.multipleSelect,
collection: [{ value: 'acme', label: 'Acme' }, { value: 'abc', label: 'Company ABC' }, { value: 'xyz', label: 'Company XYZ' }],
filterOptions: {
filter: true // adds a filter on top of the multi-select dropdown
}
}
},
{ id: 'billing.address.street', field: 'billing.address.street', headerKey: 'BILLING.ADDRESS.STREET', width: 60, filterable: true, sortable: true },
{
id: 'billing.address.zip', field: 'billing.address.zip', headerKey: 'BILLING.ADDRESS.ZIP', width: 60,
type: FieldType.number,
filterable: true, sortable: true,
filter: {
model: Filters.compoundInput
},
formatter: Formatters.multiple, params: { formatters: [Formatters.complexObject, Formatters.translate] }
},// OR a regular collection load
// collection: Array.from(Array(NB_ITEMS).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' })),
collectionSortBy: {
property: 'value',
sortDesc: true,
fieldType: FieldType.number
},
customStructure: {
label: 'label',
value: 'value',
labelPrefix: 'prefix',
},
collectionOptions: {
separatorBetweenTextLabels: ''
},
model: Filters.multipleSelect,
operator: OperatorType.inContains,
},
}
];
this.gridOptions = {
autoEdit: this.isAutoEdit,
autoCommitEdit: false,
autoResize: {
containerId: 'demo-container',
sidePadding: 15
},
editable: true,
enableCellNavigation: true,
enableExcelCopyBuffer: true,
enableFiltering: true,},
{
id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80, width: 100,
type: FieldType.string,
filter: {
model: Filters.input
}
},
{
id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, exportCsvForceToKeepAsString: true,
minWidth: 55, width: 100,
headerKey: 'DURATION',
filterable: true,
filter: {
collection: multiSelectFilterArray,
model: Filters.multipleSelect,
searchTerms: [1, 33, 44, 50, 66], // default selection
// we could add certain option(s) to the "multiple-select" plugin
filterOptions: {
maxHeight: 250,
width: 175
}
}
},
{
id: 'complete', name: '% Complete', field: 'percentComplete', minWidth: 70, type: FieldType.number, sortable: true, width: 100,
formatter: Formatters.percentCompleteBar, filterable: true, filter: { model: Filters.slider, operator: '>' }
},
{
id: 'start', name: 'Start', field: 'start', headerKey: 'START', formatter: Formatters.dateIso, sortable: true, minWidth: 75, exportWithFormatter: true, width: 100,
type: FieldType.date, filterable: true, filter: { model: Filters.compoundDate }
},},
{
id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80, width: 100,
type: FieldType.string,
filter: {
model: Filters.input
}
},
{
id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, exportCsvForceToKeepAsString: true,
minWidth: 55, width: 100,
headerKey: 'DURATION',
filterable: true,
filter: {
collection: multiSelectFilterArray,
model: Filters.multipleSelect,
searchTerms: [1, 33, 44, 50, 66], // default selection
// we could add certain option(s) to the "multiple-select" plugin
filterOptions: {
maxHeight: 250,
width: 175
}
}
},
{
id: 'complete', name: '% Complete', field: 'percentComplete', minWidth: 70, type: FieldType.number, sortable: true, width: 100,
formatter: Formatters.percentCompleteBar, filterable: true, filter: { model: Filters.slider, operator: '>' }
},
{
id: 'start', name: 'Start', field: 'start', headerKey: 'START', formatter: Formatters.dateIso, sortable: true, minWidth: 75, exportWithFormatter: true, width: 100,
type: FieldType.date, filterable: true, filter: { model: Filters.compoundDate }
},// OR a regular collection load
collection: Array.from(Array(NB_ITEMS).keys()).map(k => ({ value: k, label: k, prefix: 'Task', suffix: 'days' })),
collectionSortBy: {
property: 'value',
sortDesc: true,
fieldType: FieldType.number
},
customStructure: {
label: 'label',
value: 'value',
labelPrefix: 'prefix'
},
collectionOptions: {
separatorBetweenTextLabels: ''
},
model: Filters.multipleSelect,
operator: OperatorType.inContains
}
}];
this.gridOptions = {
autoEdit: this.isAutoEdit,
autoCommitEdit: false,
autoResize: {
containerId: 'demo-container',
sidePadding: 15
},
editable: true,
enableCellNavigation: true,
enableExcelCopyBuffer: true,
enableFiltering: true,
editCommandHandler: (item, column, editCommand) => {model: Filters.compoundInputText
}
},
{
id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80,
type: FieldType.string,
filter: {
model: new CustomInputFilter() // create a new instance to make each Filter independent from each other customFilter
}
},
{
id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, exportCsvForceToKeepAsString: true,
minWidth: 55,
filterable: true,
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
}, {defineGrid() {
this.columnDefinitions = [
{ id: 'name', field: 'name', headerKey: 'NAME', filterable: true, sortable: true, type: FieldType.string, width: 60 },
{
id: 'gender', field: 'gender', headerKey: 'GENDER', filterable: true, sortable: true, width: 60,
filter: {
model: Filters.singleSelect,
collection: [{ value: '', label: '' }, { value: 'male', label: 'male', labelKey: 'MALE' }, { value: 'female', label: 'female', labelKey: 'FEMALE' }]
}
},
{
id: 'company', field: 'company', headerKey: 'COMPANY', width: 60,
sortable: true,
filterable: true,
filter: {
model: Filters.multipleSelect,
collection: [{ value: 'acme', label: 'Acme' }, { value: 'abc', label: 'Company ABC' }, { value: 'xyz', label: 'Company XYZ' }]
}
},
{ id: 'billing.address.street', field: 'billing.address.street', headerKey: 'BILLING.ADDRESS.STREET', width: 60, filterable: true, sortable: true },
{
id: 'billing.address.zip', field: 'billing.address.zip', headerKey: 'BILLING.ADDRESS.ZIP', width: 60,
type: FieldType.number,
filterable: true, sortable: true,
filter: {
model: Filters.compoundInput
},
formatter: Formatters.multiple, params: { formatters: [Formatters.complexObject, Formatters.translate] }
}
];
this.gridOptions = {aurelia-slickgrid
Slickgrid components made available in Aurelia
Package Health Score
75 / 100Popular aurelia-slickgrid functions
- aurelia-slickgrid.Aggregators.Avg
- aurelia-slickgrid.Aggregators.Sum
- aurelia-slickgrid.Editors.checkbox
- aurelia-slickgrid.Editors.date
- aurelia-slickgrid.Editors.longText
- aurelia-slickgrid.FieldType.boolean
- aurelia-slickgrid.FieldType.date
- aurelia-slickgrid.FieldType.dateIso
- aurelia-slickgrid.FieldType.number
- aurelia-slickgrid.FieldType.string
- aurelia-slickgrid.Filters.compoundDate
- aurelia-slickgrid.Filters.compoundInput
- aurelia-slickgrid.Filters.multipleSelect
- aurelia-slickgrid.Filters.singleSelect
- aurelia-slickgrid.Filters.slider
- aurelia-slickgrid.Formatters.checkmark
- aurelia-slickgrid.Formatters.dateIso
- aurelia-slickgrid.Formatters.multiple
- aurelia-slickgrid.Formatters.percentCompleteBar
- aurelia-slickgrid.OperatorType.notEqual