Sizing a RadPropertyGrid

[Louis]

Me again.  :)

I have a RadPropertyGrid inside a RadPane (part of a RadDocking layout).  The problem I'm having is that text fields in the property grid expand horizontally infinitely according to their content.  This also causes other non-text property grid items to expand such as enums / combo boxes.  Then the user has to scroll the entire RadPropertyGrid to the right to be able to select the drop down button for such properties.

I think basically what I want is for text fields to not cause the entire RadPropertyGrid control to expand horizontally, know what I mean?  Any suggestions?

<telerik:RadPaneGroup x:Name="propertiesPaneGroup" SelectedIndex="-1">
    <telerik:RadPane x:Name="propertiesPane" Header="Properties" CanFloat="False" CanUserClose="False" CanDockInDocumentHost="False">
        <telerik:RadPropertyGrid Name="mainPropertyGrid2" AutoGeneratePropertyDefinitions="True" />
    </telerik:RadPane>
</telerik:RadPaneGroup>

[Pavel Pavlov]

Hello Louis,

Please try seting a fixed value to the MaxWidth property of RadPropertyGrid.

Regards,
Pavel Pavlov
the Telerik team

[Louis]

No that doesn't solve the problem. 

Remember, this property grid is within a RadDocking layout.  The RadPaneGroup can be resized, just like in Visual Studio.  So hard-coding any paritcular width will not work.

But even if I do hard-code the width the problem remains.  A property field with a text box, as the text gets longer, *all* property value fields also get wider.  So the drop-down icon for an Enum combo-box, or the Calendar icon button for a DateTime, get pushed out of view.  This is not how Visual Studio's property grid works.

In PropGrid1.png, you can see the drop down button for the VerticalContentAlignment enum combo box in the property value field.
In PropGrid2.png, the longer text typed into the Height field causes the drop down button in the enum combo box to get pushed out of view as well.

[Louis]

ping?

[Pavel Pavlov]

Hi Louis,

Please excuse my delayed answer. I was trying to find a good solution for you.
The behavior described is expected as fields are placed in a ScrollViewer.

The straightforward solution would be to edit the template of the property gird and remove the ScrollViewer ( e.g. replace it with a border with horizontal alignment - stretch) . Since this involves some tons of xaml ( e.g. the whole template of RadPropertyGrid), i decided to provide you with a small hack  ( a few lines of c# code) .

I have demonstrated this approach in the demo app attached.

Best wishes,
Pavel Pavlov
the Telerik team

[Louis]

That's ok.  I do appreciate the update!

I'm able to use your work-around with a small caveat.  Your work-around doesn't work unless/until the user resizes the grid or docking. 

To repro, run the sample and type a long string in FirstName.  Notice the horizontal scroll bar appears at the bottom and all property value fields are stretched.  Now resize the docking pane slightly - the scroll bar disappears and your fix kicks in. 

I'm able to work around this by adding your hack to the mainPropertyGrid2_AutoGeneratingPropertyDefinition event.  A bit heavy-handed, but it works.  It might be nice if the RadPropertyGrid had two BindingStarted, BindingEnded events.  Then I could apply the hack once in the BindingEnded event. :)

I did try extracting the template and removing the ScrollViewer (PART_ItemsScrollViewer) a few days ago, but I ran into run-time exceptions.  Did you see the same thing?

Thanks again Pavel!

[Pavel Pavlov]

Hi Louis,

Glad to hear you have managed to implement a descent workaround.

I will be glad to have a look  at the template you have extracted. Please paste it here. Also some details on the runtime exceptions you are getting will be valuable. I will take care once I find out the reason for the exceptions being thrown.

Kind regards,
Pavel Pavlov
the Telerik team

[Louis]

Thanks Pavel.  I'll start a new thread for the template problem.

[Alex]

This code isn't working for me.  I am using version 2013.1.403.40.  actually this line doesn't even compile on the example

var presenter = this.mainPropertyGrid2.ChildrenOfType<PropertyGridPresenter>()[0];

Not to mention the face if I change it to

var presenter = this.pgSpectrums.ChildrenOfType<PropertyGridPresenter>().First();

it still doesn't work.  If  I change the second line of the example to

presenter.Width = this.pgSpectrums.ActualWidth / 2;

//Instead of

presenter.Width = this.pgSpectrums.ActualWidth -2;

I think I see the problem.  I'm selecting the wrong presenter.  It is supposed to keep the scroll bar from showing up but it still does so I think I need the next presenter down so I can get inside the scroll view.

[Maya]

Hello Louis,

Will it be possible to check whether you have all required references added - Telerik.Windows.Controls ( so that you can work with ChildrenOfType<T>() extensio method) and Telerik.Windows.Controls.ProeprtyGrid ( so that you have access to PropertyGridPresenter) ?  What are the compile errors that you get ? 

Regards,
Maya
Telerik

[Alex]

He's the compile error I get

Error 6 Cannot apply indexing with [] to an expression of type 'System.Collections.Generic.IEnumerable<Telerik.Windows.Controls.Data.PropertyGrid.PropertyGridPresenter>' 

[Maya]

Hello Alex,

ChildrenOfType<T>() extension method returns IEnumerable<T> and you cannot apply indexer to it. Check out this article for more information. One way to go would be to call ToList() and work with the list it returns (you will be able work with indices then). 

Regards,
Maya
Telerik

[Alex]

You miss under stand me.  As I have already stated that's not the problem I wanted fixed, I can fix that.  How ever even with the fixed code doesn't work.  IT still has the scroll bar.  I mentioned that because it was a symptom of your code not being combatable with my version of the rad property control in the hope that you could provide the code changes necessary to make it work. 

[Alex]

Figured it out.  All you need to do is have a dynamic resource that stores that width and gets updated every time you resize the RadPane I updates the resource that is bound to the min-width, and the width of the text box.