RadGridView background color

5 posts, 0 answers
  1. Stefano
    Stefano avatar
    4 posts
    Member since:
    Oct 2013

    Posted 05 Jul Link to this post

    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.

  2. Stefan X1
    Admin
    Stefan X1 avatar
    518 posts

    Posted 08 Jul Link to this post

    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.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Stefano
    Stefano avatar
    4 posts
    Member since:
    Oct 2013

    Posted 15 Jul in reply to Stefan X1 Link to this post

    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!

     

     

  5. Stefano
    Stefano avatar
    4 posts
    Member since:
    Oct 2013

    Posted 18 Jul Link to this post

    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
  6. Stefan X1
    Admin
    Stefan X1 avatar
    518 posts

    Posted 19 Jul Link to this post

    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.
Back to Top
UI for WPF is Visual Studio 2017 Ready