Own UserControl in PropertyGridRow (MVVM)

[Simon]

Hello,

I want to set a custom user control as an entry for some properties (full MVVM support). If the user clicks the button a custom file selector (modal) should be shown. If the user selects a file, the file path should be shown in the textfield and also should be bind to the changed property in the propertygrid.

UserControl: A grid with a textfield and a button

<UserControl x:Class="EN.Editor.UI.ImageSelector"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:EN.Editor.UI"
             xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             mc:Ignorable="d"
             Width="100"
             >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="30"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBox Grid.Column="0" Name="txtPath" Text="{Binding ImagePath, Mode=TwoWay}" />
        <Button Grid.Column="1" Command="{Binding SelectFileCommand}" CommandParameter="{Binding}" Content="..." />
    </Grid>
</UserControl>

 

ViewModel of the User Control (set as DataContext in Code behind)

public class ImageSelectorViewModel : ViewModelBase
   {
       private string imagePath;

       public DelegateCommand SelectFileCommand { get; private set;}

       public ImageSelectorViewModel()
       {
           this.SelectFileCommand = new DelegateCommand(x => SelectFile());
       }


       public string ImagePath
       {
           get { return imagePath; }
           set
           {
               if (this.imagePath != value)
               {
                   imagePath = value;
                   OnPropertyChanged(() => ImagePath);
               }
           }
       }


       private void SelectFile()
       {
           FileSelector fs = new FileSelector("Choose file");
           if (fs.ShowDialog() == CommonFileDialogResult.Ok)
           {
               this.ImagePath = fs.FileName;
           }
       }
   }

 

I set the user control as a custom editor attribute on the autogenerated item of my property grid

[Display(AutoGenerateField = true, Name = "Video Transition")]
      [Telerik.Windows.Controls.Data.PropertyGrid.Editor(typeof(ImageSelector), EditorStyle.None)]
      public string NavigateToMovie
      {
          get
          {
              return this.navigateToMovie;
          }
          set
          {
              if (this.navigateToMovie != value)
              {
                  this.navigateToMovie = value;
                  this.OnPropertyChanged(() => NavigateToMovie);
              }
          }
      }

 

I've tried many different ways, but the click command isn't triggered. If I replace the click command on the button with a Click event handler the file selector is shown, but the selected file path isn't set on the property in the property grid. I've also tried to set the targetProperty Attribute to "ImagePath" but also without success.

For better code separation I need the full MVVM style.

I've spent lot of hours to get this done - without success.

What's wrong with my code? Thanks.

 

[Martin]

Hello Simon,

Considering your report, indeed this is an issue in RadPropertyGrid.  I have logged it in our feedback portal. You can track its progress, subscribe to status changes and add your vote/comment to it on the following link - feedback item. I have also updated your Telerik points as a gratitude for your cooperation.
As a workaround, I can suggest changing an EditorStyle's value to Modal or DropDown.

I hope that this helps.

Regards,
Martin Vatev
Telerik by Progress

[Simon]

Is there any other solution to open a custom open file dialog when clicking the property value and showing the selected file path in the property value column (with binding for sure)?

I can't wait until the issue is fixed.

 

Thanks and regards,

Simon

[Martin]

Hello Simon,

For your convenience, I have prepared an example to demonstrate another workaround achieving the desired behavior. Please take a look at the implementation and consider how this approach fits your scenario.

I hope that this helps. Should you have any other questions, do not hesitate to contact us.

 

Regards,
Martin Vatev
Telerik by Progress