Grid Form Control
👉 gridSettings takes entire IDBMasterConfig object for that grid and it's form.
👉 You can open N number of nested grid and forms.
Example
let dbMasterConfig: T.IDBMasterConfig = {
form: {
fields: [
[{
label: 'Remarks',
control: T.EDBMasterFormControl.grid,
path: 'remarks',
gridSettings: {
jsCode: [{
appendTo: T.EDBMasterConfigAppendTo.beforeSaveModalOpen,
code: `
console.log('hello from beforeSaveModalOpen');
formData.remarkDate = new Date();
`,
}],
operations: {
add: {
enable: true,
label: 'Add Remark',
},
hideAddConfirmation: true,
},
grid: {
operations: {
delete: {
enable: true,
cssClass: 'text-danger',
},
edit: {
enable: true,
cssClass: 'text-info',
},
hideDeleteConfirmation: true,
hideEditConfirmation: true,
gridOperationsOrder: [
T.EDBMasterGridOperationsOrder.edit,
T.EDBMasterGridOperationsOrder.delete,
],
// actionColumnWidth: '300px',
},
filter: {
// showGlobalSearch: true,
globalSearchFields: ['remarkStr'],
rowFilter: true,
},
pagination: {
showPagination: true,
rowsPerPage: 10,
},
sortMode: 'multiple',
fields: [{
header: 'Remark By',
path: 'apl_contact',
enableSorting: true,
dataSource: 'db_data',
dbData: {
// collection: 'apl_contacts',
pkField: '_id',
displayField: 'contact_email',
},
}, {
header: 'Date',
path: 'remarkDate',
enableSorting: true,
autoFormatDate: true,
dateTimeFormat: 'dd-MM-yyyy',
}, {
header: 'Remarks',
path: 'remarkStr',
enableSorting: true,
}]
},
form: {
fields: [
[{
label: 'Remakr by',
control: T.EDBMasterFormControl.dropdown,
path: 'apl_contact',
dropdownSettings: {
showClear: true,
dataSource: 'db_data',
dbData: {
// collection: 'apl_contacts',
select: 'contact_email, _id'
},
optionLabel: 'contact_email',
optionValue: '_id',
filter: true,
// filterBy: 'label,data',
filterBy: 'contact_email',
filterMatchMode: 'startsWith',
// virtualScroll: false,
alwaysGetLatestDataOnFormOpen: true,
},
validations: {
required: true,
}
}, {
label: 'Remark Str',
control: T.EDBMasterFormControl.input,
path: 'remarkStr',
validations: {
required: true,
}
}, {
label: 'Remark Date',
control: T.EDBMasterFormControl.date_picker,
path: 'remarkDate',
datePickerSettings: {
showTime: false,
showSeconds: false,
// dateTimeFormat: 'dd-MM-yyyy',
}
}]
]
}
}
}],
]
}
};