This project has moved. For the latest updates, please go here.

Crazy Question: Can XCTK PropertyGrid offer different editors for Text (String) attributes?

Jan 5, 2014 at 1:39 AM
Edited Jan 5, 2014 at 1:44 AM
Sound weird? It really isn't.

I have a single entity that describes any kind of configuration in my app. The user today uses a treeview on the left, clicks on a node, and a simple 3 column grid comes up:

Setting - Value - Description

All of which are strings. And even though the values are all strings, I need the user to be offered a specific kind of UI 'editor' based on, perhaps, another non-displayed/hidden column. That hidden column would tell the "Value" column to offer the usera s choce of (for example):

TextBox, DatePicker, ComboBox, CheckBox, etc.

..but the content is still stored in the DB/Entity as a string. This way, I can add a new configuration setting on the fly, and don't need to change anything. I add sections to the treeview in the DB directly, as they seldom need to change.

Example:

Image

On the right is my app as it is, and the left is just a test with PropertyGrid-which looks promising.

The only issue is that all I read tells me that PropertyGrid determines the 'editor' to allow the user to change it based on the actual property in the bound class. My bound class, though, has (essentially) just 3 properties (Setting, Value, Description), all of which String.

Problem:

-Any config items I need to have the user work with can be represented as a String value. BUT if I let them have a TextBox for all of them, they will mess them up, make typos, format dates wrong, you name it. I need to make things extremely easy.

Desired:

-In a separate column of the bound class, a value tells PropertyGrid which way to present the String (DatePicker, ComboBox, TextBox, CheckBox, etc.).
-The String value in the "Value" column (always a string) is presented in this fashion.
-The "Setting" and "Description" columns stay Textboxes no matter what.

"Why are you doing it this way?"

Well, in addition to the settings like what I've shown, I also have settings for countries, states, cities, and things that are really, really big. It is impractical to have this hard coded, as when one single thing needs adding, changing, deleting, I'm manually changing it in lots & lots of places. The solution above makes it super easy. My "ConfigItems" class is drop-dead simple.

Sound crazy?

Your thoughts?

TIA!

P.S. I'm new to WPF, having made about 6 projects in VS2012/VB with it, and have the excellent Pro WPF 4.5 in VB by Matthew MacDonald to work with. Up to now, things have been very simple, and I have not done anything in the way of Templates...

Can PropertyGrid do this? Can the XCTK DataGrid do it if the PropertyGrid can't? Am I way off base with this, and there is a much easier way?!

TIA!

pat
:)
Developer
Jan 22, 2014 at 2:55 PM
Hi,

In the PropertyGrid, there is the "EditorDefinitions" property that let's you set the Editor you want for specific properties. You can say for example : all the bool properties will have a red Background, all the Dates will have a specific format, a property named "MyString" will use a ComboBox where you set the source, a property named "MySpecialProp" will use a specific DataTemplate...

Please have a look at the samples :
-PropertyGrid/Editors/EditorTemplateDefinition
-PropertyGrid/Editors/More Editors Definitions
from the "Live Explorer app" available on this page : https://wpftoolkit.codeplex.com/

The Xceed DataGrid can also set specific editors for specific columns. So if a Column is of type string, the editor can be of type DatePicker or ComboBox when used with a Converter. Here's an example :
 <Window.Resources>
      <local:MyConverter x:Key="MyConverter" />

      <xcdg:CellEditor x:Key="ValueEditor">
         <xcdg:CellEditor.EditTemplate>
            <DataTemplate>
               <xctk:DateTimePicker Value="{xcdg:CellEditorBinding Converter={StaticResource MyConverter}}"
                                    Format="ShortDate" />
            </DataTemplate>
         </xcdg:CellEditor.EditTemplate>
      </xcdg:CellEditor>
   </Window.Resources>
   <Grid>
      <StackPanel>
         <xcdg:DataGridControl x:Name="_dataGrid" 
                               AutoCreateColumns="False">
            <xcdg:DataGridControl.Columns>
               <xcdg:Column FieldName="Setting"
                            Title="My Settings" />
               <xcdg:Column FieldName="Value"
                            Title="My Values"
                            CellEditor="{StaticResource ValueEditor}"/>
               <xcdg:Column FieldName="Description"
                            Title="My Descriptions" />
            </xcdg:DataGridControl.Columns>
         </xcdg:DataGridControl>
      </StackPanel>

   </Grid>
and the Code-behind :
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();

      _dataGrid.ItemsSource = new List<MyData>()
      {
        new MyData(){ Setting = "Setting 1", Value = "2010/12/15", Description = "Desc1" },
        new MyData(){ Setting = "Setting 2", Value = "2008/09/17", Description = "Desc2" },
        new MyData(){ Setting = "Setting 3", Value = "2005/06/24", Description = "Desc3" },
        new MyData(){ Setting = "Setting 4", Value = "2013/11/14", Description = "Desc4" },
      };
    }
  }

  public class MyData
  {
    public string Setting
    {
      get;
      set;
    }

    public string Value
    {
      get;
      set;
    }

    public string Description
    {
      get;
      set;
    }
  }

  public class MyConverter : IValueConverter
  {
    public object Convert( object value, Type targetType, object parameter, CultureInfo culture )
    {
      DateTime dateTime = DateTime.Parse( (string)value );
      return dateTime;
    }

    public object ConvertBack( object value, Type targetType, object parameter, CultureInfo culture )
    {
      DateTime dateTime = (DateTime)value;
      return dateTime.ToShortDateString();
    }
  }
You can also have a look at the samples in section "EditingData" when you "run Demo" of the Xceed DataGrid from this page : http://xceed.com/Grid_WPF_Demo.html