GridViewMaskedTextBoxColumn

[Kirill]

<telerik:RadGridView Grid.Column="3" HorizontalAlignment="Left" Grid.Row="11" VerticalAlignment="Top" Width="auto" Height="135" ItemsSource="{Binding PhoneNumbers, UpdateSourceTrigger=PropertyChanged}" AutoGenerateColumns="False" ShowGroupPanel="False" AllowDrop="True" GroupRenderMode="Flat" NewRowPosition="Bottom">
 <telerik:RadGridView.Columns>

<telerik:GridViewMaskedTextBoxColumn  Header="Phone number" DataMemberBinding="{Binding PhoneNumber, UpdateSourceTrigger=PropertyChanged}" Mask="+#(###)###-##-##" MaskType="Standard"/>
 </telerik:RadGridView.Columns>

</telerik:RadGridView>

I'm trying to use masked textbox to get phone number from the user and to show them to him. So, cell is masked only in edit mode (e.g. [phone]). In view mode it looks like there is no any mask (e.g. 99999999999). And in binded item "PhoneNumber" it saves without mask. But I'd like to save string with mask into binded item. I know about TextWithLiterals property but i use MVVM, so it is not an answer.

[Boris]

Hello Kirill,

Please note the GridViewMaskedTextBoxColumn is marked as obsolete in our Masked TextBox Column documentation article. You can use GridViewMaskedInputColumn instead.

I attached a sample project that demonstrates how you can display the masked value of GridViewMaskedInputColumn. In order to display the masked value I used the DataFormatString property of the column.

<telerik:GridViewMaskedInputColumn DataMemberBinding="{Binding PhoneNumber}"
                                     Header="Phone number"
                                     Mask="+#(###)###-##-##"
                                     MaskType="Standard"
                                     DataFormatString="{}{0:+#(###)###-##-##}"  />

However, I'm not entirely sure that understand you scenario. But I'd like to save string with mask into binded item. If you mean only to display the masked value, the mentioned DataFormatString property should do the trick.

Do you need to save the masked value to your ViewModel as a string?
If you do, you can create a property of type string in your ViewModel and set formatted value there. 

Please let us know if this helps.

Regards,
Boris Penev
Telerik

 

 

[Harri]

Hi

I'm trying samekind thing but with IBAN (International Bank Account Number). I can't get it to be shown correctly when not editing, but when editing it is ok (see picture). So what is wrong with my code in xaml?

​

<telerik:GridViewMaskedTextBoxColumn
    DataMemberBinding="{Binding Path=IBAN, Mode=TwoWay}"
    DataFormatString="{}{0:aa## #### #### #### ##}"
    Width="150"
    ColumnGroupName="Pankkitiedot"
    MaskType="Standard"
    Mask="aa## #### #### #### ##">
    <telerik:GridViewMaskedTextBoxColumn.Header>
        <TextBlock Text="IBAN" TextWrapping="Wrap" />
    </telerik:GridViewMaskedTextBoxColumn.Header>
</telerik:GridViewMaskedTextBoxColumn>

[Boris]

Hello Harri,

The DataFormatString which you have specified is not valid. A possible workaround for this issue, is to use to edit the CellTemplate of the GridViewMaskedInputColumn. In it you can declare a TextBlock element and bind it's Text property to your IBAN property and specify a converter that will return the string that should be displayed.

<telerik:GridViewMaskedInputColumn DataMemberBinding="{Binding IBAN}"
                        Header="IBAN"
                        Mask="aa## #### #### #### ##"
                        MaskType="Standard">
    <telerik:GridViewMaskedInputColumn.CellTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding IBAN, Converter={StaticResource IBANConverter}}" />
            </DataTemplate>
    </telerik:GridViewMaskedInputColumn.CellTemplate>
</telerik:GridViewMaskedInputColumn>

I attached an updated version of my previous project, that demonstrates the suggested approach.

I hope this helps.


Regards,
Boris Penev
Telerik

 

 

[Harri]

Thanks

That worked well. I just had to do exception handling for "" and null string (if some case value is something like that).

/Harri