GridViewMaskedTextBoxColumn

5 posts, 0 answers
  1. Kirill
    Kirill avatar
    1 posts
    Member since:
    Jun 2013

    Posted 12 Apr 2014 Link to this post

    <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.
  2.
  3. Boris
    Admin
    Boris avatar
    276 posts

    Posted 16 Apr 2014 Link to this post

    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.

     
  5. Harri
    Harri avatar
    9 posts
    Member since:
    Dec 2012

    Posted 08 Sep 2014 in reply to Boris Link to this post

    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>
  7. Boris
    Admin
    Boris avatar
    276 posts

    Posted 10 Sep 2014 Link to this post

    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.
     
  8.
  9. Harri
    Harri avatar
    9 posts
    Member since:
    Dec 2012

    Posted 10 Sep 2014 in reply to Boris Link to this post

    Thanks

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

    /Harri
Back to Top