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

[SB]

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>

 

[Dilyan Traykov]

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

[SB]

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?

[Dilyan Traykov]

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

[SB]

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?

[Dilyan Traykov]

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

[SB]

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!

[Dilyan Traykov]

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

[SB]

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 "[phone]" 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.

[Dilyan Traykov]

Hello,

Please excuse me for the misunderstanding. I believe modifying the IsEnabled trigger in the control template of the RadMaskedTextInput element should finally provide the desired result.

<Trigger Property="IsEnabled" Value="False">
    <Setter TargetName="DisplayText" Property="Opacity" Value="1"/>
    <Setter TargetName="Content" Property="Opacity" Value="{telerik1:Office2016Resource ResourceKey=DisabledOpacity}"/>
    <Setter Property="Background" Value="Transparent"/>
</Trigger>

I'm also attaching a modified version of the project with the implementation.

Please let me know if this is what you're looking for.

Regards,
Dilyan Traykov
Telerik by Progress

[SB]

From what I can tell, that is going to work. Is there another way to adjust the opacity without having to import/change the control template of the rad masked text input? Seems a little overkill.

[Dilyan Traykov]

Hello,

Technically, you could use the DisabledOpacity and PrimaryColor properties of the Office2016Palette, however, this will change the appearance of other controls using the theme as well so I would not recommend this.

Another suggestion I can offer, provided your mask uses only numeric characters is to use a normal TextBlock in the CellTemplate of the column and make use of the StringFormat property of the binding, like so:

<telerik:GridViewDataColumn.CellTemplate>
    <DataTemplate>
        <TextBlock VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Padding="4 6 4 5" Text="{Binding StadiumCapacity, StringFormat='{}{0:(###) ###}'}" />
    </DataTemplate>
</telerik:GridViewDataColumn.CellTemplate>

Regards,
Dilyan Traykov
Telerik by Progress

[SB]

Thank you for your reply. I will see if i can make one of those options work.

[SB]

Thank you for your reply. I will see if I can make one of those options work.