Custom Format Mask

[Francisco]

Hello,

Inside my grid column I want to display a masked phone number [phone] and Zip code 00000-0000 without affecting the original data, how can I use a custom format property in this field?

Ps.: I tried the Format option of the grid columns which didn't work and adding the masked control inside a template but it does not look good due to the textbox. I want it masked but looking like the column Phone 2.

Than

[Monisha Saravanan]

Hi Francisco,

Greetings from Syncfusion support.

Query: “Inside my grid column I want to display a masked phone number [phone] and Zip code 00000-0000 without affecting the original data, how can I use a custom format property in this field?”

We have checked your query and we suspect that you are trying to apply format for phone number. If so we suggest you to achieve your requirement by using the below way. Kindly check the attached sample and code snippet for your reference.

<GridColumns>

        <GridColumn Field=@nameof(Order.PhoneNumber) HeaderText="Phone Number" Format="(###)-###-####"  Width="120"></GridColumn>

        </GridColumns>

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1887062643.zip

Please let us know if you have any concerns.

Regards,

Monisha

[Francisco]

Hi Monisha,

Thanks for the help again, this works perfectly for Integers and long data types, the problem is that the phone number is not a long, it's a string, when we change the type on your sample to (public string PhoneNumber {get;set;}) the format on the column stops working. How can we apply the format for string types?

Phone number as String

[Keerthana Ganesan]

Hi Francisco,

Welcome from Syncfusion support.

Query: How we can apply the format for string types?

We have analyzed your query and we suggest you use a column template to convert the string to the required format. Hereby using a column template, the string is changed to number format. Kindly refer to the attached code snippet for your reference.

<GridColumn Field=@nameof(Order.PhoneNumber) HeaderText="Phone Number" Format="(###)-###-####"  Width="120">

            <Template>

                @{

                    var Num = (context as Order).PhoneNumber;

                    var t = @Num.Insert(3, "-");

                    var t1 =t.Insert(7, "-");

                    <div>@t1</div>

                  }

                    </Template>

        </GridColumn>

Kindly get back to us if you have any further queries.

Regards,

Keerthana.