Angular Slickgrid - customValidator not working for SingleSelect editor

Question

Currently, I have angular-slickgrid with enabled Editors.singleSelect inline editor for a cell. I want to validate the selected dropdown value based on some condition. I referred this example for creating a custom validator but I'm not getting the alert message.

From this example, the below method is triggering for Editors.text but not for Editors.singleSelect type.

component.ts

        itemValidator: EditorValidator = (value: any, args: EditorArgs) => {
            // you can get the Editor Args which can be helpful, e.g. we can get the Translate Service from it
            const grid = args && args.grid;
            const gridOptions = (grid && grid.getOptions) ? grid.getOptions() : {};
            const translate = gridOptions.i18n;
        
            // to get the editor object, you'll need to use "internalColumnEditor"
            // don't use "editor" property since that one is what SlickGrid uses internally by it's editor factory
            const columnEditor = args && args.column && args.column.internalColumnEditor;
        
            // random condition check
            const items = ['item1', 'item2', 'item3'];
            if (items.includes(value)) {
                return { valid: false, msg: 'Invalid item' };
            }
            return { valid: true, msg: '' };
        };
    ......
    // ----------------Column definition----------------------------
    {
        id: 'item', name: 'Item', field: 'item',
        sortable: true,
        filterable: true,
        editor: {
            model: Editors.singleSelect,
            collection: [
                {value: 'item1', label: 'Item 1'},
                {value: 'item2', label: 'Item 2'},
                {value: 'item3', label: 'Item 3'},
                {value: 'item4', label: 'Item 4'},
                {value: 'item5', label: 'Item 5'},
                {value: 'item6', label: 'Item 6'},
                {value: 'item7', label: 'Item 7'},
            ],
            validator: this.itemValidator
        }
    }
    ........

    // ----------------Prompting alert if any error----------------------------
        onValidationError(e, args) {
            alert(args.validationResults.msg);
        }

component.html

    <angular-slickgrid gridId="dataGrid" (onAngularGridCreated)="angularGridReady($event)"
        (sgOnBeforeEditCell)="onCellBeforeEditCell($event.detail.eventData, $event.detail.args)"
        (sgOnBeforeCellEditorDestroy)="onAfterEditCell($event.detail.eventData, $event.detail.args)"
        (sgOnValidationError)="onValidationError($event.detail.eventData, $event.detail.args)"
        [columnDefinitions]="colDefn" [gridOptions]="gridOptions"
        [dataset]="dataset" [gridHeight]="gridHeight" >
    </angular-slickgrid>

If I changed the editor type from Editors.singleSelect to Editors.text its validating as expected.

you need to use the `onBeforeEditCell` event (that is `(sgOnBeforeEditCell)` for Angular-Slickgrid) if you wish to add custom validation and you're not showing that in your question. — ghiscoding, Sep 03 '20 at 15:18
`onBeforeEditCell` event is not used [here](https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-editor.component.ts) for the `myCustomTitleValidator` for `Editors.text`. Is that specifically required for `singleSelect` custom validator ? — Ranjith, Sep 03 '20 at 15:30
sorry I mean use the `validator` to pass a custom validator in your Editor, each Editor has a `validator` to pass custom validator... while the `onBeforeEditCell` is to block an Editor before it even gets open. — ghiscoding, Sep 03 '20 at 18:14
Yes. I'm defining a `editor.validator` to validate the column value and its validating too.. but the problem is not firing the function of `onValidationError(e, args)` after changing the dropdown value(not getting the alert message after `afterCellEdit`) — Ranjith, Sep 04 '20 at 11:21
ok I tried some code and found that as being a bug, please open an issue in the lib and I'll work on it next week. — ghiscoding, Sep 04 '20 at 14:55

ghiscoding · Accepted Answer · 2020-09-10T12:04:58.867

Note that I'm the author of Angular-Slickgrid and that was a bug which is now fixed under the new version 2.21.3

The following code now works

prepareGrid() {
  this.columnDefinitions = [
    {
        id: 'complete',
        name: '% Complete',
        field: 'percentComplete',
        type: FieldType.number,
        editor: {
          model: Editors.singleSelect,
          validator: (value, args) => {
            if (value < 50) {
              return { valid: false, msg: 'Please use at least 50%' };
            }
            return { valid: true, msg: '' };
          }
        }
    }
  ];
}

onValidationError(e, args) {
    if (args.validationResults) {
      alert(args.validationResults.msg);
    }
}

Will show this alert when the value I chose is below 50%.

Thanks for the quick update.. Its working perfectly now :) – Ranjith Sep 09 '20 at 06:59 — Ranjith, Sep 09 '20 at 06:59

Angular Slickgrid - customValidator not working for SingleSelect editor

1 Answers1