Show a dynamic mask when viewing (not just editing) grid cells

9 posts, 0 answers
  1. SB
    SB avatar
    7 posts
    Member since:
    Apr 2016

    Posted 01 Feb Link to this post

    I have a GridViewDataColumn in which I need the cells to use/display a mask both in view/edit mode. In order to do this I have set the CellTemplate and the CellEditTemplate as you can see below. I cannot use the GridViewMaskedInputColumn because it does not allow me to specify different masks per cell. One mask per column will not work in my scenario (see attached picture). 

    There is a slight difference between view and edit mode that I would like help with. In edit mode, the RadMaskedTextBox fills the cell, but in view mode, the RadMaskedTextBox does not quite fill the cell. I would like masked textbox to fill the cell regardless of whether it is in edit or view mode.

     

    I have considered putting a Margin="3,0,0,0" on the CellEditTemplate, this means the textbox will not fill the cell in either view/edit mode - not idea....

     

    <telerik:GridViewDataColumn
        Header="Value"  
        ValidatesOnDataErrors="InEditMode"
        DataMemberBinding="{Binding Value}"
        Width="*">
        <telerik:GridViewDataColumn.CellTemplate>
            <DataTemplate>
                <telerik:RadMaskedTextInput
                    Mask="{Binding ValueMask}"
                    Value="{Binding Value}"
                    TextMode="MaskedText"
                    IsEnabled="False"
                    SelectionOnFocus="CaretToBeginning"
                    IsLastPositionEditable="False"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"/>
            </DataTemplate>
        </telerik:GridViewDataColumn.CellTemplate>
        <telerik:GridViewDataColumn.CellEditTemplate>
            <DataTemplate>
                <telerik:RadMaskedTextInput
                    Mask="{Binding ValueMask}"
                    Value="{Binding Value}"
                    TextMode="MaskedText"
                    SelectionOnFocus="CaretToBeginning"
                    IsLastPositionEditable="False"
                    HorizontalAlignment="Stretch"
                    VerticalAlignment="Stretch"/>
            </DataTemplate>
        </telerik:GridViewDataColumn.CellEditTemplate>
    </telerik:GridViewDataColumn>

     

  2. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    417 posts

    Posted 06 Feb Link to this post

    Hello,

    In order to achieve the desired look, you will need to define the following style and set it as the column's CellStyle.

    <Style x:Key="MaskedColumnStyle" TargetType="telerik:GridViewCell" BasedOn="{StaticResource GridViewCellStyle}">
        <Setter Property="Padding" Value="0" />
        <Setter Property="VerticalContentAlignment" Value="Stretch" />
    </Style>
    <telerik:GridViewDataColumn Header="Value" ValidatesOnDataErrors="InEditMode" CellStyle="{StaticResource MaskedColumnStyle}" DataMemberBinding="{Binding StadiumCapacity}" Width="*">

    Please let me know if this works for you.

    On a side note, you could use the column's CellTemplateSelector and CellEditTemplateSelector properties, should you find applicable.

    Regards,
    Dilyan Traykov
    Telerik by Progress
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. SB
    SB avatar
    7 posts
    Member since:
    Apr 2016

    Posted 07 Feb Link to this post

    Thank you. What you posted has achieved what I was looking for. 

    One followup question:

    Cells that I have not created a custom dataTemplate for makes me click twice on the cell before being placed in edit mode. I would like to have consistent behavior between all the cells in my row where two clicks puts the cell into edit mode with a white background. Currently, a single click on the radMaskedTextInput cell puts me into edit mode and does not change the cell's background to white (signifying were in edit mode).

     

    What would be the best way to achieve this?

  4. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    417 posts

    Posted 09 Feb Link to this post

    Hello,

    Could you please have a look at the attached project where two mouse clicks are needed to put the RadMaskedTextInput cell into edit mode? The background of the element is also changed accordingly at my end.

    Do let me know if I've missed something of importance or you observe a different behavior at your end. I will be awaiting your reply.

    Regards,
    Dilyan Traykov
    Telerik by Progress
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  5. SB
    SB avatar
    7 posts
    Member since:
    Apr 2016

    Posted 09 Feb in reply to Dilyan Traykov Link to this post

    I should have mentioned that I tried the same thing you did - setting the cellTemplate's IsEnabled bit to false. In doing that, the cell background no longer changes when a row is clicked and or on mouseOver (like the other cells do).

    To fix that, I can set the background in the cellTemplate to 'transparent' which then allows the cell's background to change on row click and mouseOver (as desired) but the text is grey because the cell is disabled. Ideally, I would like to have the cell's text color consistent with the other cells (black).

    What do you suggest is the best way to achieve this?

  6. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    417 posts

    Posted 10 Feb Link to this post

    Hello,

    It seems that I have misunderstood your requirements. From what you shared in your previous post, I believe simply removing the CellTemplate along with the custom CellStyle we set up would result in the desired behavior. Could you please give this a try and let me know if it works for you?

    <telerik:GridViewDataColumn Header="Value" 
                                ValidatesOnDataErrors="InEditMode"
                                DataMemberBinding="{Binding StadiumCapacity}"
                                Width="*">
        <telerik:GridViewDataColumn.CellEditTemplate>
            <DataTemplate>
                <telerik:RadMaskedTextInput
                                Mask="#"
                                Value="{Binding StadiumCapacity}"
                                TextMode="MaskedText"
                                SelectionOnFocus="CaretToBeginning"
                                IsLastPositionEditable="False"
                                HorizontalAlignment="Stretch"
                                VerticalAlignment="Stretch"/>
            </DataTemplate>
        </telerik:GridViewDataColumn.CellEditTemplate>
    </telerik:GridViewDataColumn>

    Regards,
    Dilyan Traykov
    Telerik by Progress
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  7. SB
    SB avatar
    7 posts
    Member since:
    Apr 2016

    Posted 2 days and 13 hours ago in reply to Dilyan Traykov Link to this post

    Unfortunately, your suggestion does not provide the desired look because the dynamic mask is removed from the cell (see Removed cellTemplate png).

    If you take a look at the attached DesiredLookExceptReadonly.png, by overriding both the CellTemplate and CellEditTemplate as you suggested, I get the desired look and feel both on view/edit mode with ONE exception. When clicking on any of the cells in the grid, I have to click twice to get the cell into edit mode (unless the row is already in edit mode). In order to achieve this behavior with my overridden cellTemplate, I had to set IsEnabled = false in my CellTemplate, This of course makes the text grey (as opposed to black). See DesiredLook2.png and compare the 'Notes' column with the 'Value' column.

    Is there an easy way to make the cellTemplate I have created act and look like the cells beside it? Specifically, click twice on the cell to get into edit mode yet still have black text and display the dynamic mask. 

     

    Thank you for your continued help!

  8. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    417 posts

    Posted 18 hours ago Link to this post

    Hello,

    What I forgot to mention was that apart from removing the CellTemplate, you will need to remove the CellStyle applied to the columns as it would no longer be needed.

    For your convenience, I'm attaching a modified version of my previous project which seems to provide the desired result. Could you please have a look at it and let me know if it fails to meet your requirements in any way?

    I will be awaiting your reply.

    Regards,
    Dilyan Traykov
    Telerik by Progress
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  9. SB
    SB avatar
    7 posts
    Member since:
    Apr 2016

    Posted 13 hours ago in reply to Dilyan Traykov Link to this post

    As suggested in the previous post I don't want to lose the mask displaying in view mode. Losing this mask means a phone number will not display as "(123) 456-7890" unless the dynamic mask is shown. I think having the cellTemplate and Styles are fine, the only thing I am trying to work around is the behavior of the cell such that it matches the cells beside it. I want the same behavior of click twice to get into edit mode and have the same look/feel of the cells with the exception of the mask still showing in view mode.

    It almost sounds like at this point it may be more helpful if I create a sample project for you so you can see what I mean? I have tried to attach png's but they may not be conveying what I am hoping to achieve.
Back to Top