GridStackedHeaderCell Style binding properties

[George Sterg]

I have a grid with some StackedHeaders. Everything is created on code behind.  using your how- to (http://www.syncfusion.com/kb/2509/how-to-insert-combobox-in-stackedheader) I have a style in app.xaml:

<Style x:Key="stackedHeaderCell"
               TargetType="syncfusion:GridStackedHeaderCellControl">
           
            <Setter Property="BorderThickness"
                    Value="0,0,3,1" />
            <Setter Property="HorizontalContentAlignment"
                    Value="Center" />
            <Setter Property="VerticalContentAlignment"
                    Value="Center" />
            <Setter Property="Padding"
                    Value="0,0,0,0" />
            <Setter Property="IsTabStop"
                    Value="False" />
            <Setter Property="FontWeight"
                    Value="Bold" />
        </Style>

And i use this code:

            gridView.CellRenderers.Remove("StackedHeader");
            gridView.CellRenderers.Add("StackedHeader", new GridStackedHeaderCellRendererExt());

and  the new class is:

public class GridStackedHeaderCellRendererExt : GridStackedHeaderCellRenderer
    {
        // override the OnInitializeEditElement
        public override void OnInitializeEditElement(
                                            Syncfusion.UI.Xaml.ScrollAxis.RowColumnIndex rowColumnIndex,
                                            GridStackedHeaderCellControl uiElement, GridColumn column, object dataContext)
        {
            var colum = (dataContext as StackedColumn);
            // Apply the custom style for Customer Details StackedHeader
            var style = App.Current.Resources["stackedHeaderCell"] as Style;
            uiElement.Style = style;

            base.OnInitializeEditElement(rowColumnIndex, uiElement, column, dataContext);
        }
    }

I have multiple pages with viewmodels and i want to bind some properties of the style  for each page i have eg background and foreground in order to change themes . so i created a new style like this for every page i have:

<Style x:Key="stackedHeaderCellPage1"
                   TargetType="syncfusion:GridStackedHeaderCellControl"
                   BasedOn="{StaticResource stackedHeaderCell}">
            <Setter Property="Background"
                    Value="{Binding DataContext.StackedHeaderRowBackgroundColor}" />
            <Setter Property="Foreground"
                    Value="{Binding DataContext.StackedHeaderRowForegroundColor}" />         
        </Style>

I edited the code in OnInitializeEditElement to this with no result:

WinStart window = (WinStart)Application.Current.MainWindow;
Style newStyle = (window.MainViewPage.Content as PageMainView).Resources["stackedHeaderCellMainView"] as Style;
uiElement.Style = newStyle ;

How can i have bind properties in my style?

I'm using the 12.1450.0.43 version

Thank you

George

[Jayapradha S]

Hi George,

Thank you for using Syncfusion products.

We have analyzed your query and found that you have tried to change the background and foreground based on property in ViewModel. For StackedHeaderCellControl, DataContext won’t be a ViewModel class, hence the binding is not working for you. You can change the binding as shown in below code snippet,

Code Snippet:

      <Style x:Key="stackedHeaderCellPage1"

                   TargetType="syncfusion:GridStackedHeaderCellControl"

                   BasedOn="{StaticResource stackedHeaderCell}">

            <Setter Property="Background"

                    Value="{Binding DataContext.StackedHeaderRowBackgroundColor,RelativeSource={RelativeSource AncestorType=syncfusion:SfDataGrid}}" />

            <Setter Property="Foreground"

                    Value="{Binding DataContext.StackedHeaderRowForegroundColor,RelativeSource={RelativeSource AncestorType=syncfusion:SfDataGrid}}" />

        </Style>

Please let us know if you require any further assistance.

With Regards,

Jayapradha