RadGridView on WPF March 2009 release observations

[Selvam]

I downloaded WPF Q1 2009 release and noticed

I application I built using the previous release does not work 100% as it is supposed to. I have a grid with MultiSelection enabled and it supported Shift+ and Ctl+ key cmobinations. After upgraded to Q1 2009, Ctl+ key is not supported and it does not select the row was clicked.

I'm able to iterate through rows and columns using new release but noticed the grid does not support extended method to process rows or columns by conditions like as mentioned in here http://blogs.telerik.com/vladimirenchev/posts/09-02-03/Easy_programmatic_UI_customization_for_WPF_and_Silverlight.aspx . I don't even see the extended methods First(), Where() ...being recognized by VS IDE/Intellisense. Hopefully I don't miss any necessary references or namespaces....?

How to add <ComboBox> in colum header and write event to set value in all rows on Header combox item changed event and select the rows only have specific cell value?

How to conditionally format rows and columns?

How can I add pagination controls on top of Grid like in Group by selection area?

I really like Telerik controls but I thing there is no enough documentation on how to use advanced features... Please provide answers ASAP to complete my prototype.

[Jordan]

Hi Selvam,

Thanks for your feedback. Unfortunately, I should admit that our documentation for WPF is lacking in many areas and we are doing our best to constantly extend and improve it.

Now, straight onto your issues:

I tested the Multiselection and Ctrl + Click works fine. Attached is a sample project.

To work with extension methods First(), Last(), etc. you should add namespace System.Linq. This methods came with .NET (check the example project).

To add ComboBox in HeaderCell you should define HeaderCellStyle on Column. 

<telerik:RadGridView x:Name="gridView" Grid.Row="1" AutoGenerateColumns="False" MultipleSelect="True">
    <telerik:RadGridView.Columns>
        <telerik:GridViewDataColumn UniqueName="Name" />
        <telerik:GridViewDataColumn UniqueName="Age" />
        <telerik:GridViewDataColumn UniqueName="Country" HeaderCellStyle="{StaticResource HeaderCellWithCombo}" />
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

In my opinion, the best way to update all rows is to update the source collection.

private void ComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    foreach (var user in source)
    {
        user.Country = (string)((ComboBox)sender).SelectedValue;
    }
    gridView.Rebind();
}

Check attached project for more information.

For conditional formatting of rows you should define GridViewRow style. In the sample I define global style and set a converter to Background property. The converter returns red if the Age property is under 21.

<telerik:RadGridView.Resources>
    <WpfApplication1:AgeToColorConverter x:Key="TestConverter"/>
    <Style TargetType="{x:Type telerik:GridViewRow}">
        <Setter Property="Background">
            <Setter.Value>
                <SolidColorBrush Color="{Binding Path=Age, Converter={StaticResource TestConverter}}"></SolidColorBrush>
            </Setter.Value>
        </Setter>
    </Style>
</telerik:RadGridView.Resources>

You can add your paging control above GroupPanel. You should define RadGridView style. Check the sample project.

If you need more assistance, please let me know.

Sincerely yours,
Jordan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Selvam]

Jordan,

Great! Thanks for the clarification.

I think all given solution will work for my secnario except for the the unbound columns I have on the grid and I want to read its values for each row. I would not prefer to have modified my data records retreived from DB just to add some UI elemennt state. Is there any other better way to read values of Unbound column from RadGridView rows?

Also I'm wondering RadGridView supports Thumpnail view of items (multiple thumpnails being displayed on same row)?

Regards
Selvam.

[Pavel Pavlov]

Hello Selvam,

On your first question:
Unfortunately I don't think there is an easy way to accomplish the task of setting and preserving a visual state of an UI element in a row. It is because of the virtualization the grid uses to minimize memory usage and gain performance. The root of the problem is that when you scroll up and down, only the visible data is realized as UI elements (rows and cells). Once a row comes out of the viewport, it is being destroyed thus clearing any previously set visual states.

However there is a common approach to solve such scenarios. You can use a kind of MVVM approach. For example you may create intermediate collection to represent your data plus additional visual states.
You then bind the grid to your collection rather than the original data.
This way you will have a collection where any visual states will persist without the need of spoiling the original data with such states. What you will need to implement manually is keeping both collections in sync.

On your second question:

So far the grid does not support a thumbnail preview. Depending on your specific scenario similar effect may be accomplished by modifying the row template. Please have a look at the "Custom Content Template" example in our QSF.

All the best,
Pavel Pavlov
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Selvam]

Thanks for your reply again. I'll use MVVM approach to solve the first problem. The secnario in second one is I want to display all folder contents as thumbnail (similar like explorer view), I wonder whether that can be done using RadGridView....

 

New One:

Is it possible to have Vertical column headers in RadGridView? Please provide example if there is one. I don't want my column header eats much space while the colum content is going to be a single character. I tried this

                                    <telerik:GridViewDataColumn.HeaderCellStyle>
                                        <Style TargetType="telerik:GridViewHeaderCell">
                                            <Setter Property="LayoutTransform">
                                                <Setter.Value>
                                                    <RotateTransform Angle="-90"/>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </telerik:GridViewDataColumn.HeaderCellStyle>
But RadGridView does not show the full header text neither it allows me to adjust column Header height.

 

 

[Kalin Milanov]

Hi Selvam,

In the upcoming service pack we will be releasing RadGridView with the possibility to set a MinHeight of the GridViewHeaderRow. In turn this will make it possible for the HeaderRow to expand as needed and show the contents of the HeaderCell in full.

All the best,
Kalin Milanov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Selvam]

Thanks again!

Is there any trick that you would recommend to have Vertical column header in RadGridView till we get the functionality built into RadGridView? I definitely need this. If possible please provide a sample code.

Also don't know whether RadGridView supports extensive events to load detail records only when needed or in otherworld when Header record node expands. My scenario is I run a query to get header records with a indicator to show expandable node or not.  I bind this. Then on node expand, I want to reach DB to pull detail records just for the header record expanded...

Thanks in advance.

[Vlad]

Hello Selvam,

The header problem is fixed and the fix will e part of our SP1 (will be released today hopefully).

Generally the grid will try to get child data only when you expand the record and you can use DataSourceChanged of GridViewTableDefinition to achieve your goal.

I have attached small demo application using our latest binaries to illustrate you these.

All the best,
Vlad
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Selvam]

Vlad, Thanks for your reply with sample code. The vertical column header looks good on load but after few column reordering the header text become invisible with (...). Also I wonder why can't we have both Horizontal header text and vertical header text in the same grid. The sample does not have horizontal header text and I tried to make one but no help.

I noticed the child records grid get created automatically with almost the same properties as of parent grid. Can we control the properties of child records grid? Can we explicitly define the child records grid?

Unfortunately I don't see any code which load detail data on demand (WHen I say on demand, I really mean pull data from data source or explicitly pass data for child grid). The code block in sample application just has one call to pull all data including the Items property of MyBusinessObject object.

I like the features quoted in Telerik controls product marketing page but really having difficulty to implement it without documentation.

Regards

[Vlad]

Hi Selvam,

The style can be applied per column instead for all GridViewHeaderCells. The grid will data-bind always hierarchical tables on demand and you can use the event to change the detail table data source your own (if this is the case). My example is similar to this one:

Please check other hierarchical examples for more info:
http://demos.telerik.com/wpf/?GridView/Hierarchy/PropertyHierarchy

Best wishes,
Vlad
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.