Need remove required tooltip and dropdown highlight after selecting some values in dropdown

[Deepika]

Hi Team,

I'm having a dynamically binding grid and can add a row to the grid by selecting values from dropdown in each column.

Im highlighting the dropdown and showing "Required" tooltip if the value is not selected in dropdown. below is my code.

<ejs-grid #gridTargetDefinition id="gridTargetDefinition" [textWrapSettings]='wrapSettings'

  [searchSettings]='searchOptions' [dataSource]="gridData" [columns]="columns" [editSettings]="editSettings"

  [toolbar]="toolbarItems" (actionBegin)="actionBegin($event)" (toolbarClick)='toolbarClick($event)'

  [height]="windowHeight" [allowSelection]="true" allowTextWrap='true' [selectionSettings]="selectOptions"

  [allowSorting]="true" [sortSettings]="sortOptions" (actionComplete)='actionComplete($event)' (load)='load($event)'>

</ejs-grid>

//Required tooltip for dropdown

  actionComplete(e): void {

    if (e.requestType === 'beginEdit' || e.requestType === 'add') {

      this.gridTargetDefinition.columns.forEach((col, i) => {

        if (i !== this.renderedColumns.length)

          e.form.ej2_instances[0].addRules(col.field, { required: [true, 'Required'] });

      })

    }

  }

  //Red highlight on error to dropdown

  load(e) {

    document.addEventListener('click', function (e) {

      if (!e.srcElement.id) {

        setTimeout(function () {

          if (this.gridTargetDefinition.editModule && this.gridTargetDefinition.editModule.formObj) {

            let errorEle = this.gridTargetDefinition.editModule.formObj.element.querySelectorAll('.e-error');

            if (errorEle.length) {

              for (let i = 0; i < errorEle.length; i++) {

                let errorInputEle = errorEle[i].classList.contains('e-ddl-hidden') ? errorEle[i]

                  : this.gridTargetDefinition.editModule.formObj.element.querySelectorAll('input.e-error')[i]

                if (errorInputEle) {

                  if (errorInputEle.classList[0].indexOf('hidden') != -1) {

                    errorInputEle.parentElement.classList.add('input-validation-error')

                  }

                  else {

                    errorInputEle.parentElement.classList.add('input-validation-error')

                  }

                }

              }

            }

          }

        }.bind(this), 100)

      }

    }.bind(this))

  }

but its not consistent, if i get inpt-validation-error (highlight dropdown and required tooltip) and then i add the values to grid, the highlight dropdown is not getting removed for all dropdown and some times Required tooltip is also not getting removed for some or all the dropdown.

 how can i achieve this with my code.

[Manivel Sellamuthu]

Hi Deepika, 

Greetings from Syncfusion support. 

While using dropDown edit the validation occurs only after the onBlur. We can remove the tooltip by invoking the form validation in the change event of the dropdown. Please find the below code example for more information. 

[App.component.html] 

<div class="control-section"> 

    <ejs-grid [dataSource]='data' #grid allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'> 

        <e-columns> 

            <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true' [validationRules]='orderidrules'></e-column> 

             <e-column field='Customer' width='150' editType='dropdownedit' [validationRules]='Customerrules' [edit]='editparams'></e-column> 

            <e-column field='EmployeeID' headerText='Employee ID' width='120' [validationRules]='idrules'></e-column> 

        </e-columns> 

    </ejs-grid> 

</div> 

 

[App.component.ts] 

@Component({ 

    selector: 'app-root', 

    templateUrl: 'app.component.html', 

    providers: [ToolbarService, EditService, PageService] 

}) 

export class AppComponent { 

    @ViewChild('grid', {static: true}) 

    public grid: GridComponent; 

 

    public ngOnInit(): void { 

    this.data = [ 

    { 

        OrderID: 10248, EmployeeID: 5, Customer: 'TOM' 

    }, 

    { 

        OrderID: 10249, EmployeeID: 6, Customer: 'VINET' 

    }, 

    { 

        OrderID: 10250,EmployeeID: 2, Customer: 'TOMSP' 

    }]; 

        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true }; 

        this.toolbar = ['Add', 'Edit', 'Delete','Update']; 

        this.orderidrules = { required: true, number: true }; 

        this.idrules = { required: false,custom:[this.validateID, 'Enter a value more than 0'] }; 

        this.Customerrules = { required: false,custom:[this.validateCustomer, 'Enter a value with 4 or more characters']}; 

        this.editparams = { params: { change: this.dropDownChange.bind(this), popupHeight: '300px' }}; 

    } 

    validateID (e) { 

       return parseInt(e.value) > 0; 

    } 

    validateCustomer (e) { 

   return e.value.length > 4; 

    } 

    dropDownChange (e) { 

// here we invoking the form validation on value change 

      this.grid.editModule.formObj.validate(); 

    } 

} 

 

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

 

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

Regards, 

Manivel