Dynamic Mask for GridViewMaskedTextBoxColumn

9 posts, 0 answers
  1. Minh
    Minh avatar
    43 posts
    Member since:
    May 2014

    Posted 04 Sep 2015 Link to this post

    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

  2. Stefan X1
    Admin
    Stefan X1 avatar
    514 posts

    Posted 09 Sep 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for WPF is Visual Studio 2017 Ready
  4. Minh
    Minh avatar
    43 posts
    Member since:
    May 2014

    Posted 09 Sep 2015 Link to this post

    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. 

  5. Stefan X1
    Admin
    Stefan X1 avatar
    514 posts

    Posted 12 Sep 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Minh
    Minh avatar
    43 posts
    Member since:
    May 2014

    Posted 23 Sep 2015 Link to this post

    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?

  7. Minh
    Minh avatar
    43 posts
    Member since:
    May 2014

    Posted 23 Sep 2015 Link to this post

    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? 

  8. Stefan X1
    Admin
    Stefan X1 avatar
    514 posts

    Posted 28 Sep 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Minh
    Minh avatar
    43 posts
    Member since:
    May 2014

    Posted 28 Sep 2015 in reply to Stefan X1 Link to this post

    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>
  10. Stefan X1
    Admin
    Stefan X1 avatar
    514 posts

    Posted 01 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for WPF is Visual Studio 2017 Ready