We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Custom Format Mask

Hello,

Inside my grid column I want to display a masked phone number (000)-000-0000 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




3 Replies 1 reply marked as answer

MS Monisha Saravanan Syncfusion Team October 12, 2022 09:13 AM

Hi Francisco,


Greetings from Syncfusion support.


Query: “Inside my grid column I want to display a masked phone number (000)-000-0000 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



FR Francisco October 12, 2022 10:39 AM

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





KG Keerthana Ganesan Syncfusion Team October 13, 2022 06:45 AM

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.


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon