Custom grouping in the componentone Flexgrid

Custom grouping in the componentone Flexgrid

Posted by: rambabu on 9 August 2023, 9:10 am EST

• 

  rambabu

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 9 August 2023, 9:10 am EST - Updated 9 August 2023, 9:17 am EST

  Hello,
  
  I am looking to customize the component one flex grid grouping and customize the group header rows to achieve format similar to the following screenshot

  

  1799×216 26.8 KB

  Can you please provide any sample/documentation to implement this ?

• 

  aastha.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 9 August 2023, 5:42 pm EST

  Hi Rambabu,

  You can implement custom grouping in the flexgrid by creating custom converters and set them for the PropertyGroupDescriptions of the flexgrid’s collection view. Here is the code snippet for your reference:

  class CountryInitialConverter : IValueConverter
  {
      public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
      {
          return $"Country name starting with: {((string)value)[0].ToString().ToUpper()}";
      }
      public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
      {
          throw new NotImplementedException();
      }
  }

  You can refer to the following link for more information regarding the same: *https://www.grapecity.com/componentone/docs/wpf/online-flexgrid/CustomGroupConverters.html

  > customize the group header rows

  As per my understanding, you want to consolidate the data from the rows within a group into the columns of the group header row. This requirement can be achieved by setting the Aggregate property of the GridColumn as shown in the following line of code:

  <c1:GridColumn Binding="OrderCount" Width="*" Aggregate="Maximum" />

  Here is the reference link about Group aggregates feature in WPF flexgrid: *https://www.grapecity.com/componentone/docs/wpf/online-flexgrid/GroupTotal.html

  We have attached a sample application for your reference. Please check the “Grouping” tab in the application to check the behavior.

  FlexGridExplorer_Mod.zip

  Thanks & Regards,
  
  Aastha

• 

  rambabu

  • Post Options:
  • Link
    Copy

  Posted 11 August 2023, 6:06 am EST

  Hello Aastha,
  
  this is okay for editing the text content in the group header, but we need to add the framework elements like an icon in the aggregate column/ group header column.

  please let me know if that is possible.

  Thanks & Regards
  
  Teja Gudivada

• 

  aastha.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 14 August 2023, 6:37 am EST

  Hi Teja,

  You can show the icons in the cell content of the group row by overriding GridCellFactory’s CreateCellContent and GetCellContentType method as shown in the following code:

  public override object GetCellContentType(GridCellType cellType, GridCellRange range)
  {
      if (Grid.Rows[range.Row] is GridGroupRow groupRow && range.Column == 2 && cellType == GridCellType.Cell)
      {
          return typeof(StackPanel);
      }
      return base.GetCellContentType(cellType, range);
  }
  public override FrameworkElement CreateCellContent(GridCellType cellType, GridCellRange range, object cellContentType)
  {
      if (Grid.Rows[range.Row] is GridGroupRow groupRow && range.Column == 2 && cellType == GridCellType.Cell)
      {
          StackPanel stk = new StackPanel() { Orientation = Orientation.Horizontal };
          Image iconImage = new Image();
          Uri iconUri = new Uri("pack://application:,,,/Images/Album.png");
          iconImage.Source = new BitmapImage(iconUri); // Load image from Resources folder
          iconImage.Width = 15; // Set desired width
          iconImage.Height = 15; // Set desired height
          stk.Children.Add(iconImage);
          stk.Children.Add(new TextBlock() { Text = Grid[range.Row, range.Column].ToString() , Margin = new Thickness(5, 8, 5, 8)});
          return stk;
      }
      return base.CreateCellContent(cellType, range, cellContentType);
  }

  Kindly refer to the Grouping.xaml.cs file in the attached sample for full implementation. (GroupRowTemplate.zip)

  Thanks & Regards,
  
  Aastha

• 

  rambabu

  • Post Options:
  • Link
    Copy

  Posted 17 August 2023, 6:55 am EST

  Thank you Aastha for providing the solution