validation is not firing on ecolumn edittype as dropdown

[RakhiS]

Hi,

 I have applied validation in dropdown in the following way:

<e-column field='storeType' [validationRules]="requiredRules" headerText='Store Type'

                editType='dropdownedit'                [dataSource]='storeTypeData'                [edit]='storeTypeParams'

                width='150' textAlign='Left'></e-column>

But when I remove this [edit] parameter it will fire the validation and this parameter is binding my dropdown in the following way:

ngOnInit() {

 this.bindstoreTypesDropdown();

}

public begin(args) {

    if (args.requestType == "beginEdit") {

      this.storeTypeValue = args.rowData.companyLicenseId;

      this.bindstoreTypesDropdown();

    }

}

bindstoreTypesDropdown() {

    this.storeTypeParams = {

      create: () => {

        this.storeTypeElement = document.createElement('input');

        return this.storeTypeElement;

      },

      read: () => {

        return this.storeTypeObj.value;

      },

      destroy: () => {

        this.storeTypeObj.destroy();

      },

      write: () => {

        this.storeTypeObj = new DropDownList({

          dataSource: this.storeTypeData,

          fields: { value: 'Type', text: 'Type' },

          change: () => {

         

          },

          placeholder: 'Store Type',

          floatLabelType: 'Auto',

          value: +this.storeTypeValue,

        });

        this.storeTypeObj.appendTo(this.storeTypeElement);

      }

    };

  }

Can you please help e out with this?

[Sujith Kumar Rajkumar]

Hi Rakhi, 

 

Greetings from Syncfusion support. 

 

You can set the validation rules for edit controls rendered through column edit template the same way as setting for default columns as you have specified in the shared code snippet like below, 

 

<e-column field='ShipCountry' headerText='Ship Country' [edit]='countryParams' [validationRules]='shipCountryRules'></e-column> 

 

ngOnInit(): void { 

    this.shipCountryRules = { required: true }; 

} 

 

These validations rules will be set based on the column field name and is mapped with the edit control which has the same name as the column field. The default rendered edit control elements will have the column field as its name. Now since you have rendered a custom dropdown edit control you can achieve this requirement by setting the corresponding column field name as the edit control’s ‘name’ as demonstrated in the below code snippet, 

 

ngOnInit(): void { 

    this.countryParams = { 

        create: () => { 

            this.countryElem = document.createElement('input'); 

            // Column field name is set as the custom edit dropdown control name 

            this.countryElem.name = "ShipCountry"; 

            return this.countryElem; 

        }, 

               . 

               . 

    }; 

} 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://stackblitz.com/edit/angular-nj2hfx-5mza8c?file=app.component.ts  

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/edit/#column-validation  

 

Note: Since you are using custom edit dropdown control, you need not set the editType property as default ‘dropdownedit’. Also the columns dataSource property is used for setting foreign key data source and since we could not see any foreign key definitions in the share code snippet, we suspect you might be using it for specifying the edit dropdown datasource. If so you can remove it as the property is related to foreign key columns. More details on the foreign key column can be checked in the below documentation link, 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/#foreign-key-column  

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[RakhiS]

Thanks for your reply, I tried the same but it is not working.

[Thiyagu Subramani]

Hi RakhiS, 

Thanks for your update. 

Ok, But before proceeding this we need to know below details then only we provide the appropriate solution as soon as possible because reported issue doesn’t reproduced in our side. 

1.  If possible share issue reproducing sample or reproduce the issue above sample 

2.  Video demonstration of your issue. 

3.  Syncfusion package version 

4. Share complete Grid rendering code. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S 

[RakhiS]

Hi,

Thanks for your reply.

I have tried your solution but still my validation is not firing for the dropdown. pasting the screen shot below, for store type it is not firing the validation which is a dropdown

[Rajapandiyan Settu]

Hi RakhiS, 

 

We have validated the reported issue and tried to reproduce. But it was unsuccessful at our end. Please find the sample and screenshot for your reference. 

 

Sample : https://stackblitz.com/edit/angular-s7zx6i?file=app.component.ts 

 

The validation error message is automatically thrown when focused-out the edited cell. 

 

Still, if you have faced same issue could you please share the following detail 

1.  If possible share issue reproducing sample or reproduce the issue above sample  

2.  Video demonstration of your issue.  

3.  Syncfusion package version  

4. Share complete Grid rendering code.  

Please get back to us, if you need any further assistance. 

Regards, 

Rajapandiyan S