How can we display the percentage values in the Value Cell Block using ValueCellStyle in OlapGrid Control
It is possible to show the values of the OlapGrid in the form of Percentage. This can be achieved by customizing the Value Cells of the OlapGrid using ValueCellStyle. A style for each value cell has been added which uses a converter to convert the values of the OlapGrid as a Percentage values and this style has been applied to all value cells in the OlapGrid Control.
- Add a “Button” in the Designer page to Apply or Remove the Percentage values in the OlapGrid.
- Add the below style in MainPage.xaml and Converter to convert as Percentage values in MainPage.xaml.cs.
XAML
<UserControl.Resources>
<local:PercentageConverter x:Key="percentConverter"></local:PercentageConverter>
<Style x:Key="valueCellStyle" TargetType="syncfusion:OlapGridTemplateCell">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="syncfusion:OlapGridTemplateCell">
<StackPanel Orientation="Horizontal">
<TextBlock Grid.Column="1" Margin="3,4,4,0"
Text="{Binding Converter={StaticResource percentConverter}}"
TextWrapping="Wrap" HorizontalAlignment="Center"
VerticalAlignment="Center" FontFamily="Calibri" FontSize="12"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
C#
public class PercentageConverter : IValueConverter { #region IValueConverter Members
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { PivotCellDescriptor cellInfo = value as PivotCellDescriptor; if (cellInfo != null) { if (total == 0d) { //find whole total for the table. var lastPivot = cellInfo.Engine.TableColumns.Last(); total = lastPivot.Cells.Last().DoubleValue; }
var percentage = cellInfo.DoubleValue * 100d / total; return string.Format("{0}%", Math.Round(percentage, 2)); }
return string.Format("{0}%", total); }
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException(); }
#endregion } |
- Add the below code snippet in the button click event for adding and removing the Percentage style.
C#
private void Button_Click(object sender, RoutedEventArgs e) { ToggleButton tgle = sender as ToggleButton; if (tgle.IsChecked.HasValue && tgle.IsChecked.Value) { tgle.Content = "Remove Percentage Style"; this.olapGrid.ValueCellStyle = new OlapGridCellStyle { Style = this.Resources["valueCellStyle"] as Style, Background = new SolidColorBrush(Colors.Red), Foreground = new SolidColorBrush(Colors.White) }; this.olapGrid.DataBind(); //Changing the data context instead applying only styles } else { tgle.Content = "Apply Percentage Style"; this.olapGrid.ValueCellStyle = new OlapGridCellStyle() { Style = null, Background = new SolidColorBrush(Colors.Red), Foreground = new SolidColorBrush(Colors.White) }; this.olapGrid.DataBind(); } } |
Figure: OlapGrid with Percentage style for Value cells
Figure: OlapGrid without Percentage style for Value cells
