Validation in dialog template

[Marko Tomljanovic]

Hello,

could you please provide assistance regarding the grid edit using the dialog template.

Problem is related to the validation. It can be reproduced in the attached example:

- select table row

- click edit

- change result type to number

- click save

- select table row

- click edit

- change result type to free entry

- click save

Why is validation triggered and how to disable it completely?

Following error appeares in console

Uncaught TypeError: this.inputElement is null

    getErrorElement form-validator.js:736

    validateRules form-validator.js:565

    validate form-validator.js:200

    editFormValidate edit.js:331

    editFormValidate normal-edit.js:259

    endEdit normal-edit.js:269

    endEdit dialog-edit.js:41

    endEditing edit.js:362

    endEdit edit.js:276

    endEdit grid.js:4257

    btnClick dialog-edit-renderer.js:136

    add event-handler.js:68

    setButton dialog.js:713

    initRender dialog.js:471

    render dialog.js:136

    appendTo component.js:257

    createDialog dialog-edit-renderer.js:107

    update dialog-edit-renderer.js:38

    update edit-renderer.js:39

    inlineEditHandler normal-edit.js:212

    startEdit normal-edit.js:130

    notify observer.js:105

    trigger base.js:186

    trigger grid.component.js:141

    startEdit normal-edit.js:128

    notify observer.js:105

    trigger base.js:186

    trigger grid.component.js:141

    startEdit normal-edit.js:126

    startEdit dialog-edit.js:51

    startEdit edit.js:150

    startEdit grid.js:4247

    toolbarClickHandler toolbar.js:477

    notify observer.js:105

    trigger base.js:186

    trigger grid.component.js:141

    toolbarClickHandler toolbar.js:469

    notify observer.js:102

    trigger base.js:186

    clickHandler toolbar.js:651

    add event-handler.js:68

    wireEvents toolbar.js:248

    render toolbar.js:699

    appendTo component.js:257

    createToolbar toolbar.js:246

    render toolbar.js:91

    notify observer.js:102

    notify component.js:338

    render grid.js:1062

    appendTo component.js:257

    mounted component-base.js:107

    createHook runtime-core.esm-bundler.js:2815

    callWithErrorHandling runtime-core.esm-bundler.js:199

    callWithAsyncErrorHandling runtime-core.esm-bundler.js:206

    __weh runtime-core.esm-bundler.js:2795

    flushPostFlushCbs runtime-core.esm-bundler.js:385

    render2 runtime-core.esm-bundler.js:5993

    mount runtime-core.esm-bundler.js:3941

    mount runtime-dom.esm-bundler.js:1767

    <anonymous> main.ts:23

form-validator.js:736:77

Attachment: demo_36698b0f.zip

[Kishore Muthukrishnan]

Hi Marko,

Greetings from Syncfusion support,

We understand that you are experiencing validation issue when saving in dialog template. The issue arises due to the validation rules are not being correctly removed when switching between FORMATED_NUMBER and FREE_ENTRY. As a result, when switching back, the grid triggers validation on fields that are no longer visible or relevant. To resolve this, you can dynamically apply or remove validation based on the resultType value. Please refer the below code snippet and attached sample for more information.

const actionComplete = (args: any) => {

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

    // Access the dialog form

    const form = args.form;

    const gridInstance = form.ej2_instances[0];

 

    // Update validation when dropdown value changes

    const dropdown = form.querySelector("#resultType").ej2_instances[0];

    dropdown.change = (e: any) => {

      currentlyEditedItem.value.resultType = e.value;

 

      // Remove all validation rules first

      gridInstance.removeRules("decimalPlaces");

 

      // Reapply validation based on the new type

      if (e.value === "FORMATED_NUMBER") {

        gridInstance.addRules("decimalPlaces", { required: true });

      }

    };

  }

};

If you need further assistance, feel free to let us know!

Regards,

Kishore Muthukrishnan

Attachment: Validation_a0e8ec98.zip

[Marko Tomljanovic]

Thank you.

Is there a way to disable numeric field validation any other way i.e. using a property and not through a removeRules method?

[Santhosh Iruthayaraj]

Hi Marko Tomljanovic,

The addRules and removeRules methods are the only ways to add and remove validation for custom editors rendered within the edit template. However, if your requirement is to prevent the validation issue you are encountering without using the addRules and removeRules methods inside the actionComplete event, we recommend using the “v-show” directive instead of the “v-if” directive. This approach allows you to dynamically show and hide the NumericTextBox component without removing and rerendering it. Below is the modified code snippet for your reference:

[App.vue]

 

      <template #dialogTemplate>

        <div id="grupa" formGroup="measureForm" class="grid grid-cols-2">

          .  .  .  .  .

          <div

            class="col-span-1"

            v-show="currentlyEditedItem.resultType === 'FORMATED_NUMBER'"

          >

            <label for="decimalPlaces">Num of decimals</label>

            <ejs-numerictextbox

              id="decimalPlaces"

              name="decimalPlaces"

              v-model="currentlyEditedItem.decimalPlaces"

              :decimals="0"

              format="#"

              :showSpinButton="false"

              floatLabelType="Never"

            ></ejs-numerictextbox>

          </div>

        </div>

      </template>

 

Sample: https://stackblitz.com/edit/vite-jrxe8d2q

Regards,

Santhosh I

[Marko]

Thank you

[Santhosh Iruthayaraj]

Hi Marko Tomljanovic,

You are welcome. If you need any further assistance or have additional queries, please feel free to reach out.

Regards,

Santhosh I