Validation Error message does not disappear after a successful dropdownlist item selection (grid edit dialog)

[Laurin S]

Hi,

unfortunately, the validation error message of an empty dropdownlist (when adding a new item to the grid) does not automatically (immediately) disappear, once the user selects a valid item of the list in the grid edit dialog. The message disappears only, once the user clicks in another form field, but this is not a good UX. The error message should immediately disappear, once a correct items gets selected (like in a textbox for example).

Example: Item "Argentinia" is selected, which is a valid selection, but still the error message gets displayed.

I've attached a demo code example. Just add a new item and select a country in the first dropdownlist. 

Thanks.

Attachment: index_b9d43a05.zip

[Ajith Govarthan]

Hi Laurin, 

Thanks for contacting Syncfusion support. 

Query: The message disappears only, once the user clicks in another form field, but this is not a good UX. The error message should immediately disappear, once a correct items gets selected (like in a textbox for example). 

 

Based on your query you want to remove the validation message once you select any values in the dropdown component. So, we have prepared sample and in that sample we have used the change event of the dropdown component with edit params and using the change event we have called the editFormValidate method to perform the validation for respective columns. 

The editFormValidate method will check the validation for columns and removes the validation messages in the respective columns based on the validation rules. For your convenience we have attached the sample please refer them for your reference. 

Code Example: 

Index.js 

export class DialogEdit extends SampleBase { 

  constructor() { 

    super(...arguments); 

    this.toolbarOptions = ["Add", "Edit", "Delete"]; 

    this.editSettings = { 

      allowEditing: true, 

      allowAdding: true, 

      allowDeleting: true, 

      mode: "Dialog" 

    }; 

    this.editparams = { 

      params: { popupHeight: "300px", change: this.onChnage.bind(this) } 

    }; 

    this.validationRules = { required: true }; 

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

    this.pageSettings = { pageCount: 5 }; 

  } 

  onChnage(args) { 

    this.gridInstance.editModule.editFormValidate();  // call the function to initiate the validation 

  } 

  render() { 

    return ( 

      <div className="control-pane"> 

        <div className="control-section"> 

          <GridComponent 

            dataSource={data} 

            toolbar={this.toolbarOptions} 

            ref={grid => (this.gridInstance = grid)} 

            allowPaging={true} 

            editSettings={this.editSettings} 

            pageSettings={this.pageSettings} 

          > 

            <ColumnsDirective> 

              <ColumnDirective 

                field="OrderID" 

                headerText="Order ID" 

                width="120" 

                textAlign="Right" 

                validationRules={this.orderidRules} 

                isPrimaryKey={true} 

              /> 

              <ColumnDirective 

                field="CustomerName" 

                headerText="Customer Name" 

                width="150" 

              /> 

              <ColumnDirective 

                field="Freight" 

                headerText="Freight" 

                width="120" 

                format="C2" 

                textAlign="Right" 

                editType="numericedit" 

              /> 

              <ColumnDirective 

                field="OrderDate" 

                headerText="Order Date" 

                editType="datepickeredit" 

                format="yMd" 

                width="170" 

              /> 

              <ColumnDirective 

                field="ShipCountry" 

                validationRules={this.validationRules} 

                headerText="Ship Country" 

                width="150" 

                editType="dropdownedit" 

                edit={this.editparams} 

              /> 

            </ColumnsDirective> 

            <Inject services={[Page, Toolbar, Edit]} /> 

          </GridComponent> 

        </div> 

      </div> 

    ); 

  } 

} 

render(<DialogEdit />, document.getElementById("sample")); 

Sample Link: https://stackblitz.com/edit/react-ytrhei-qhxa3a?file=index.js 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.