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);
if (confirm('Are you sure?')) {
this.aureliaGrid.gridService.deleteDataGridItemById(args.dataContext.id);
}
}
},
{
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: Event, args: OnEventArgs) => {
alert('onCellChange directly attached to the column definition');
console.log(args);
}
},
{
id: 'complete', name: '% Complete', field: 'percentComplete',
// 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,
editor: {
model: CustomInputEditor,
// 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: Event, args: OnEventArgs) => {
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,
editor: {
model: CustomInputEditor,
this.gridExtraService.highlightRow(args.row, 1500);
this.gridExtraService.setSelectedRow(args.row);
}
},
{
id: 'delete', field: 'id',
formatter: Formatters.deleteIcon,
minWidth: 30,
maxWidth: 30,
// use onCellClick OR grid.onClick.subscribe which you can see down below
onCellClick: (args: OnEventArgs) => {
console.log(args);
alert(`Deleting: ${args.dataContext.title}`);
}
},
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, editor: Editors.longText, minWidth: 100 },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, editor: Editors.text, minWidth: 100 },
{ id: 'complete', name: '% Complete', field: 'percentComplete', formatter: Formatters.percentCompleteBar, type: FieldType.number, editor: Editors.integer, minWidth: 100 },
{ id: 'start', name: 'Start', field: 'start', formatter: Formatters.dateIso, sortable: true, minWidth: 100, type: FieldType.date, editor: Editors.date },
{ id: 'finish', name: 'Finish', field: 'finish', formatter: Formatters.dateIso, sortable: true, minWidth: 100, type: FieldType.date, editor: Editors.date },
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', formatter: Formatters.checkmark, type: FieldType.number, editor: Editors.checkbox, minWidth: 100 }
];
this.gridOptions = {
asyncEditorLoading: false,
autoEdit: this.isAutoEdit,
autoResize: {
containerId: 'demo-container',
sidePadding: 15
},
editable: true,
enableCellNavigation: true
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);
}
},
{
id: 'complete', name: '% Complete', field: 'percentComplete',
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: {