This is a migrated thread and some comments may be shown as answers.

Password Masking in Gridview Cell Display

4 Answers 677 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Glenn
Top achievements
Rank 2
Glenn asked on 10 Feb 2011, 03:26 PM
I have implemented a "Property Editor" style control for our application that utilizes a RadGridView.  By utilizing standard and custom .NET attributes, we allow for custom editing of properties from any user-configurable object within our product.  The user is also able to display properties alphabetically or by category.  I implement editing by creating a custom column type that inherits from GridViewDataColumn and overrides the CreateCellEditElement method.

The RadGridView has really served us nicely in this respect.  Recently, a request was made to support "Password" class properties.  Implementing the editor was trivial using the PasswordBox control.  However, I'm running into issues when trying to mask the password's value when not in edit mode.

Currently, I have defined a style that sets the Foreground font color to "Transparent" if the editor type is "Password":

<Style TargetType="telerik1:GridViewCell"
       x:Key="ValueCellStyle">
    <Style.Triggers>
        <DataTrigger Binding="{Binding Path=Editor}"
                     Value="Password">
            <Setter Property="Foreground"
                    Value="Transparent" />
        </DataTrigger>
    </Style.Triggers>
</Style>

This style is then utilized by the custom column class (inherited from GridViewDataColumn):

<my
:ConfigDataColumn Header="Value"
                      DataMemberBinding="{Binding Value, Mode=TwoWay}"
                      Width="300"
                      IsReadOnly="False"
                      CellStyle="{StaticResource ValueCellStyle}" />

This works well, but it's not was I would like to do.  By setting the foreground font color, it gives the impression to the user that their entry was not accepted by the program.  I would really like to mask the password with a character in the cell similar to what the PasswordBox control does.  When I attempt to set the ContentTemplate with a control (TextBlock or PasswordBox), I loose the ability to edit the cell's contents.  The row will go into edit mode, but the edit control is not displayed even though the CreateCellEditElement method is being executed.

What's the best way to implement such a method of data masking?

...Glenn

4 Answers, 1 is accepted

Sort by
0
Pavel Pavlov
Telerik team
answered on 15 Feb 2011, 04:53 PM
Hello Glenn,

I believe you need to use the CellEditTemplate [property of GridViewDataColumn.
This way you can place any control to edit the underlying value for that column( including the password box).

Greetings,
Pavel Pavlov
the Telerik team
Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
0
Glenn
Top achievements
Rank 2
answered on 05 Mar 2011, 11:30 PM
That would work if all the rows were using the same type of cell editor.  However, in my situation, the type of editor will change based on the data for that row.

After playing around a bit with it, I realized the answer was right in from of my face.  Since I am utilizing a custom data column inherited from the GridViewDataColumn, I had the answer available without a lot of work.  I am already overriding the CreateCellEditElement method for handling the different types of editors that I use.  The solution was to override the CreateCellElement method and provide a PasswordBox that masked out the password value.

...Glenn
0
hermann
Top achievements
Rank 1
answered on 03 Oct 2011, 02:39 PM
Hi Glenn,
could you possibly post a snippet or so, to show your solution,
I would need such thing as well, but - as always - the project is running out of time...

All the best,
Hermann
0
Glenn
Top achievements
Rank 2
answered on 05 Oct 2011, 01:01 PM
To do it, you need to have some property in the data item for the table that indicates that the field is a password-type field.  Since my implementation uses reflection to determine the properties to edit, I use custom attributes that indicate the editor type for each property.  I take the attribute values and put them into the class instance that is used to generate the grid.

After getting the information into the object, you need to create your own custom data column, overriding the CreateCellEditElement and CreateCellElement methods.  You may also need to override the UpdateSourceWithEditorValue method.

public class MyDataColumn : GridViewDataColumn
{
    public override FrameworkElement CreateCellEditElement(GridViewCell cell, object dataItem)
    {
        // Get editor type from dataItem
 
        if (editorType == "PASSWORD")
        {
            var editor = new PasswordEditor();
 
            // Bind your data item to the PasswordEditor.ValueProperty
 
            return editor;
        }
         
        return base.CreateCellEditElement(cell, dataItem);
    }
 
    public override FrameworkElement CreateCellElement(GridViewCell cell, object dataItem
    {
        // Get editor type from dataItem
 
        if (editorType == "PASSWORD")
            return new TextBlock() { Text = new String('*', value.length) };
 
        return base.CreateCellElement(cell, dataItem);
    }
}

Then, in your XAML, simply use the new data column class as your column type:

<telerik1:RadGridView.Columns>
   <my:MyDataColumn Header="Value" DataMemberBinding={Binding Value, Mode=TwoWay}" />
</telerik1:RadGridView.Columns>
Tags
GridView
Asked by
Glenn
Top achievements
Rank 2
Answers by
Pavel Pavlov
Telerik team
Glenn
Top achievements
Rank 2
hermann
Top achievements
Rank 1
Share this question
or