RadGridView : Modify row background color

[Zvi]

Hello,

I'm using version: 2016.1.217

How can I modify background color \ foreground color of a specified row ?

Binding is not mandatory in this case. 

Thank you,

Zvika 

[Ras Ran]

how to change wpf RadGridView cell value by row index ?

[Dinko | Tech Support Engineer]

Hello ranees,

I am not entirely sure what you are trying to achieve here. As the RadGridView control can be bound to a collection of business objects, you can consider changing the property which the column is populated with. You can do this, for example, when the collection is filled.

If I have understood you wrong, may I ask you to elaborate more on your approach? What exactly you are trying to achieve here?

Regards,
Dinko
Progress Telerik

[Ras Ran]

hii i have a GridViewDataColumn in my RadGridView...when i change it's value..the entire row value will be changed...so i have used a method by setting ItemsSource  continuously.... is there any another method to change cell value by row by row.....here is my code....please let me if any simple method you have

 

<telerik:GridViewDataColumn FooterTextAlignment="Center" TextWrapping="Wrap" IsFilterable="False" IsGroupable="False" TextAlignment="Center"   CellStyle="{StaticResource GridViewCellStyle}" Header="Qty"  UniqueName="Qty"  DataMemberBinding="{Binding Qty, Mode=TwoWay, StringFormat=N2}" Width="90" >

     <telerik:GridViewDataColumn.AggregateFunctions>
                 <telerik:SumFunction  SourceField="Qty">
                 </telerik:SumFunction>
    </telerik:GridViewDataColumn.AggregateFunctions>
                 <telerik:GridViewDataColumn.CellEditTemplate>
                     <DataTemplate>
                      <TextBox Height="Auto" Width="Auto"  x:Name="txtReturnQty"  Background="White"
                        TextAlignment="Right" Text="{Binding Qty,StringFormat=N2}"
                       LostFocus="txtReturnQty_LostFocus" PreviewTextInput="txt_PreviewTextInput" />
                    </DataTemplate>
                  </telerik:GridViewDataColumn.CellEditTemplate>
</telerik:GridViewDataColumn>

-----------------------------------------------------------------------------------

private void txtReturnQty_LostFocus(object sender, RoutedEventArgs e)
        {
            TextBox txt = (TextBox)sender;
            if (txt.Text != null)
            {
                if (txt.Text.Length < 1 || txt.Text == "0")
                {
                    txt.Text = "1";
                }
                dynamic oMenuItems = txt.DataContext;
                decimal Qty = 0;
                decimal.TryParse(txt.Text, out Qty);
                SalesReturnItems oMenu = SalesReturnList.Where(x => x.ItemID == oMenuItems.ItemID && x.SlNo ==
                oMenuItems.SlNo).FirstOrDefault();
                if (oMenu != null)
                {
                    dgvReturn.ItemsSource = null;
                    oMenu.Qty = Qty;

                    //dgvItems.Items.Remove(oMenu);
                    GridCalculationReturn(oMenu);
                    //dgvItems2.Items.EditItem(oMenu);
                    //dgvItems2.Items.Refresh();
                    dgvReturn.ItemsSource = SalesReturnList;
                }
            }
        }

[Ras Ran]

please let me know if any simple method you have

[Dinko | Tech Support Engineer]

Hello ranees,

Thank you for the provided code snippet.

Looking at the snippet, I am assuming that you want to change the value of a cell when the editing process ends. In this case, you can consider using the CellEditEnded event of the RadGridView instead of LostFocus of the TextBox inside. Inside the event handler, you can get the newly entered data and change it depending on the input. 

I have modified the project from my previous reply to demonstrate this approach.

Regards,
Dinko
Progress Telerik

[Ras Ran]

Thank you Dinko its worked perfectly....i have one more doubt....i am using RadMultiCombobox  as GridViewColumn CellTemplate...in this case i want to fill RadGridView rows based on RadMultiCombobox selected  items...can you please give me sample project related to this...CellEditEnded does not work in this case....how does it work by using SelectedChanged event....

<telerik:GridViewColumn Width="300"   UniqueName="ItemCode" Header="Item Code">
   <telerik:GridViewColumn.CellTemplate>

     <DataTemplate>
      <telerik:RadMultiColumnComboBox  FontSize="15" telerik:StyleManager.Theme="Summer"
        BorderThickness="0" Width="Auto"  Height="45"   AutoCompleteMode="Search" Tag="{Binding product_Id,Source=
        {StaticResource ItemCodeList}}"
        SelectedValuePath="product_Id"  DropDownWidth="400" DisplayMemberPath="product_code"
        SelectionChanged="RadMultiColumnComboBox_SelectionChanged" SelectedValue="{Binding TempItemId,
        Mode=TwoWay}"  CloseDropDownAfterSelectionInput="True"
        GotFocus="RadMultiColumnComboBox_GotFocus" LostFocus="RadMultiColumnComboBox_LostFocus_2"
        Foreground="Black" >

    <telerik:RadMultiColumnComboBox.ItemsSourceProvider>
     <telerik:GridViewItemsSourceProvider ItemsSource="{StaticResource ItemCodeList}">

      </telerik:GridViewItemsSourceProvider>

       </telerik:RadMultiColumnComboBox.ItemsSourceProvider>
        </telerik:RadMultiColumnComboBox>
         </DataTemplate>
      </telerik:GridViewColumn.CellTemplate>
      </telerik:GridViewColumn>

Regards,
Ranees

[Dinko | Tech Support Engineer]

Hi ranees,

Looking at the provided image, the RadMultiColumnComboBox control is placed inside CellTemplate. I am happy to inform you that the RadGridView control exposes a MultiColumnComboBox Column. You can use this column instead of putting the control inside CellTemplate. You can get familiar with this column in its help article.

Give this column a try and let me know if further questions arise.

Regards,
Dinko
Progress Telerik

[Ras Ran]

how to set MultiColumnComboBox Column item source by using DataTable or List

[Ras Ran]

hii Dinko....i have done that by using ObservableCollection....but when i am trying to bind around 10000 records into MultiColumnComboBox...its getting very slow...can't even access MultiColumnComboBox Column  properly because of slow ....

[Dinko | Tech Support Engineer]

Hello ranees,

You can try to limit the height of the GridViewMultiColumnComboBoxColumn dropdown content. You can do this by setting the DropDownMaxHeight property of the GridViewMultiColumnComboBoxColumn to 325 for example.

Regards,
Dinko
Progress Telerik

[Ras Ran]

hiii is it possible to change RadGridView search panel "Full Text Search"  ?

Regards,

Ranees

[Dinko | Tech Support Engineer]

Hello ranees,

You can use a custom Localization manager to return a different string. You can check the Localization Using Custom Localization Manager section in our documentation for this purpose.

Regards,
Dinko
Progress Telerik

[Ras Ran]

hii...please check the attached pic....i have enabled  RadGridView GroupFooters but its showing in wrong....is there any way to solve this ? need your help...

<telerik:RadGridView FontSize="15"
            BorderThickness="0,0,0,0" GridLinesVisibility="Both"
            GroupRenderMode="Flat"
            LeftFrozenColumnCount="0"
            x:Name="DgvTrialBalance"
            ScrollViewer.PanningMode="Both"
            RowIndicatorVisibility="Collapsed"
            VerticalAlignment="Top"
            FilteringMode="Popup"
            Height="767" SelectionUnit="Cell"
            ShowGroupFooters="True"
            ShowColumnFooters="True"
            AutoGenerateColumns="False"
            CanUserSortColumns="False"
            CanUserFreezeColumns="False"
            ShowGroupPanel="False"
            CanUserResizeColumns="True"
            CanUserResizeRows="True"
            HorizontalAlignment="Left" Width="1390"
            Margin="5,91,0,0" AlternateRowBackground="White" telerik:StyleManager.Theme="Vista" AutoExpandGroups="True"

            RowStyle="{StaticResource GridViewRowStyle2}" Background="White"

            >
            <telerik:RadGridView.Columns>

                <!--<telerik:GridViewCheckBoxColumn AutoSelectOnEdit="True"  DataMemberBinding="{Binding Check}" Width="50"  UniqueName="clmCheck123" />-->
                <telerik:GridViewDataColumn TextAlignment="Left" IsFilterable="False" IsGroupable="False" IsReadOnly="True"  DataMemberBinding="{Binding SN, Mode=TwoWay}"  CellStyle="{StaticResource GridViewCellStyle}"   Width="50" Header="S.No" UniqueName="SN"/>
                <telerik:GridViewDataColumn TextAlignment="Left" IsFilterable="False" IsGroupable="False" IsReadOnly="True"  DataMemberBinding="{Binding type, Mode=TwoWay}" IsVisible="False"  CellStyle="{StaticResource GridViewCellStyle}"    Width="300" Header="Type" UniqueName="type"/>
                <telerik:GridViewDataColumn TextAlignment="Left" IsFilterable="False" IsGroupable="False" IsReadOnly="True"  DataMemberBinding="{Binding LedgerName, Mode=TwoWay}"  CellStyle="{StaticResource GridViewCellStyle1}"    Width="800" Header="Ledger Name" UniqueName="LedgerName"/>
                <telerik:GridViewDataColumn TextAlignment="Left" IsFilterable="False" IsGroupable="False" IsReadOnly="True"  DataMemberBinding="{Binding GroupType, Mode=TwoWay}" IsVisible="False"   CellStyle="{StaticResource GridViewCellStyle1}"    Width="800" Header="GroupType" UniqueName="GroupType"/>
                <telerik:GridViewDataColumn TextAlignment="Left" IsFilterable="False" IsGroupable="False" IsReadOnly="True"  DataMemberBinding="{Binding GroupName, Mode=TwoWay}" IsVisible="False"  CellStyle="{StaticResource GridViewCellStyle1}"    Width="800" Header="GroupName" UniqueName="GroupName"/>
                <telerik:GridViewDataColumn TextAlignment="Left" IsFilterable="False" IsGroupable="False" IsReadOnly="True"  DataMemberBinding="{Binding LedgerGroup, Mode=TwoWay}"  CellStyle="{StaticResource GridViewCellStyle1}"    Width="800" Header="Ledger Group" UniqueName="LedgerGroup"/>
                <telerik:GridViewDataColumn FooterTextAlignment="Right" TextAlignment="Right" IsFilterable="False" IsGroupable="False" IsReadOnly="True"  DataMemberBinding="{Binding Debit, Mode=TwoWay}"  CellStyle="{StaticResource GridViewCellStyle}"    Width="250" Header="Debit" UniqueName="Debit">
                    <telerik:GridViewDataColumn.AggregateFunctions>
                        <telerik:SumFunction  SourceField="TotalDebit">
                        </telerik:SumFunction>
                    </telerik:GridViewDataColumn.AggregateFunctions>
                </telerik:GridViewDataColumn>

                <telerik:GridViewDataColumn FooterTextAlignment="Right" TextAlignment="Right" IsFilterable="False" IsGroupable="False" IsReadOnly="True"  DataMemberBinding="{Binding Credit, Mode=TwoWay}"  CellStyle="{StaticResource GridViewCellStyle}"    Width="250" Header="Credit" UniqueName="Credit">
                    <telerik:GridViewDataColumn.AggregateFunctions>
                        <telerik:SumFunction  SourceField="TotalCredit">
                        </telerik:SumFunction>
                    </telerik:GridViewDataColumn.AggregateFunctions>
                </telerik:GridViewDataColumn>
            </telerik:RadGridView.Columns>

        </telerik:RadGridView>

Code

           this.DgvTrialBalance.ShowGroupPanel = false;

           GroupDescriptor descriptor = new GroupDescriptor();
           descriptor.Member = "GroupType";
           descriptor.SortDirection = ListSortDirection.Ascending;
           this.DgvTrialBalance.GroupDescriptors.Add(descriptor);

           GroupDescriptor descriptor1 = new GroupDescriptor();
           descriptor1.Member = "GroupName";
           descriptor1.SortDirection = ListSortDirection.Ascending;
           this.DgvTrialBalance.GroupDescriptors.Add(descriptor1);

[Vladimir Stoyanov]

Hello,

Thank you for the provided picture. 

If you don't want the aggregates to be displayed in the GroupHeaderRow, you can set its ShowHeaderAggregates property to False as demonstrated in Example 7 in the following article: Group Aggregates. 

On a side note, I would ask you to open new forum threads when you have questions that deviate from the original topic of the thread. This will allow us to track our conversations more easily. Thank you in advance for your cooperation on the matter. 

Regards,
Vladimir Stoyanov
Progress Telerik

[Ras Ran]

thank you Vladimir Stoyanov for the reply.....its worked well 

[Maurice]

Is this what you need - https://docs.telerik.com/devtools/wpf/controls/radgridview/styles-and-templates/styling-a-row

If you want to style conditionally, you can look here - https://docs.telerik.com/devtools/wpf/controls/radgridview/style-selectors/rowstyleselector

 

Regards,
Maurice

[Zvi]

Thank you for your reply.

Upon telemetry data, I want to change the background of a specified row or (for example) make the text of a specified row bold.  

This row is not necessarily the selected one. 

After doing that, the user can select (with mouse) other rows. 

Is it possible ?

Best regards,

Zvika 

[Maurice]

Hi Zvika,

Something like this should do what you are after. You might want to use a behaviour and Style Selector so it is more reusable (and esp if you are using MVVM) but this should get you in the right direction using code behind. There is a simple Task.Wait to simulate your Telemetry response delay in the code behind.

Below is a full working example, unfortunately, I can't upload a zip of it, so I will paste without line numbers and label each file.

MainWindow.xaml

<Window x:Class="TelerikWpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        xmlns:local="clr-namespace:TelerikWpfApp1"
        Title="MainWindow" Height="350" Width="525">

  <Window.DataContext>
    <local:MainWindowViewModel />
  </Window.DataContext>

  <Window.Resources>
    <Style x:Key="BoldRowStyle" TargetType="telerik:GridViewRow" BasedOn="{StaticResource GridViewRowStyle}">
      <Setter Property="FontWeight" Value="Bold" />
    </Style>
  </Window.Resources>

  <Grid>
    <telerik:RadGridView Grid.Row="0" ShowGroupPanel="False" NewRowPosition="Top" ItemsSource="{Binding Rows}" Loaded="RadGridView_Loaded">
    </telerik:RadGridView>
  </Grid>
</Window>

 

MainWindow.xaml.cs

using System.Linq;
using System.Threading.Tasks;
using System.Windows;

using Telerik.Windows.Controls;
using Telerik.Windows.Controls.GridView;

namespace TelerikWpfApp1
{
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
    }

    private void RadGridView_Loaded(object sender, RoutedEventArgs e)
    {
      Task.Run(() =>
      {
        Task.Delay(5000).Wait();
        Dispatcher.Invoke(() =>
        {
          var row = (sender as RadGridView)
                      .ChildrenOfType<GridViewRow>()
                      .Where(x => !(x is GridViewNewRow))
                      .FirstOrDefault(x => ((TestRow)x.DataContext).Number == 4);

          row.Style = (Style)FindResource("BoldRowStyle");

        });
      });
    }
  }
}

 

MainWindowViewModel.cs

using System;

using System.Collections.ObjectModel;

using System.ComponentModel.DataAnnotations;

 

using Telerik.Windows.Controls;

 

namespace TelerikWpfApp1

{

  public class MainWindowViewModel : ViewModelBase

  {

    public ObservableCollection<TestRow> Rows { get; } = new ObservableCollection<TestRow>()

    {

      new TestRow { Text = "One", Number = 1, Date = DateTime.Today },

      new TestRow { Text = "Two", Number = 2, Date = DateTime.Today },

      new TestRow { Text = "Three", Number = 3, Date = DateTime.Today },

      new TestRow { Text = "Four", Number = 4, Date = DateTime.Today },

      new TestRow { Text = "Fix", Number = 5, Date = DateTime.Today },

      new TestRow { Text = "Six", Number = 6, Date = DateTime.Today }

    };

  }

 

  public class TestRow

  {

    public string Text { get; set; }

 

    public int? Number { get; set; }

 

    [DisplayFormat(DataFormatString = "d")]

    public DateTime? Date { get; set; }

  }

}

 

Hope that helps,
Maurice

[Maurice]

I have thrown together a quick sample to illustrate what you are trying to achieve. Note, if you are using MVVM you would be best to use a and a style selector, which would also work for a code-behind approach but make it more re-usable.

MainWindow.xaml

<Window x:Class="TelerikWpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        xmlns:local="clr-namespace:TelerikWpfApp1"
        Title="MainWindow" Height="350" Width="525">

  <Window.DataContext>
    <local:MainWindowViewModel />
  </Window.DataContext>

  <Window.Resources>
    <Style x:Key="BoldRowStyle" TargetType="telerik:GridViewRow" BasedOn="{StaticResource GridViewRowStyle}">
      <Setter Property="FontWeight" Value="Bold" />
    </Style>
  </Window.Resources>

  <Grid>
    <telerik:RadGridView Grid.Row="0" ShowGroupPanel="False" NewRowPosition="Top" ItemsSource="{Binding Rows}" Loaded="RadGridView_Loaded">
      <i:Interaction.Behaviors>
      </i:Interaction.Behaviors>
    </telerik:RadGridView>
  </Grid>
</Window>

MainWindow.xaml.cs

using System.Linq;
using System.Threading.Tasks;
using System.Windows;

using Telerik.Windows.Controls;
using Telerik.Windows.Controls.GridView;

namespace TelerikWpfApp1
{
  public partial class MainWindow : Window
  {
    public MainWindow()
    {
      InitializeComponent();
    }

    private void RadGridView_Loaded(object sender, RoutedEventArgs e)
    {
      // simulate Telemetry delay
      Task.Run(() =>
      {
        Task.Delay(5000).Wait();
        Dispatcher.Invoke(() =>
        {
          var row = (sender as RadGridView)
                      .ChildrenOfType<GridViewRow>()
                      .Where(x => !(x is GridViewNewRow))
                      .FirstOrDefault(x => ((TestRow)x.DataContext).Number == 4);

          row.Style = (Style)FindResource("BoldRowStyle");

        });
      });
    }
  }
}

MainWindowViewModel.cs

using System;
using System.Collections.ObjectModel;
using System.ComponentModel.DataAnnotations;

using Telerik.Windows.Controls;

namespace TelerikWpfApp1
{
  public class MainWindowViewModel : ViewModelBase
  {
    public ObservableCollection<TestRow> Rows { get; } = new ObservableCollection<TestRow>()
    {
      new TestRow { Text = "One", Number = 1, Date = DateTime.Today },
      new TestRow { Text = "Two", Number = 2, Date = DateTime.Today },
      new TestRow { Text = "Three", Number = 3, Date = DateTime.Today },
      new TestRow { Text = "Four", Number = 4, Date = DateTime.Today },
      new TestRow { Text = "Fix", Number = 5, Date = DateTime.Today },
      new TestRow { Text = "Six", Number = 6, Date = DateTime.Today }
    };
  }

  public class TestRow
  {
    public string Text { get; set; }

    public int? Number { get; set; }

    [DisplayFormat(DataFormatString = "d")]
    public DateTime? Date { get; set; }
  }
}

Hope that helps,
Maurice

 

[Maurice]

I have thrown together a quick sample to illustrate what you are trying to achieve. Note, if you are using MVVM you would be best to use a  and a style selector, which would also work for a code-behind approach but make it more re-usable.

MainWindow.xaml
<Window x:Class="TelerikWpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        xmlns:local="clr-namespace:TelerikWpfApp1"
        Title="MainWindow" Height="350" Width="525">

  <Window.DataContext>
    <local:MainWindowViewModel />
  </Window.DataContext>

  <Window.Resources>
    <Style x:Key="BoldRowStyle" TargetType="telerik:GridViewRow" BasedOn="{StaticResource GridViewRowStyle}">
      <Setter Property="FontWeight" Value="Bold" />
    </Style>
  </Window.Resources>

  <Grid>
    <telerik:RadGridView Grid.Row="0" ShowGroupPanel="False" NewRowPosition="Top" ItemsSource="{Binding Rows}" Loaded="RadGridView_Loaded">
      <i:Interaction.Behaviors>
      </i:Interaction.Behaviors>
    </telerik:RadGridView>
  </Grid>
</Window>

MainWindow.xaml.cs
using System.Linq;
using System.Threading.Tasks;
using System.Windows;

using Telerik.Windows.Controls;
using Telerik.Windows.Controls.GridView;

namespace TelerikWpfApp1
{
  public partial class  Window
  {
    public MainWindow()
    {
      InitializeComponent();
    }

    private void RadGridView_Loaded(object sender, RoutedEventArgs e)
    {
      // simulate Telemetry delay
      Task.Run(() =>
      {
        Task.Delay(5000).Wait();
        Dispatcher.Invoke(() =>
        {
          var row = (sender as RadGridView)
                      .ChildrenOfType<GridViewRow>()
                      .Where(x => !(x is GridViewNewRow))
                      .FirstOrDefault(x => ((TestRow)x.DataContext).Number == 4);

          row.Style = (Style)FindResource("BoldRowStyle");

        });
      });
    }
  }
}

MainWindowViewModel.cs
using System;
using System.Collections.ObjectModel;
using System.ComponentModel.DataAnnotations;

using Telerik.Windows.Controls;

namespace TelerikWpfApp1
{
  public class MainWindowViewModel : ViewModelBase
  {
    public ObservableCollection<TestRow> Rows { get; } = new ObservableCollection<TestRow>()
    {
      new TestRow { Text = "One", Number = 1, Date = DateTime.Today },
      new TestRow { Text = "Two", Number = 2, Date = DateTime.Today },
      new TestRow { Text = "Three", Number = 3, Date = DateTime.Today },
      new TestRow { Text = "Four", Number = 4, Date = DateTime.Today },
      new TestRow { Text = "Fix", Number = 5, Date = DateTime.Today },
      new TestRow { Text = "Six", Number = 6, Date = DateTime.Today }
    };
  }

  public class TestRow
  {
    public string Text { get; set; }

    public int? Number { get; set; }

    [DisplayFormat(DataFormatString = "d")]
    public DateTime? Date { get; set; }
  }
}

Hope that helps,
Maurice

[Maurice]

Sorry about multiple replies, the forum was giving 500's and a reload didn't show the others were successful. Maybe an admin can clean it up, the first reply is all that is needed.

Maurice

[Dinko | Tech Support Engineer]

Hi,

You can use implicit style Targeting GridViewRow or RowStyleSelector as suggested Maurice in his first reply. In MVVM scenario you can create implicit style and bind the Background/Foreground property to a property from your model with the desired color.

The sample project attached to this reply, demonstrate this approach.

P.S. I have removed the duplicate email.

Regards,
Dinko
Progress Telerik

[Zvi]

Hello,

Thank you very much for your help.

Best regards,

Zvika