Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
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: 'completed', field: 'completed', headerKey: 'COMPLETED', minWidth: 85, maxWidth: 85, formatter: Formatters.checkmark, width: 100,
type: FieldType.boolean,
sortable: true,
filterable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
model: Filters.singleSelect
}
}
];
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: 'completed', field: 'completed', headerKey: 'COMPLETED', minWidth: 85, maxWidth: 85, formatter: Formatters.checkmark, width: 100,
type: FieldType.boolean,
sortable: true,
filterable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
model: Filters.singleSelect
}
}
];
validator: myCustomTitleValidator, // use a custom validator
},
filter: {
model: CustomInputFilter,
placeholder: '🔍 custom',
},
minWidth: 70
}, {
id: 'duration',
name: 'Duration (days)',
field: 'duration',
filterable: true,
minWidth: 100,
sortable: true,
type: FieldType.number,
filter: { model: Filters.slider, params: { hideSliderNumber: false } },
editor: {
model: Editors.slider,
minValue: 0,
maxValue: 100,
// params: { hideSliderNumber: true },
},
/*
editor: {
// default is 0 decimals, if no decimals is passed it will accept 0 or more decimals
// however if you pass the "decimalPlaces", it will validate with that maximum
model: Editors.float,
minValue: 0,
maxValue: 365,
// the default validation error message is in English but you can override it by using "errorMessage"
// errorMessage: this.i18n.tr('INVALID_FLOAT', { maxDecimal: 2 }),
params: { decimalPlaces: 2 },
defineGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'id', headerKey: 'TITLE', formatter: this.taskTranslateFormatter, sortable: true, minWidth: 100, filterable: true, params: { useFormatterOuputToFilter: true } },
{ id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80 },
{
id: 'duration', name: 'Duration (days)', field: 'duration', headerKey: 'DURATION', sortable: true,
formatter: Formatters.percentCompleteBar, minWidth: 100,
filterable: true,
filter: { model: Filters.slider, /* operator: '>=',*/ params: { hideSliderNumber: true } }
},
{ id: 'start', name: 'Start', field: 'start', headerKey: 'START', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
{ id: 'finish', name: 'Finish', field: 'finish', headerKey: 'FINISH', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
{
id: 'completedBool', name: 'Completed', field: 'completedBool', headerKey: 'COMPLETED', minWidth: 100,
sortable: true,
formatter: Formatters.checkmark,
exportCustomFormatter: Formatters.translateBoolean,
filterable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, labelKey: 'TRUE' }, { value: false, labelKey: 'FALSE' }],
model: Filters.singleSelect,
enableTranslateLabel: true
}
},
{
filterable: true,
sortable: true,
type: FieldType.string,
editor: {
model: CustomInputEditor,
validator: myCustomTitleValidator // use a custom validator
},
minWidth: 70
}, {
id: 'duration',
name: 'Duration (days)',
field: 'duration',
filterable: true,
sortable: true,
type: FieldType.number,
filter: { model: Filters.slider, params: { hideSliderNumber: false } },
editor: {
model: Editors.slider,
minValue: 0,
maxValue: 100
// params: { hideSliderNumber: true },
},
/*
editor: {
// default is 0 decimals, if no decimals is passed it will accept 0 or more decimals
// however if you pass the "decimalPlaces", it will validate with that maximum
model: Editors.float,
minValue: 0,
maxValue: 365,
// the default validation error message is in English but you can override it by using "errorMessage"
// errorMessage: this.i18n.tr('INVALID_FLOAT', { maxDecimal: 2 }),
params: { decimalPlaces: 2 },
defineGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'id', headerKey: 'TITLE', formatter: this.taskTranslateFormatter, sortable: true, minWidth: 100, filterable: true, params: { useFormatterOuputToFilter: true } },
{ id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 80 },
{
id: 'duration', name: 'Duration (days)', field: 'duration', headerKey: 'DURATION', sortable: true,
formatter: Formatters.percentCompleteBar, minWidth: 100,
filterable: true,
filter: { model: Filters.slider, /* operator: '>=',*/ params: { hideSliderNumber: true } }
},
{ id: 'start', name: 'Start', field: 'start', headerKey: 'START', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
{ id: 'finish', name: 'Finish', field: 'finish', headerKey: 'FINISH', formatter: Formatters.dateIso, outputType: FieldType.dateIso, type: FieldType.date, minWidth: 100, filterable: true, filter: { model: Filters.compoundDate } },
{
id: 'completedBool', name: 'Completed', field: 'completedBool', headerKey: 'COMPLETED', minWidth: 100,
sortable: true,
formatter: Formatters.checkmark,
exportCustomFormatter: Formatters.translateBoolean,
filterable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, labelKey: 'TRUE' }, { value: false, labelKey: 'FALSE' }],
model: Filters.singleSelect,
enableTranslateLabel: true
}
},
{
defineGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70, filterable: true },
{ id: 'duration', name: 'Duration (days)', field: 'duration', formatter: Formatters.decimal, params: { minDecimalPlaces: 1, maxDecimalPlaces: 2 }, sortable: true, type: FieldType.number, minWidth: 90, filterable: true },
{ id: 'percent2', name: '% Complete', field: 'percentComplete2', formatter: Formatters.progressBar, type: FieldType.number, sortable: true, minWidth: 100, filterable: true, filter: { model: Filters.slider, operator: '>' } },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate } },
{ id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate } },
{
id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven',
minWidth: 100,
formatter: Formatters.checkmark, type: FieldType.boolean,
filterable: true, sortable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, label: 'True' }, { value: false, label: 'False' }],
model: Filters.singleSelect
}
}
];
this.gridOptions = {
autoResize: {
sortable: true
},
{
id: 'duration', name: 'Duration', field: 'duration',
minWidth: 100, width: 120,
filterable: true,
sortable: true
},
{
id: 'percentComplete', name: '% Complete', field: 'percentComplete',
resizable: false,
minWidth: 130, width: 140,
formatter: Formatters.percentCompleteBar,
type: FieldType.number,
filterable: true,
filter: { model: Filters.slider, operator: '>=' },
sortable: true
},
{
id: 'start', name: 'Start', field: 'start',
minWidth: 100, width: 120,
filterable: true,
sortable: true
},
{
id: 'finish', name: 'Finish', field: 'finish',
minWidth: 100, width: 120,
filterable: true,
sortable: true
},
{
id: 'effortDriven', name: 'Effort Driven', field: 'effortDriven',