Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
defineGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'title', filterable: true, type: FieldType.string },
{ id: 'duration', name: 'Duration', field: 'duration', sortable: true, filterable: true, type: FieldType.string },
{ id: '%', name: '% Complete', field: 'percentComplete', sortable: true, filterable: true, type: FieldType.number },
{ id: 'start', name: 'Start', field: 'start', filterable: true, type: FieldType.string },
{ id: 'finish', name: 'Finish', field: 'finish', filterable: true, type: FieldType.string },
{
id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', maxWidth: 80, formatter: Formatters.checkmark,
type: FieldType.boolean,
minWidth: 100,
sortable: true,
filterable: true,
filter: {
searchTerm: '', // default selection
type: FormElementType.select,
selectOptions: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }]
}
}
];
for (let i = 0; i < NB_ITEMS; i++) {
multiSelectFilterArray.push({ value: i, label: i });
}
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'title', filterable: true, sortable: true, type: FieldType.string, minWidth: 45 },
{
id: 'description', name: 'Description', field: 'description', filterable: true, sortable: true, minWidth: 50,
type: FieldType.string,
filter: {
type: FilterType.custom,
customFilter: new CustomInputFilter() // create a new instance to make each Filter independent from each other
}
},
{
id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number,
minWidth: 55,
filterable: true,
filter: {
collection: multiSelectFilterArray,
type: FilterType.multipleSelect,
searchTerms: [1, 10, 20], // default selection
// we could add certain option(s) to the "multiple-select" plugin
filterOptions: {
maxHeight: 250,
width: 175
}
}
},
{ id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, minWidth: 55, type: FieldType.number, filterable: true, sortable: true },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, filterable: true, sortable: true, type: FieldType.date, minWidth: 60 },
separatorBetweenTextLabels: ' ',
filterResultAfterEachPass: 'chain' // options are "merge" or "chain" (defaults to "chain")
},
// we could add certain option(s) to the "multiple-select" plugin
filterOptions: {
maxHeight: 250,
width: 175,
// if we want to display shorter text as the selected text (on the select filter itself, parent element)
// we can use "useSelectOptionLabel" or "useSelectOptionLabelToHtml" the latter will parse html
useSelectOptionLabelToHtml: true
}
}
},
{
id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, minWidth: 70, type: FieldType.number, sortable: true,
filterable: true, filter: { model: Filters.compoundInputNumber }
},
{
id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, minWidth: 75, exportWithFormatter: true,
type: FieldType.date, filterable: true, filter: { model: Filters.compoundDate }
},
{
id: 'usDateShort', name: 'US Date Short', field: 'usDateShort', sortable: true, minWidth: 70, width: 70,
type: FieldType.dateUsShort, filterable: true, filter: { model: Filters.compoundDate }
},
{
id: 'utcDate', name: 'UTC Date', field: 'utcDate', formatter: Formatters.dateTimeIsoAmPm, sortable: true, minWidth: 115,
type: FieldType.dateUtc, outputType: FieldType.dateTimeIsoAmPm, filterable: true,
filter: {
model: Filters.compoundDate,
// override any of the Flatpickr options through "filterOptions"
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'title', headerKey: 'TITLE', filterable: true, type: FieldType.string },
{
id: 'phone', name: 'Phone Number using mask', field: 'phone',
filterable: true, sortable: true, minWidth: 100,
type: FieldType.string, // because we use a mask filter, we should always assume the value is a string for it to behave correctly
formatter: Formatters.mask, params: { mask: '(000) 000-0000' },
filter: {
model: Filters.inputMask,
operator: OperatorType.startsWith
}
},
{ id: 'duration', name: 'Duration', field: 'duration', headerKey: 'DURATION', sortable: true, filterable: true, type: FieldType.string },
{
id: '%', name: '% Complete', field: 'percentComplete', sortable: true, filterable: true,
type: FieldType.number,
formatter: Formatters.percentCompleteBar,
filter: { model: Filters.compoundSlider, params: { hideSliderNumber: false } }
},
{ id: 'start', name: 'Start', field: 'start', headerKey: 'START', filterable: true, type: FieldType.dateUs, filter: { model: Filters.compoundDate } },
{ id: 'finish', name: 'Finish', field: 'finish', headerKey: 'FINISH', filterable: true, type: FieldType.dateUs, filter: { model: Filters.compoundDate } },
{
id: 'completed', name: 'Completed', field: 'completed', headerKey: 'COMPLETED', maxWidth: 80, formatter: Formatters.checkmark,
type: FieldType.boolean,
minWidth: 100,
sortable: true,
filterable: true,
filter: {
collection: [{ value: '', label: '' }, { value: true, label: 'true' }, { value: false, label: 'false' }],
model: Filters.singleSelect,
}
}
{
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] }
},
];
this.gridOptions = {
enableAutoResize: false,
enableFiltering: true,
enableCellNavigation: true,
enableCheckboxSelector: true,
enableRowSelection: true,
enableTranslate: true,
i18n: this.i18n,
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: '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
}
}
defineGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, editor: Editors.longText },
{
id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, editor: Editors.text,
onCellChange: (args: OnEventArgs) => {
alert('onCellChange directly attached to the column definition');
console.log(args);
}
},
{ id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, editor: Editors.integer },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date/*, editor: Editors.date*/ },
{ id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date },
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, editor: Editors.checkbox }
];
this.gridOptions = {
asyncEditorLoading: false,
autoResize: {
containerId: 'demo-container',
sidePadding: 15
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 = {
enableAutoResize: false,
enableFiltering: true,
enableCellNavigation: true,
enableCheckboxSelector: true,
enableRowSelection: true,
enableTranslate: true,
i18n: this.i18n,
defineGrids() {
this.columnDefinitions1 = [
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number },
{ id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso, exportWithFormatter: true },
{ id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, exportWithFormatter: true },
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, sortable: true }
];
this.columnDefinitions2 = [
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number },
{ id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.dateIso, exportWithFormatter: true },
{ id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, exportWithFormatter: true },
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, sortable: true }
];
this.gridOptions1 = {
enableAutoResize: false,
enableCellNavigation: true,