Format Telephone Number in GridView

Question

I see another thread somewhat like my question at:

http://stackoverflow.com/questions/1180403/asp-net-gridview-column-formatting-telephone-number

but i do not know if it answers my question as he is using code-behind to make the colum. All I did was insert the GridView control in visual studio. BTW, the data is being populated in the Grid, I am just trying to get the formatting set now.

I am using Microsoft Visual Studio Professional 2010. (Also SQL Management Studio for my database but this information may not be needed, just trying to give enough to make sure what i am doing is understood)

I am making a website in ASP.NET with Visual Basic.net code behind.

The site is basically a contact list site.

3 Text Box Fields. First Name, Last Name, Main Phone #.

Add Record Button (Takes the information from the text boxes and inserts into a database)

GridView that shows the database that is being populated with the information

I have a "Main Phone Number" Column and this pulls a telephone number to show in GridView. The number is only 10 digits, no formatting...(i.e. 999-999-9999)

I am trying to make GridView take the 9999999999 and make it (999) 999-9999

If I look at the DataFormatString I have tried many combinations of "{0:(###) ###-####}" with and without the quotations and also with all zeroes instead of pound signs.

Through my research it seemed that if I want to use DataFormatString I need to make my phone number in my database an int. So I deleted my table and re-created it from a varchar to an int. I get to the DataFormatString by clicking on Gridview Tasks (arrow at top right of GridView)... then "Edit columns"... then under "Selected Fields" I click the name of the column... "Main Phone Number" then on the under "CommandField properties" I scroll down to "DataFormatString".

I hope I am not being too detailed. I have really appreciated all the help.

I found this:

http://www.tek-tips.com/viewthread.cfm?qid=328173

but i don't know how i would go about using it.. seeing as how because my code was done by Visual Studio... some of it looks like this

---

UPDATE: I posted the wrong code originally, either way, based off what I stated Kelsey was able to suggest an answer for me that worked.

Below is my new code WITH the corrections that Kelly gave.

    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="EmpId" DataSourceID="SqlDataSource1" 
            EmptyDataText="There are no data records to display." CellPadding="4" 
        ForeColor="#333333" GridLines="None" Height="136px" Width="299px" 
              AllowSorting="True">
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" />
                <asp:BoundField DataField="EmpId" HeaderText="EmpId" ReadOnly="True" 
                    SortExpression="EmpId" Visible="False" />
                <asp:BoundField DataField="FirstName" HeaderText="First Name" 
                    SortExpression="FirstName" />
                <asp:BoundField DataField="LastName" HeaderText="Last Name" 
                    SortExpression="LastName" />
<%--                <asp:BoundField DataField="MainPhoneNumber" HeaderText="Main Phone Number" 
                    SortExpression="MainPhoneNumber" />--%>
                    <asp:TemplateField HeaderText="Main Phone Number"> 
                <ItemTemplate> 
                 <asp:Literal ID="litPhone"  runat="server" Text='<%# string.Format("{0:(###) ###-####}", Int64.Parse(Eval("MainPhoneNumber").ToString())) %>' /> 
                </ItemTemplate> 
                </asp:TemplateField> 

            </Columns>
            <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
            <RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
            <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
            <SortedAscendingCellStyle BackColor="#FDF5AC" />
            <SortedAscendingHeaderStyle BackColor="#4D0000" />
            <SortedDescendingCellStyle BackColor="#FCF6C0" />
            <SortedDescendingHeaderStyle BackColor="#820000" />
        </asp:GridView>

Answer 1

Since you didn't post your GridView code I have to assume that your columns are using a BoundField like this or something similar:

<Columns>
    <asp:BoundField DataField="MainPhoneNumber" DataFormatString="{0:(###) ###-####}" />

Since it is a string, you can't use the DataFormatString property so you will need to change your BoundField to a TemplateField. Just replace your BoundField with the following TemplateField and it should work:

<asp:TemplateField>
    <ItemTemplate>
        <asp:Literal ID="litPhone" runat="server" Text='<%# string.Format("{0:(###) ###-####}", Int64.Parse(Eval("MainPhoneNumber").ToString())) %>' />
    </ItemTemplate>
</asp:TemplateField>

The key here is the code that evaluates the databound field and converts it to an Int64 so that the string formatter will work. Note that I am using an Int64 and not just an int which is 32 bit because a 10 digit number will not fit.

I have tested it and it works :)