Ejs-grid validationrules doesnt trigger after (toolbarclick) event

[Unknown]

Hi Team,

Could you please help me why validationrules for columns doesnt seems work after (toolbarclick) in which Im basically trying to duplicate the checked rows

I want validations to trigger after duplicate.

<ejs-grid #subjectPersonalNameGrid id="subjectPersonalNameGrid" gridLines="Both" width="100%"  [rowHeight]='70'

  [dataSource]="catalogingTitle.nameSubjectHeadings" [editSettings]='editSettings' [toolbar]='toolbar'

  [allowPaging]="false" allowTextWrap='true' [allowSorting]="true" [textWrapSettings]='wrapSettings' 

  (actionComplete)='actionComplete($event)' (actionBegin)='actionBegin($event)' (rowDataBound)='rowDataBound($event)'

  (toolbarClick)='duplicateClickHandler($event)' (queryCellInfo)='customiseCell($event)'

  [selectionSettings]="selectOptions" (dataBound)='dataBound()' (load)='load($event)'>

  <e-columns>

    <e-column field='rowNo' headerText='rowNo' width=100 [visible]="false" [isPrimaryKey]='true'></e-column>

    <e-column type='checkbox' width='20'></e-column>

    <e-column field='isDuplicate' headerText='rowNo' width=100 [visible]="false"></e-column>

    <e-column headerText="Type of Personal Name" width="200" textAlign="Center" field="personalID_fk"

      editType='dropdownedit' [edit]='personalnamesParams' class="boxed-dropdown"

      [validationRules]='personalNameTypesRule'>

      <ng-template #template let-subjectpersonalnamedata>

        <ejs-dropdownlist #typesofPersonalNameData [dataSource]='personalNames' class="boxed-dropdown"

          [fields]='personalFields' [placeholder]='selectPersonal' [allowFiltering]='true'

          [(ngModel)]='subjectpersonalnamedata.personalID_fk' field="subjectpersonalnamedata.personalID_fk"

          [readonly]='true'>

        </ejs-dropdownlist>

      </ng-template>

    </e-column>

</e-columns>

and validations rules is been set in oninit of parent component 

this.personalNameTypesRule = { combinationRule: [this.subjectPersonalNameCombinationCheckFn, 'Combination already available'], required: [true, 'Personal Name Type is required'] };

  

and duplicate handler in child component(grid component) looks like this

duplicateClickHandler(e: any) {

    if (e.item.id === 'duplicaterows') {

      let records = [...this.catalogingTitle.nameSubjectHeadings];

      this.grid.getSelectedRowIndexes().forEach(index => {

        let element = records[index];

        this.rowNo = index + this.getGreatestRowNo(this.catalogingTitle.nameSubjectHeadings, 0) + element.rowNo;

        var newelement: CatalogingDetailNameSubjectHeadings = new CatalogingDetailNameSubjectHeadings();

        newelement.isbn = element.isbn;

        newelement.dateAssociated = element.dateAssociated;

        newelement.rowNo = this.rowNo;

        newelement.personalID_fk = element.personalID_fk;

        newelement.isDuplicate = true;

        this.grid.addRecord(newelement);

      });

      localStorage.setItem('catalogingTitle', JSON.stringify(this.catalogingTitle));

    }

  }

this is how grid looks after duplicate click

[Manivel Sellamuthu]

Hi Leela, 

Greetings from Syncfusion support. 

By default addRecord method does not accept html elements. This method adds empty row with editable fields or adds the new grid row if invoked with data object. 

API: https://ej2.syncfusion.com/documentation/api/grid/#addrecord 

So before proceeding your query, could you please share the below details, which will be helpful for us to validate further about your requirement. 

1. Please explain more about your requirement
2. Please explain the operation performed in the below line and value of newelement variable

  var newelement: CatalogingDetailNameSubjectHeadings = new CatalogingDetailNameSubjectHeadings(); 

 

Regards, 

Manivel