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',
                                }
                            }]

                        ]
                    }


                }
            }],
        ]
    }
};

Interface Documentation

export interface IDBMasterConfigFormField {
    /** It is used to find element. */
    hiddenId?: string;
    label?: string;

    /** This text will be displayed under control in small. HTML supported. */
    helpText?: string;

    path?: string;
    control: EDBMasterFormControl;

    /** if true, that control will take focus automatically. */
    autofocus?: boolean;

    /** if true, control will be disabled. If string provides, it will evaluate that string and enable/disable based on that. */
    disabled?: boolean | string;

    /** if true or undefined, control will be visible. If string provides, it will evaluate that string and make it visible/invisible based on that. */
    visible?: boolean | string;

    validations?: Pick<IPropertyValidation, 'required'>;
    validationErrors?: {
        required?: string;
    };

    gridSettings?: IDBMasterConfig;

}


export interface IPropertyValidation {
    required?: boolean; // Allowed Types : *
    min?: number; // Allowed Types : number | date
    max?: number; // Allowed Types : number | date
    minLength?: number; // Allowed Types : string
    maxLength?: number; // Allowed Types : string
    unique?: boolean;
    email?: boolean; // Allowed Types : string
    validatorFun?: Function;
}


export enum EDBMasterGridAppendTo {
    visible = 'visible',
    disabled = 'disabled',
}


export enum EDBMasterFormControl {
    input = 'input',
    inputNumber = 'inputNumber',
    inputMask = 'inputMask',
    inputOtp = 'inputOtp',
    password = 'password',
    date_picker = 'date_picker',
    textarea = 'textarea',
    checkbox = 'checkbox',
    radio = 'radio',
    color_picker = 'color_picker',
    dropdown = 'dropdown',
    file_upload = 'file_upload',
    grid = 'grid',
    divider = 'divider',

    // Field holder controls
    accordion = 'accordion',
    tab_view = 'tab_view',

    // utility controls
    button = 'button',
    image = 'image',
    customHTML = 'customHTML',
}