This is a migrated thread and some comments may be shown as answers.

GridViewMaskedTextBoxColumn

4 Answers 265 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Kirill
Top achievements
Rank 1
Kirill asked on 12 Apr 2014, 08:15 AM
<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. +9(999) 999-99-99). 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.

4 Answers, 1 is accepted

Sort by
0
Boris
Telerik team
answered on 16 Apr 2014, 01:49 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Harri
Top achievements
Rank 1
answered on 08 Sep 2014, 10:34 AM
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>
0
Boris
Telerik team
answered on 10 Sep 2014, 06:39 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Harri
Top achievements
Rank 1
answered on 10 Sep 2014, 07:56 AM
Thanks

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

/Harri
Tags
GridView
Asked by
Kirill
Top achievements
Rank 1
Answers by
Boris
Telerik team
Harri
Top achievements
Rank 1
Share this question
or