Own UserControl in PropertyGridRow (MVVM)

4 posts, 0 answers
  1. Simon
    Simon avatar
    6 posts
    Member since:
    Jan 2017

    Posted 07 Jan Link to this post

    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:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 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.

     

  2. Martin Vatev
    Admin
    Martin Vatev avatar
    126 posts

    Posted 11 Jan Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Simon
    Simon avatar
    6 posts
    Member since:
    Jan 2017

    Posted 19 Jan Link to this post

    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

  4. Martin Vatev
    Admin
    Martin Vatev avatar
    126 posts

    Posted 23 Jan Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top