1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Applying input mask validation within add/edit dialog box

Applying input mask validation within add/edit dialog box

Hello, I am trying to apply an input mask to several fields of a data grid. I want to make an IP address field that is masked and verified client side in the add and edit dialog, along with making the password field display only asterisks upon editing the data entry. How would I be able to do this?

3 Replies 1 reply marked as answer
TS Thiyagu Subramani Syncfusion Team August 18, 2020 11:08 AM UTC

Hi Justin, 

Thanks for contacting Syncfusion forum. 

Query – 1:  want to make an IP address field that is masked and verified client side in the add and edit dialog. 
 
Based on your requirement you need to place an input mask for the several fields of a data grid. To achieve your requirement we suggest to use the cellEditTemplate feature of an EJ2 Grid. 

The cellEditTemplate feature is used to add the custom component for the particular column. Using cellEditTemplate feature we need to render the EJ2 masked Textbox for the required IP field. In this you also mentioned that you need to apply validation for the IP field. 

To apply validation we suggest you to use custom validation support of EJ2 Grid. In custom validation we have returned always false but you can change validation conditions as per your requirement.  

Please refer to the below code. 
 
<ejs-grid id="Grid" allowPaging="true" actionBegin="actionBegin" actionComplete="actionComplete" dataSource="@ViewBag.DataSource" load="onLoad" toolbar="@(new List<string>() {"Add", "Edit","Cancel", "Update", "Delete" })"> 
    
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" ></e-grid-editSettings> 
     
    <e-grid-columns> 
        . . . . .  
        <e-grid-column field="IP" headerText="IP Address" edit="@(new {create = "create", read = "read", destroy = "destroy", write = "write"})" width="150"></e-grid-column> 
        . . . . . . . . . .  . 
    </e-grid-columns> 
</ejs-grid> 
<script> 
    function onLoad() { 
      // Applied validation rules for specific IP column 
      this.columns[3].validationRules = { required: true, minLength: [customFn, 'custom message'] }; 
    } 
 
    function actionBegin(args) {   
        if (args.requestType === 'save') { 
            args.data.IP = args.form.elements[4].value; 
        } 
    } 
 
    function customFn(args) { 
        // Add your customized validation condition codes. 
        return true; 
    }; 
 
     var elem; 
    var dObj; 
 
    function create(args) { 
        elem = document.createElement('input'); 
        return elem; 
    } 
 
    function write(args) { 
        dObj = new ej.inputs.MaskedTextBox({ 
            value: args.rowData[args.column.field], 
            mask: '[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9]',   // Mask type for required IP value 
        }); 
        dObj.appendTo(elem); 
    } 
    function destroy() { 
        dObj.destroy(); 
    } 
 
    function read(args) { 
        return dObj.value; 
    } 
 
 

                                    : https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-template 
                                   : https://ej2.syncfusion.com/aspnetcore/documentation/maskedtextbox/getting-started/ 
 
Query -2 : Password field display only asterisks upon editing the data entry. 
 
We can achieve this requirement by changing required input type as password instead of text. To achieved this we have used actionComplete event of EJ2 Grid. In actionComplete event we have changed the type as password for both requestType add and beginEdit.  

Please refer to the below code. 

<ejs-grid id="Grid" allowPaging="true" actionBegin="actionBegin" actionComplete="actionComplete" dataSource="@ViewBag.DataSource" load="onLoad" toolbar="@(new List<string>() {"Add", "Edit","Cancel", "Update", "Delete" })"> 
    
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" ></e-grid-editSettings> 
     
    <e-grid-columns> 
. . . . . . . 
        <e-grid-column field="Password" headerText="Password" edit="@(new {create = "create1", read = "read1", destroy = "destroy1", write = "write1"})" width="150"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
<script> 
     
    function actionComplete(args) { 
        if (args.requestType === 'add' || args.requestType === 'beginEdit') { 
            args.form.elements[5].type = "password"; 
        } 
      
    } 
 
. . . . . . . 
     var elem1; 
    var dObj1; 
 
    function create1(args) { 
        elem1 = document.createElement('input'); 
        return elem1; 
    } 
 
    function write1(args) { 
        dObj1 = new ej.inputs.MaskedTextBox({ 
            value: args.rowData[args.column.field], 
        }); 
        dObj1.appendTo(elem1); 
    } 
    function destroy1() { 
        dObj1.destroy(); 
    } 
 
    function read1(args) { 
        return dObj1.value; 
    } 


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

Regards, 
Thiyagu S 


JG Justin Gonzalez August 21, 2020 04:46 PM UTC

I was able to get the provided code to work on a grid with no custom dialog template, however once I tried to apply the cell edit template code to my grid with a custom dialog template validation no longer worked and I was unable to create a new entry or save changes, nor did the input mask for the IP Address show on my customized edit dialog. How would I go about applying this to a grid with <e-grid-editsettings ... template='#dialogtemplate'>?

TS Thiyagu Subramani Syncfusion Team August 25, 2020 02:53 PM UTC

Hi Justin, 

Thanks for your update. 

Based on your reported information we have created a sample using  dialogTemplate with custom validation message for IP filed and asterisks for Password field. We have rendered masked textbox controls using actionComplete events when requestType as add and beginEdit and achieved validation using masked textbox blur event and custom validation function.  

Please refer to the below code and modified sample. 

<ejs-grid id="Grid" allowPaging="true" actionBegin="actionBegin" actionComplete="actionComplete" dataSource="@ViewBag.DataSource" load="onLoad" toolbar="@(new List<string>() {"Add", "Edit","Cancel", "Update", "Delete" })"> 
 
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template='#dialogtemplate'></e-grid-editSettings> 
 
    <e-grid-columns> 
        <e-grid-column field="OrderID" headerText="Order ID" defaultValue="1" isIdentity="true" isPrimaryKey="true"  width="120"></e-grid-column> 
        <e-grid-column field="IP" headerText="IP Address" width="150"></e-grid-column> 
        <e-grid-column field="Password" headerText="Password" defaultValue="123" width="150"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 
 
<script id='dialogtemplate' type="text/x-template"> 
    <div> 
        <div class="form-row"> 
            <div class="e-float-input e-control-wrapper"> 
                <input id="OrderID" name="OrderID" type="text" value="${OrderID}" ${if(isAdd)} ${else} disabled ${/if} /> 
                <span class="e-float-line"></span> 
                <label class="e-float-text e-label-top" for="OrderID">Order ID</label> 
            </div> 
        </div> 
        <div class="form-row"> 
            <input name="IP" id="IP" value="${IP}" /> 
        </div> 
        <div class="form-row"> 
            <input name="Password" type="password" id="Password" value="${Password}" /> 
        </div> 
    </div> 
</script> 
 
<script> 
    function onLoad() { 
        this.columns[1].validationRules = { required: true, minLength: [customFn, 'custom message'] }; 
    } 
 
    function actionBegin(args) { 
        debugger; 
        if (args.requestType === 'save') { 
           args.data.IP = args.form.elements[1].value; 
        } 
         
    } 
 
    function actionComplete(args) { 
        if (args.requestType === 'add' || args.requestType === 'beginEdit') { 
            new ejs.inputs.MaskedTextBox({ 
                value: args.rowData.IP, 
                mask: '[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9]', 
                blur: function (e) { args.form.ej2_instances[0].validate('IP');} 
            }, args.form.elements.namedItem('IP')); 
 
            new ejs.inputs.MaskedTextBox({ 
                value: args.rowData.Password 
            }, args.form.elements.namedItem('Password')); 
        } 
 
    } 
 
    function customFn(args) { 
        if (args.value.includes('_')) { 
            return false 
        } 
        return true; 
    }; 
</script> 


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

Regards, 
Thiyagu S 


Marked as answer
Loader.
Up arrow icon