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

RadGridView background color

4 Answers 883 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Stefano
Top achievements
Rank 1
Stefano asked on 05 Jul 2016, 02:53 PM

Hi people,

I have problem with RadGridView and background color: I can't set it ! I have a MVVM application and the grid is bind with observable collection; all my data are displayed correctly:

<telerik:RadGridView x:Name="dataGrid" ItemsSource="{Binding Model, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" AutoGenerateColumns="False" FrozenColumnCount="1" CanUserDeleteRows="False" CanUserInsertRows="False" GroupRenderMode="Flat" ShowGroupPanel="False" ClipboardPasteMode="Default" SelectionMode="Extended" SelectionUnit="Cell" >
 
<telerik:GridViewDataColumn Header="Data" DataMemberBinding="{Binding Date}" DataFormatString="{} {0:dd/MM/yyyy}" IsReorderable="False" IsSortable="False" IsFilterable="False" IsReadOnly="True" Width="80" />
 
<telerik:GridViewDataColumn Header="Flow" DataMemberBinding="{Binding Flow}" IsSortable="False" IsFilterable="False" IsReadOnly="True" Width="110" />

Now I want to color the row and bind it to property named UserInput (boolean) using converter like this:

internal class UserInputConveter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            var userInput = (bool)value;
 
            if (userInput)
                return new SolidColorBrush(Colors.GreenYellow);
 
            return new SolidColorBrush(Colors.Transparent);
        }
 
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

But it doesn't work. I tried:

1)

<telerik:RadGridView.RowStyle>
    <Style TargetType="telerik:GridViewRow">
        <Setter Property="Background" Value="{Binding UserInput,Converter={StaticResource UserInputConveter}}"></Setter>
    </Style>
</telerik:RadGridView.RowStyle>

Result: all my rows disappear!

2)

<telerik:GridViewDataColumn.CellStyle>
    <Style TargetType="telerik:GridViewCell">
        <Setter Property="Background" Value="{Binding Path=UserInput, Converter={StaticResource UserInputConveter}}"></Setter>
    </Style>
</telerik:GridViewDataColumn.CellStyle>

Result: my single cell disappear.

3)

<telerik:GridViewDataColumn Header="Flow" DataMemberBinding="{Binding Flow}" IsSortable="False" IsFilterable="False" IsReadOnly="True" Width="110" Background="{Binding Path=UserInput, Converter={StaticResource userInputConverter}}" />

OR

<telerik:GridViewColumn.Background>
    <SolidColorBrush Color="{Binding Path=UserInput, Converter={StaticResource userInputConverter}}" />
</telerik:GridViewColumn.Background>

Result: the color of cell is thedefault, no change.

Where is my error? How I can do it?

Thanks a lot.

4 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 08 Jul 2016, 11:51 AM
Hello Stefano,

The built-in mechanism for achieving such customization is through the RowStyleSelector functionality. Can you please check it out and let me know whether it corresponds to your needs?

Additionally, you can take a look at the StyleSelectors section of RadGridView's online demos. The same examples can be found in the local copy of the WPF Demos.

Best Regards,
Stefan X1
Telerik by Progress
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
0
Stefano
Top achievements
Rank 1
answered on 15 Jul 2016, 12:56 PM

Hi Stefan X1, thanks for answer.
I've tried with RowStyleSelector but it doesn't work.
I have:

  1. Create this class 
  2. public class UserInputStyleSelector : StyleSelector
        {
            public override Style SelectStyle(object item, DependencyObject container)
            {
                if (item is MyModel)
                {
                    var model = item as MyModel;
                    return model.UserInput
                        ? UserInputStule
                        : CalculatorStyle;
                }
                return null;
            }
            public Style UserInputStule { get; set; }
            public Style CalculatorStyle { get; set; }
        }

2. Added it to resources (my window is rad document pane) 

  1. <telerik:RadDocumentPane.Resources>
            ...
            <local:UserInputStyleSelector x:Key="userInputStyleSelector">
                <local:UserInputStyleSelector.UserInputStule>
                    <Style TargetType="telerik:GridViewRow">
                        <Setter Property="Background" Value="Red" />
                    </Style>
                </local:UserInputStyleSelector.UserInputStule>
                <local:UserInputStyleSelector.CalculatorStyle>
                    <Style TargetType="telerik:GridViewRow">
                        <Setter Property="Background" Value="Green" />
                    </Style>
                </local:UserInputStyleSelector.CalculatorStyle>
            </local:UserInputStyleSelector>
        </telerik:RadDocumentPane.Resources>

3. Add style to radgridview 

<telerik:RadGridView x:Name="dataGrid" ItemsSource="{Binding Model, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" AutoGenerateColumns="False" FrozenColumnCount="1" CanUserDeleteRows="False" CanUserInsertRows="False" GroupRenderMode="Flat" ShowGroupPanel="False" ClipboardPasteMode="Default" SelectionMode="Extended" SelectionUnit="Cell" RowStyleSelector="{StaticResource userInputStyleSelector}" >
        <telerik:RadGridView.Columns>
            <telerik:GridViewDataColumn Header="Date" DataMemberBinding="{Binding Date}" DataFormatString="{} {0:dd/MM/yyyy}" IsReorderable="False" IsSortable="False" IsFilterable="False" IsReadOnly="True" Width="80" />
            <telerik:GridViewDataColumn Header="Flow" DataMemberBinding="{Binding Flow}" IsSortable="False" IsFilterable="False" IsReadOnly="True" Width="110" />
        </telerik:RadGridView.Columns>
</telerik:RadGridView>

Result: my grid doesn't show any row, but data is presents.

Where is my error?

Thanks a lot!

 

 

0
Stefano
Top achievements
Rank 1
answered on 18 Jul 2016, 02:28 PM
Hi Stefan X1,

finally I've resolved problem; I've view the sample "Row Style Selectors" on WPF Demos, and I solved my problem.

Thanks for your advice.

Bye bye
0
Stefan
Telerik team
answered on 19 Jul 2016, 01:15 PM
Hi Stefano,

I am glad that the example helped you find a working solution.

Feel free to contact us in case you need any other assistance with our components.

Best Regards,
Stefan X1
Telerik by Progress
Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
Tags
GridView
Asked by
Stefano
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Stefano
Top achievements
Rank 1
Share this question
or