Ejs Grid with telephone mask

[Javier A Aguilera]

Good afternoon,

I'm trying to have a ejs grid with a mask for telephone numbers in a column like this "[phone]"

Can you help me please with this task?

[Praveenkumar Gajendiran]

Hi Javier, 

 

Greetings from Syncfusion support. 

 

We checked your query. Based on that we suspect you want to mask/customise the Grid column content. For this we suggest you to use column.valueAccessor property which helps to achieve the custom value formatting in the Grid column content as demonstrated in the below code example. 

@{ 

    var valueAccessor = "valueAccessorFn"; 

} 

<ejs-grid id="Grid" dataSource="@ViewBag.datasource" height="500"> 

    <e-grid-columns> 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120"></e-grid-column> 

        <e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column> 

        <e-grid-column field="Freight" headerText="Freight" format="C2" width="140"></e-grid-column> 

        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column> 

        <e-grid-column field="Phonenumber" headerText="Phone Number" valueAccessor="valueAccessor" width="150"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

 

 

<script> 

    function valueAccessorFn(field, data1, column) { 

        if (data1[field]) { 

            return data1[field].replace(/^(\d{3})(\d{3})(\d{4}).*/, "($1) $2 $3"); 

        } 

    } 

</script> 

 

Screenshot: 

 

We have prepared a sample based on this for your reference, 

Sample: https://www.syncfusion.com/downloads/support/forum/163796/ze/valueaccessor_core-1968554636.zip 

For your reference, we have shared the column.valueAccessor documentation and we can access the field name, data of current row and current column details in this function. 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/#valueaccessor 

API Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/valueAccessor/ 

Note: While using valueAccessor in Grid’s column then the value is used for display purpose only which is default behavior of an EJ2 Grid. Customized column(using valueAccessor) value is not reflected in DB it update the HTML content alone. 

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

Regards, 

Praveenkumar G 

[Javier A Aguilera]

Thats exactly what I was looking for!! thanks guys!!

[Praveenkumar Gajendiran]

Hi Javier, 

You are welcome. We glad that the provided solution resolved your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Praveenkumar G 

[David Heidlebaugh]

This has provide a solution to me too but when I edit the grid it puts the mask in.  I want it to have only what the table has in it

[Joseph Christ Nithin Issack]

Hi David,

  Thanks for your update.

  Based on your query, you want to hide the masking when you edit the row. You requirement can be achieved by using the `actionComplete` event  of the EJ2 Grid. Where you can set the value from the datasource using the `args.rowData` property to the input element in the edit form .

Please refer the below code example.

 

function actionComplete(args) {

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

            args.form.querySelector('#GridPhonenumber').ej2_instances[0].value = args.rowData['Phonenumber'];

         }

    }

 

Please get back to us for further details.

Regards,

Joseph I.