[Solved] Converting from stock DataGrid to RadGridView questions

[Rick Glos]

Hi,

I'm converting from the stock Microsoft DataGrid to the RadGridView early in the project cycle for future requirements.

Everything has been pretty smooth so far but I have a couple of issues.

1.  I have one template column that contains a Hyperlink button.  It appears that the right border is not rendering properly.  I used the example in the 'Telerik\RadControls for Silverlight Q1 2009\Examples\Examples.GridView.CS\Examples\GridView\Columns' directory that demonstrates the use of a Border and binding using TemplateBinding but I still have a missing border.

Here's a picture - I even tried moving it to the middle of the grid just to make sure it was just the right most column.

The code

                    <telerikGridView:RadGridView.Columns>
                        <telerikGridView:GridViewDataColumn HeaderText="Caption">
                            <telerikGridView:GridViewDataColumn.CellStyle>
                                <Style TargetType="telerikGridViewControls:GridViewCell">
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="telerikGridViewControls:GridViewCell">
                                                <Border BorderThickness="{TemplateBinding BorderThickness}"
                                                        BorderBrush="{TemplateBinding BorderBrush}"
                                                        Background="{TemplateBinding Background}">
                                                    <StackPanel Orientation="Horizontal" Margin="5,0,5,0">
                                                        <HyperlinkButton Content="{Binding LevelCaption}" VerticalAlignment="Center" Margin="0,0,10,0" Tag="{Binding}" Click="Button_Click" />
                                                    </StackPanel>
                                                </Border>
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                            </telerikGridView:GridViewDataColumn.CellStyle>
                        </telerikGridView:GridViewDataColumn>

2.  My second problem is defining the sort value for that same column.  Using the stock Microsoft DataGrid I used the SortMemberPath property.  Is their an equivalant for RadGridView or should I be using a different method?

Thanks!

[Vlad]

Hello Rick,

Here is an example how to fix this:

<Style TargetType="telerikGridViewControls:GridViewCell">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerikGridViewControls:GridViewCell">
                <Border BorderThickness="{TemplateBinding BorderThickness}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                Background="{TemplateBinding Background}">
                    <StackPanel Orientation="Horizontal" Margin="5,0,5,0">
                        <HyperlinkButton Content="{Binding LevelCaption}" VerticalAlignment="Center" Margin="0,0,10,0" Tag="{Binding}" Click="Button_Click" />
                    </StackPanel>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="BorderThickness" Value="0,0,1,1"/>
</Style>

We will fix our demo immediately.

Sincerely yours,
Vlad
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.

[Rick Glos]

Thanks Vlad.  That fixed my first issue.

For the second issue, I took a stab and used the DataMemberPath property like so:

<telerikGridView:GridViewDataColumn HeaderText="Caption" IsSortable="True" DataMemberPath="LevelCaption">

This seemed to work as I can now sort and filter on the Caption column even though I'm using a custom Template to display the data.  This is the correct way to do this?

[Pavel Pavlov]

Hi Rick,

Straight on the sorting issue :
Yes, DataMemberPath is OK to use in your scenario. Actually there are two properties of the column, which tell the grid what property of your custom objects to display and respectively use in sorting. Those are:

DataMemberPath and DataMemberBinding. Preferably use the DataMemberBinding as we are considering to mark DataMemberPath as obsolete and remove it in future.

You may however replace :
<telerikGridView:GridViewDataColumn HeaderText="Caption" IsSortable="True" DataMemberPath="LevelCaption"> 

with

<telerikGridView:GridViewDataColumn HeaderText="Caption" IsSortable="True" DataMemberBinding="{Binding Path=LevelCaption}"> 

with the same effect and thus assure future versions compatibility.

Kind regards,

Pavel Pavlov
the Telerik team

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

[Rick Glos]

Ah excellent.  Thank you I've made the change as you described for future compatibility.

Thank you both for a timely response.

This is exactly why I recommended to my client that we use the Telerik controls; excellent support.

[Rick Glos]

I would like to move the CellStyle into the RadGridView.Resources so that I can re-use the template for multiple columns.  This project has morphed into a grid that contains over 100 defined columns and now the user can define only to show certain columns.

I've modified the template slightly to change the color of the BorderBrush and Background.

                <telerikControlsGridView:GridViewDataColumn HeaderText="?" DataMemberBinding="{Binding SalesDollarsVariance}" Width="75" HeaderCellStyle="{StaticResource WrappedGridViewHeaderCellStyle}">
                    <telerikControlsGridView:GridViewDataColumn.CellStyle>
                        <Style TargetType="telerikGridView:GridViewCell">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="telerikGridView:GridViewCell">
                                        <Border BorderThickness="{TemplateBinding BorderThickness}"
                                                    BorderBrush="{Binding Content, Converter={StaticResource FormatBorderBrush}}"
                                                    Background="{Binding SalesDollarsVariance, Converter={StaticResource FormatConditionalFormatter}}">
                                            <StackPanel Orientation="Horizontal" Margin="5,0,5,0" HorizontalAlignment="Right" VerticalAlignment="Center">
                                                <TextBlock Text="{Binding SalesDollarsVariance, Converter={StaticResource FormatConverter}, ConverterParameter=\{0:C0\}}" />
                                            </StackPanel>
                                        </Border>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="BorderThickness" Value="0,0,1,1"/>
                        </Style>
                    </telerikControlsGridView:GridViewDataColumn.CellStyle>
                </telerikControlsGridView:GridViewDataColumn>

How do I convert this to be more generic?

So instead I'd like to define the CellStyle like so on multiple columns:

<telerikControlsGridView:GridViewDataColumn HeaderText="?" DataMemberBinding="{Binding SalesDollarsVariance}" Width="75" HeaderCellStyle="{StaticResource WrappedGridViewHeaderCellStyle}" CellStyle="{StaticResource HighlightNegativeValuesCellStyle}" />
<telerikControlsGridView:GridViewDataColumn HeaderText="?" DataMemberBinding="{Binding SalesDollarsVariancePercent}" Width="75" HeaderCellStyle="{StaticResource WrappedGridViewHeaderCellStyle}" CellStyle="{StaticResource HighlightNegativeValuesCellStyle}" />

I can't seem to figure out what I need to set the BorderBrush binding value to allow different columns.

[Rick Glos]

I think I figured this out per this post.

I needed to bind the Value to the Border and then I can use Converter's all over the place.  So my Style in the RadGridView.Resources looks like this:

            <telerikControlsGridView:RadGridView.Resources>
                <Style TargetType="telerikGridView:GridViewHeaderCell" x:Name="WrappedGridViewHeaderCellStyle">
                    <Setter Property="Template" Value="{StaticResource WrappedGridViewHeaderCellTemplate}" />
                </Style>
                <Style TargetType="telerikGridView:GridViewCell" x:Name="HighlightValueCellStyle">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="telerikGridView:GridViewCell">
                                <Border DataContext="{TemplateBinding Value}" BorderThickness="{TemplateBinding BorderThickness}"
                                                    BorderBrush="{Binding Converter={StaticResource FormatBorderBrush}}"
                                                    Background="{Binding Converter={StaticResource FormatConditionalFormatter}}">
                                    <StackPanel Orientation="Horizontal" Margin="5,0,5,0" HorizontalAlignment="Right" VerticalAlignment="Center">
                                        <TextBlock Text="{Binding Converter={StaticResource FormatConverter}, ConverterParameter=\{0:C0\}}" />
                                    </StackPanel>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                    <Setter Property="BorderThickness" Value="0,0,1,1"/>
                </Style>
            </telerikControlsGridView:RadGridView.Resources>

Which allows me to define columns like this:

<telerikControlsGridView:GridViewDataColumn HeaderText="?" DataMemberBinding="{Binding SalesDollarsVariance}" Width="75" HeaderCellStyle="{StaticResource WrappedGridViewHeaderCellStyle}" CellStyle="{StaticResource HighlightValueCellStyle}" />

I think this is correct.

[Rick Glos]

Actually this doesn't work because I need to change the ConverterParameter.  Sometimes it's Currency, sometimes it's Percent, sometimes two decimals, etc....

If I use the Converter in the DataMemberBinding then the Value becomes the converted value (i.e. $200) and now there's formatting issues when I try and determine if the value is > 0 with the FormatBorderBrush converter...

[Tim]

I found this post to be exactly what I am looking for, however, I cannot figure out why it doesn't quite work.  Specifically, the margins and borders do not match the non-templated cells (there appears to be no margin, and there definitely is no border.)  Further, Visual Studio 2009 shows the entire <ControlTemplate>...</ControlTemplate> in gray and suggests "Resource is never used".  Removing the outer <ControlTemplate>...</ControlTemplate> removes this warning but then gets a runtime error in InitalizeComponent indicating the XAML is invalid.  What is wrong with the following?  It is definitely calling my converter and converting the cell contents correctly, just no border or margin.

<TelerikGridView:GridViewDataColumn
  HeaderText="File Name" UniqueName="FileName"
  Width="auto" IsReadOnly="True">
  <TelerikGridView:GridViewDataColumn.CellStyle>
    <Style TargetType="GridView:GridViewCell">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="GridView:GridViewCell">
            <Border BorderThickness="{TemplateBinding BorderThickness}"
              BorderBrush="{TemplateBinding BorderBrush}"
              Background="{TemplateBinding Background}">
                <TextBlock VerticalAlignment="Center"
                  Text="{Binding Path=FileId, Converter={StaticResource FileIdToNameParameterConverter}}"/>
            </Border>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
  </TelerikGridView:GridViewDataColumn.CellStyle>
</TelerikGridView:GridViewDataColumn>

Thanks,
Tim

[Pavel Pavlov]

Hello Tim,
I have copied some additional elements from the original cell template in order to add the missing borders and margins. Please try the following XAML.

<Style TargetType="GridView:GridViewCell">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="GridView:GridViewCell">
                                        <Grid x:Name="SelectionBackground"  Background="{TemplateBinding Background}">
                                            <Border BorderThickness="{TemplateBinding BorderThickness}"
              BorderBrush="{TemplateBinding BorderBrush}"
              Background="{TemplateBinding Background}">
                                                <TextBlock Margin="4" VerticalAlignment="Center"
                  Text="Test123"/>
                                            </Border>
                                            <Rectangle x:Name="PART_HorizontalGridLine" Height="1" Fill="#FFB3B3B3"
                       VerticalAlignment="Bottom" HorizontalAlignment="Stretch" />
                                            <Rectangle x:Name="PART_VerticalGridLine" Width="1" Fill="#FFB3B3B3"
                       VerticalAlignment="Stretch" HorizontalAlignment="Right" />
                                        </Grid>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>

Greetings,
Pavel Pavlov
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.

[Tim]

Better, but the Fill="#FFB3B3B3" does not match the theme (Office_Blue in this case) -- is there a template binding for the fill color?

Tim

[Pavel Pavlov]

Hello Tim,

There is no template binding. I have copied the color from the office_Black theme.

Here is the exact value for office blue :

#FFD0D7E5

All the best,
Pavel Pavlov
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.

[Tim]

Thanks - I did not want to hard-code (or even resource) colors if there was a template/proper way to get them.

Tim

[Pavel Pavlov]

Hi Tim,

We are constantly working towoards improvement of the XAML . Your request is absolutely reasonable .
For future versions of the RadGridView we will try to fix such missing TemplateBindings.

All the best,
Pavel Pavlov
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.