This is a migrated thread and some comments may be shown as answers.

RadGridView "selected" column background color based on user selection

1 Answer 342 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 26 Sep 2012, 03:12 PM
I have been searching for a while now and have not come up with solution to a feature I need to implement.

I have set the background color for multiple columns in my RadGridView to be bound to a user's selection. For example, if they select option 1, the first column will be highlighted. If they select option 2, the second column is highlighted, and the highlight from the first column is removed. I currently have the style for the column set up as follows:

<telerik:GridViewColumn.Style>
    <Style BasedOn="{StaticResource CommonColumnStyle}" TargetType="{x:Type telerik:GridViewColumn}">
        <Style.Triggers>
            <DataTrigger Value="True">
                <DataTrigger.Binding>
                    <MultiBinding Converter="{StaticResource ColumnIsSelectedConverter}" ConverterParameter="0">
                        <Binding ElementName="LayoutRoot" Path="DataContext.AllowedOptions" />
                        <Binding ElementName="LayoutRoot" Path="DataContext.SelectedOptions" />
                    </MultiBinding>
                </DataTrigger.Binding>
                <Setter Property="Background" Value="{DynamicResource ColumnHighlightColor}" />
            </DataTrigger>
        </Style.Triggers>
    </Style>
</telerik:GridViewColumn.Style>

The CommonColumnStyle just defines text alignment, trimming, and a default background of transparent. The ColumnIsSelectedConverter returns true or false. The ViewModel contains an IList of options that are displayed to the user in the order that they also appear in the grid. This lets me use the ConverterParameter to specify that this is the nth column in the XAML.

There are two problems with this implementation:

  1. I'm also defining footers for these columns. The first column's data cells and footer start with the ColumnHighlightColor. If the user changes the selected option, the data cell backgrounds update, but the footer background does not change. (e.g. first column returns to transparent, second column is now highlighted, but the first column's footer is still highlighted and the second footer is transparent.) I was able to get around this by defining a style/triggers for the footer cells as well, but I don't think that should be necessary. I'm curious if this is by design or a bug.

  2. The column background only appears for rows with data and in the footer row, not the unoccupied rows. We have our GridView set to fill up most of the screen, so we would like the column background to show up from the top of the GridView to the bottom. Is there a way around this?

Thanks!

1 Answer, 1 is accepted

Sort by
0
Accepted
Maya
Telerik team
answered on 28 Sep 2012, 07:32 AM
Hi Kevin,

Basically, GridViewColumn is not visual element is not recommended to create style targeting it. What I could suggest instead is to create style for GridViewCell and set it for the column through its CellStyle property (take a look at this article for more information). And since GridViewFooterCell is different visual element, you will need a style for it as well.
Considering your second issue, if there are not cells, you cannot color the place from your last row to the footer.

Regards,
Maya
the Telerik team

Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.

Tags
GridView
Asked by
Kevin
Top achievements
Rank 1
Answers by
Maya
Telerik team
Share this question
or