Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
minWidth: 30,
maxWidth: 30
// use onCellClick OR grid.onClick.subscribe which you can see down below
/*
onCellClick: (e: Event, args: OnEventArgs) => {
console.log(args);
this.alertWarning = `Deleting: ${args.dataContext.title}`;
}
*/
}, {
id: 'title',
name: 'Title',
field: 'title',
filterable: true,
sortable: true,
type: FieldType.string,
editor: {
model: Editors.longText,
validator: myCustomTitleValidator // use a custom validator
},
minWidth: 100,
onCellChange: (e, args) => {
console.log(args);
this.alertWarning = `Updated Title: ${args.dataContext.title}`;
}
}, {
id: 'title2',
name: 'Title, Custom Editor',
field: 'title',
filterable: true,
sortable: true,
type: FieldType.string,
defineGrid() {
// prepare a multiple-select array to filter with
const multiSelectFilterArray = [];
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: {
this.columnDefinitions = [
{
id: 'title',
name: 'Title',
field: 'title',
filterable: true,
sortable: true,
type: FieldType.string,
minWidth: 45,
filter: {
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(),
{
id: 'title',
name: 'Title',
field: 'title',
headerKey: 'TITLE',
filterable: true,
sortable: true,
type: FieldType.string,
minWidth: 45, width: 100,
filter: {
model: Filters.compoundInput
}
},
{
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,
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,
enableCheckboxSelector: true,
checkboxSelector: {
// remove the unnecessary "Select All" checkbox in header when in single selection mode
hideSelectAllCheckbox: true
},
rowSelectionOptions: {
// True (Single Selection), False (Multiple Selections)
defineGrid() {
this.columnDefinitions = [
{
id: 'title', name: 'Title', field: 'title',
sortable: true,
type: FieldType.string,
editor: {
model: Editors.longText
}
},
{
id: 'duration', name: 'Duration (days)', field: 'duration',
sortable: true,
type: FieldType.number,
editor: {
model: Editors.text
},
onCellChange: (e, args) => {
alert('onCellChange directly attached to the column definition');
console.log(args);
}
},
defineGrid() {
this.columnDefinitions = [
{ id: 'name', name: 'Name', field: 'name', filterable: true, sortable: true, type: FieldType.string, minWidth: 100 },
{
id: 'gender', name: 'Gender', field: 'gender', filterable: true, sortable: true, minWidth: 100,
filter: {
collection: [{ value: '', label: '' }, { value: 'male', label: 'male' }, { value: 'female', label: 'female' }],
type: FormElementType.singleSelect
}
},
{ id: 'company', name: 'Company', field: 'company', minWidth: 100 }
];
this.gridOptions = {
enableAutoResize: true,
autoResize: {
containerId: 'demo-container',
sidePadding: 15
},
defineGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, width: 70 },
{ id: 'phone', name: 'Phone Number using mask', field: 'phone', sortable: true, type: FieldType.number, minWidth: 100, formatter: Formatters.mask, params: { mask: '(000) 000-0000' } },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, minWidth: 90 },
{ id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, sortable: true, minWidth: 100 },
{ id: 'percent2', name: '% Complete', field: 'percentComplete2', formatter: Formatters.progressBar, type: FieldType.number, sortable: true, minWidth: 100 },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true },
{ id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, type: FieldType.date, minWidth: 90, exportWithFormatter: true },
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: myCustomCheckmarkFormatter, type: FieldType.number, sortable: true, minWidth: 100 }
];
this.gridOptions = {
autoResize: {
containerId: 'demo-container',
sidePadding: 15
},
enableExcelCopyBuffer: true
};
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,
filterable: true
},
{
id: 'duration', name: 'Duration (days)', field: 'duration',
sortable: true,
defineGrid() {
this.columnDefinitions = [
{
id: 'name', name: 'Name', field: 'name', sortable: true, type: FieldType.string,
filterable: true,
filter: {
model: Filters.compoundInput
}
},
{
id: 'gender', name: 'Gender', field: 'gender', filterable: true, sortable: true,
filter: {
model: Filters.singleSelect,
collection: [{ value: '', label: '' }, { value: 'male', label: 'male' }, { value: 'female', label: 'female' }]
}
},
{ id: 'company', name: 'Company', field: 'company' }
];
this.gridOptions = {