Dynamic Mask for GridViewMaskedTextBoxColumn

[Minh]

Related to a GridView but the cell is a MAskedInput, so not sure which forum it should belong.

 

I want to have a dynamic Mask. My current mask at the moment can take in a phone number or anything. May I ask how abouts do I go doing that? 

 

http://www.telerik.com/forums/dynamically-change-mask

[Stefan]

Hello Minh,

I can suggest you using CellTemplateSelector supported by the control and set different mask based on your requirements. Please take a look at the CellTemplateSelector topic to check how to set a different template of a cell in view mode. If you need to set the template in edit mode, you can benefit from the CellEditTemplateSelector and apply the same logic as with the CellTemplateSelector. Can you please clarify whether this was the behavior your were trying to achieve?

Regards,
Stefan X1
Telerik

[Minh]

Hi Stefan,

Thank you for the response.

 This is along the lines of what I'm looking for. Numbers are easy to deal with within gridviews, but what about mask specification.

 The first column could be the type [Phone, Email, Website, Postal Code] For simplification sakes, lets say [Phone, Website]

 

If the first column is phone I would like a basic mask of 1-(###)-(####) 

otherwise no mask at all. 

[Stefan]

Hello Minh,

Thank you for this clarification.

You can define a DataTemplate for each mask specification needed. For example, if you have a column with "phone" data, the CellTemplateSelector should return a DataTemplate with MaskedNumericInput with the needed mask as per your requirement. Respectively, for a column with "website" data it should return a DataTemplate containing MaskedNumericInput without any mask defined.

You can check out the Cells online example, as well the other demos from the TemplateSelectors section.

Best Regards,
Stefan X1
Telerik

[Minh]

Hi Stefan,

Thank you for the response. That was very informative. I've applied the situation. I was able to reuse most from the online example but there's some key features I'm also looking to have and some functionalities that aren't working to it's fullest extent. 

 

The phone masked worked perfectly, when no mask is not set, it seems to not work. By default it only displays 4 characters for the new mask. I think that's a default with the mask? Mask="aaaa" ?

 

At the moment there's two important colunms, the type column and then the value column. If I change the type from phone to email, it won't change the value mask from (###)-###-#### to None. Is there a way to have another column update the mask?

[Minh]

Hi Stefan,

 I figured out how to fix the mask issues changing. I simply implemented a style trigger. My next question is how come my Mask doesn't display brackets when I click outside of it? Is it because it's missing a CellTemplate? 

[Stefan]

Hi Minh,

Indeed, clicking outside the currently edited cell commits the edit and RadGridView returns to view mode.
In order to modify the visual appearance of GridViewCell in such state, you need to predefine the CellTemplate of a given column.

Let me know should you need further assistance.

Best Regards,
Stefan
Telerik

[Minh]

Hi Stefan, 

It sort of works but isn't fully functional I'd say. 

You are right, the only changes I needed to make was update the data trigger to also set the CellTemplateSelector to be the same as the CellEditSelector. The only problem left is that when my combo box is changed, the properties don't get updated and the DataTemplate doesn't change. I tried to implement a dynamic DataTemplate below but still no go.

 

    <DataTemplate x:Key="DynamicTemplate">
      ​    <ContentControl Content="{Binding }">
          <ContentControl.Style>
          ​    <Style TargetType="{x:Type ContentControl}">

                  <!-- Default Template -->
              ​    <Setter Property="ContentTemplate" Value="{StaticResource PhoneMaskTemplate}" />

                       <!-- Triggers to change Template -->
                      <Style.Triggers>
                          <DataTrigger Binding="{Binding Channel}" Value="{StaticResource ContactMethodConverter}">
                          ​    <Setter Property="ContentTemplate" Value="{StaticResource NoMaskTemplate}" />
                          </DataTrigger>
                      </Style.Triggers>
                      </Style>
                  </ContentControl.Style>
                    </ContentControl>
                </DataTemplate>​

 

    <Style TargetType="Telerik:GridViewDataColumn">
    ​    <Style.Triggers>
       ​     <DataTrigger Binding="{Binding Path=Channel}" Value="{StaticResource ContactMethodConverter}">
           ​     <Setter Property="CellTemplateSelector" Value="{StaticResource Selector}"/>
                 <Setter Property="CellTemplate" Value="{StaticResource DynamicTemplate}"></Setter>
            </DataTrigger>
        </Style.Triggers>
     </Style>

[Stefan]

Hello Minh,

I believe you may find the Cascading Comboboxes Selection SDK Example useful on this matter. For a detailed explanation of the approach, please check the Cascading Comboboxes Selection blog post.

I hope this helps.

Best Regards,
Stefan X1
Telerik