Add a custom regular expression in a column (grid component)

[MS Dev]

This regEx is captured from another input entered by the user.

The user enters a regular expression, it is stored and it update the validation rule of the column.

Specific questions:

1. The specific question would be how to add a new custom validation rule associated with a regular expression defined by the user in another text input outside the grid.

2. How to integrate a mask based on that regular expression in a column, if required

Could you give me a simple application example or a reference link to guide a possible approach?. 

Thank you! Great job

[Rajapandiyan Settu]

Hi Dev, 

Greetings from syncfusion support. 

 

Query: This regEx is captured from another input entered by the user. 

The user enters a regular expression, it is stored and it update the validation rule of the column. 

We have validated your requirement at our end. You can achieve your requirement by using custom validation. Refer to the below documentation for more information. 

Custom-validation: https://ej2.syncfusion.com/vue/documentation/grid/edit/#custom-validation 

We have prepared a sample with this requirement. In that sample, we edit the POCMask column with the MaskedTextBox control using cellEditTemplate feature and added the custom validation to that column. 

cellEditTemplate: https://ej2.syncfusion.com/vue/documentation/grid/edit/#cell-edit-template  

MaskedTexBox: https://ej2.syncfusion.com/documentation/maskedtextbox/getting-started/  

 

<template> 

  <div id="app"> 

    <ejs-grid 

      :dataSource="data" 

      :editSettings="editSettings" 

      :toolbar="toolbar" 

      height="273px" 

    > 

       ----- 

        <e-column 

          field="POCMask" 

          :valueAccessor="valueAccess" 

          :validationRules="custom" 

          :edit="dpParams" 

          width="120" 

        ></e-column> 

      </e-columns> 

    </ejs-grid> 

  </div> 

</template> 

<script> 

----- 

let elem; 

let maskObj; 

export default { 

  data() { 

    return { 

      ------ 

      dpParams: { 

        create: function () { 

// create a input element 

          elem = document.createElement("input"); 

          return elem; 

        }, 

        read: () => { 

// renturn the value which will be bound to the Grid 

          return maskObj.value; 

        }, 

        destroy: () => { 

          maskObj.destroy(); 

        }, 

        write: (args) => { 

// render the maskedtexbox control 

          maskObj = new MaskedTextBox({ 

            mask: "0000-000-0000", 

            value: args.rowData[args.column.field], 

          }); 

          maskObj.appendTo(elem); 

        }, 

      },       

custom: { 

        required: true, 

        minLength: [this.customfn, "put valid value in customerid & pocmask"], 

      }, 

    }; 

  }, 

  ------- 

}; 

</script> 

In the custom validation function, we get the current edited data from the edit-form by using getCurrentEditedData method and checked the validation with two columns. 

customfn(args) { 

      var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

      // get the current edited rowData 

      var currentEditedRowData = grid.editModule.getCurrentEditedData(grid.editModule.formObj.element, {} ); 

      console.log(currentEditedRowData); 

// perform your validation as you want and return the Boolean value 

      if (args.value === "____-___-____" ||currentEditedRowData["CustomerID"].length < 6) { 

        return false; 

      } else { 

        return true; 

      } 

    }, 

Find the below sample for your reference. 

Sample: https://codesandbox.io/s/vue-template-forked-47b8c  

Please get back to us if you need further assistance with this. 

Regards, 

Rajapandiyan S