GridMaskedColumn DataBind Not Applying Mask

[Coty]

Hello there,  I have a RadGrid with a GridMaskedColumn that holds a phone number:

<telerik:GridMaskedColumn UniqueName="Number" DataField="Number" HeaderText="Number"
                                            Mask="(###) ###-####">

When I apply my datasource which is a datatable with a number column.  This column holds just digits for each number.  For example: 5553338888 could be one of the numbers.  When the binding is done, the masked column (in non-editing mode) does not initially apply the mask to the number, it appears like 5553338888 when I want [phone].
 
However, when I click "Edit" and the masked textbox appears, I can click Update, and the mask is applied correctly to the number in non-edit mode.  Is there a setting to apply the mask on initial binding or a workaround?

Thanks,

Coty

[Veli]

Hi Coty,

Referring to the corresponding online documentation article on GridMaskedColumn, GridMaskedColumn displays exactly like an ordinary GridBoundColumn in regular mode. Therefore, you do not get your values masked on initial load, neither on any rebind. What happens when you update a row, is that GridMaskedColumn's editor provides the unmodified text value entered during edit. This value contains also the mask literals and thus, the data field is updated with the proper formatting and shown as expected.

Kind regards,
Veli
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Matthew]

I am replying to this old thread rather than creating a new one.

I understand that the intended behavior is to display the data in numerical form, then display the masked data in the edit form.

Is there a recommended method for displaying the masked data in regular mode?

I am considering an approach of two columns in the radgrid:
one will be the raw numeric data for the masked column which will be display = false, readonly = false
the other will be a formatted string of the numeric data with display = true, readonly = true


so that the formatted data will display but the numeric data will go to the edit form. 
Do you recommend an alternative way?

Thanks

[Veli]

Hello Matthew,

Even though the GridMaskedColumn does not currently support masking values in view mode, there are plenty of approaches to formatting your data values before they are displayed in grid cells. Here are 2:

1. Use RadGrid's ItemDataBound event to format the cell text in the respective grid column:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem dataItem = (GridDataItem)e.Item;
        string originalText = dataItem["ColumnUniqueName"].Text;
        //format originalText here
        dataItem["ColumnUniqueName"].Text = originalText;
    }
}

2. Extend the GridMaskedColumn and modify the formatting of data values to apply the specified mask. This is done by overriding the FormatDataValue() method of your custom column:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Telerik.Web.UI;

namespace Telerik.Web.UI
{
    public class GridMaskedViewColumn :GridMaskedColumn
    {
        RadMaskedTextBox _formatTextBox;
        private RadMaskedTextBox FormatTextBox
        {
            get
            {
                if (_formatTextBox == null)
                {
                    _formatTextBox = new RadMaskedTextBox();
                    _formatTextBox.Mask = this.Mask;
                }

                return _formatTextBox;
            }
        }

        protected override string FormatDataValue(object dataValue, GridItem item)
        {
            string originalValue = base.FormatDataValue(dataValue, item);
            FormatTextBox.Text = originalValue;

            return FormatTextBox.TextWithLiterals;
        }
    }
}

With the second approach, you can use your custom column instead of the default masked column. It will format the data values according to the specified mask even for items in view mode:

<%@ Register Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
...
<telerik:RadGrid ID="RadGrid1" runat="server">
    <MasterTableView>
        <Columns>
            <telerik:GridMaskedViewColumn DataField="Price"
                HeaderText="MaskedPrice" Mask="$##.##">
            </telerik:GridMaskedViewColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

Regards,
Veli
the Telerik team