Change background color for child records in hierarchical grid?

Answered (Verified) This post has 1 verified answer | 10 Replies | 3 Followers Thread's RSS feed.

mhofer
Points 1,080
Replied On: Tue, Mar 17 2009 3:32 PM Reply

I'm currently doing a first project with xamDataGrid. I have a hierarchical data set bound to a xamDataGrid. When I expand a record, the child record  look the same as the parent records, which makes the screen a bit unclear (not so easy to distinguish between parent and child records at first view).

How can I change background color, foreground color and font for the child records?

Thanks in advance for any help.

  • Post Points: 20

Verified Answer

John Doe
Points 69,411
Infragistics Employee
Answered (Verified) Replied On: Fri, Mar 20 2009 5:36 AM Reply
Verified by mhofer

Hello Markus,

I have created a small sample project for you to see how to apply some styles. Hope this helps you.

Alex.

Sincerely,
Alex Fidanov
Developer Support Engineer
www.infragistics.com\support

  • Post Points: 40

All Replies

Answered (Not Verified) Replied On: Tue, Mar 17 2009 5:05 PM Reply

Hello,

You can set these properties in a Style for the DataRecordCellArea of the FieldLayout:

    <Grid>
        <Grid.Resources>
            <Style x:Key="style" TargetType="{x:Type igDP:DataRecordCellArea}">
                <Setter Property="Foreground" Value="Red"/>
                <Setter Property="Background" Value="Azure"/>
                <Setter Property="FontFamily" Value="Comic Sans MS"/>
            </Style>
        </Grid.Resources>
        <igDP:XamDataGrid Name="grid">
            <igDP:XamDataGrid.FieldLayouts>
                <igDP:FieldLayout Key="Parent">
                    <igDP:FieldLayout.Fields>
                        <igDP:Field Name="CustomerID"/>
                        <igDP:Field Name="FirstName"/>
                        <igDP:Field Name="LastName"/>
                        <igDP:Field Name="DateJoined"/>
                        <igDP:Field Name="IsActive"/>
                        <igDP:Field Name="Orders"/>
                    </igDP:FieldLayout.Fields>
                </igDP:FieldLayout>
                <igDP:FieldLayout Key="Child">
                    <igDP:FieldLayout.Settings>
                        <igDP:FieldLayoutSettings DataRecordCellAreaStyle="{StaticResource style}"/>
                    </igDP:FieldLayout.Settings>
                    <igDP:FieldLayout.Fields>
                        <igDP:Field Name="OrderID"/>
                        <igDP:Field Name="CustomerID"/>
                        <igDP:Field Name="OrderDate"/>
                    </igDP:FieldLayout.Fields>
                </igDP:FieldLayout>
            </igDP:XamDataGrid.FieldLayouts>
        </igDP:XamDataGrid>       
    </Grid>

Sincerely,
Aaron Marisi
Principal Product Developer
Infragistics, Inc.

  • Post Points: 20
mhofer
Points 1,080
Replied On: Wed, Mar 18 2009 9:47 AM Reply

Hi Aaron

Thanks for the answer. I see in your code how you do it using Xaml. In my case, the data comes from a database and there are no FieldLayout definitions in my Xaml code.

How can I do this in code?

 

  • Post Points: 20
John Doe
Points 69,411
Infragistics Employee
Replied On: Wed, Mar 18 2009 11:44 AM Reply

Hello,

You can create the style in code behind like this:
Style style = new Style(typeof(DataRecordCellArea));

Setter s1 = new Setter(DataRecordCellArea.BackgroundProperty, Brushes.Red);

Setter s2 = new Setter(DataRecordCellArea.ForegroundProperty, BrushesBlack);

...

style.Setters.Add(s1);

style.Setters.Add(s2);

...

and then set the Style. For example:

 xamDataGrid1.SetValue(DataRecordCellArea.StyleProperty,style;

Alex.

Sincerely,
Alex Fidanov
Developer Support Engineer
www.infragistics.com\support

  • Post Points: 20
mhofer
Points 1,080
Replied On: Wed, Mar 18 2009 12:27 PM Reply

Hi Alex

Thanks for the code. I've tried this out and have encountered two problems:

1) I get the following error message when the SetValue(.) statement is executed:

An unhandled exception of type 'System.InvalidOperationException' occurred in PresentationFramework.dll
Additional information: 'DataRecordCellArea' TargetType does not match type of element 'XamDataGrid'.

It seems that the value can not be applied to the xamDataGrid.

2) The code to set the style as suggested seems to change the appearance of all rows. I only want to change the appearance of the child rows. So I need to know how to distinguish between the different hierarchy levels and how to change the appearance according to the hierarchy level.

Any futher ideas?

 

  • Post Points: 20
John Doe
Points 69,411
Infragistics Employee
Replied On: Thu, Mar 19 2009 2:45 AM Reply

Hi,

What you are asking is FieldLayouts. There is collection in the xamDataGrid with the FieldLayouts. For example

FieldLayouts[0] - parent, first level;

FieldLayouts[1] - child, second level;

... etc.

Then get the DataRecordCellArea, CellValuePresenter, DataRecordPresenter and apply the style.

Alex.

Sincerely,
Alex Fidanov
Developer Support Engineer
www.infragistics.com\support

  • Post Points: 20
mhofer
Points 1,080
Replied On: Thu, Mar 19 2009 5:26 AM Reply

Hi Alex

Thanks for your help. Now I see how the FieldLayouts are mapped to the hierachies. Where I'm still struggling is how to access the DataRecordCellArea. I did not yet find a way to access it from the FieldLayout. I looked through all the properties and methods but could not find anything which provides me with the DataRecordCellArea.

Markus

 

  • Post Points: 20
John Doe
Points 69,411
Infragistics Employee
Replied On: Thu, Mar 19 2009 9:40 AM Reply

Hello Markus,

You can use CellValuePresenter or the DataRecordPresenter instead. You can get references to them from the methods of their static classes.

CellValuePresenter.FromCell();

CellValuePresenter.FromRecordAndField();

...

Alex.

Sincerely,
Alex Fidanov
Developer Support Engineer
www.infragistics.com\support

  • Post Points: 20
mhofer
Points 1,080
Replied On: Fri, Mar 20 2009 5:07 AM Reply

Hi Alex

Thanks again for your help. But I have still problems to put all pieces together.

You suggested to look at the Layout of the grid. The Index of the Layout determines the hierarchy level. So the idea was to change the style to the corresponding layout.

CellValuePresenter.FromRecordAndField(DataRecord record, Field field) works on a per record base. So if I understand you right, the style has to be set for each cell.

 

Markus

  • Post Points: 20
John Doe
Points 69,411
Infragistics Employee
Answered (Verified) Replied On: Fri, Mar 20 2009 5:36 AM Reply
Verified by mhofer

Hello Markus,

I have created a small sample project for you to see how to apply some styles. Hope this helps you.

Alex.

Sincerely,
Alex Fidanov
Developer Support Engineer
www.infragistics.com\support

  • Post Points: 40
mhofer
Points 1,080
Replied On: Tue, Mar 24 2009 4:05 PM Reply

Hi Alex

Thank you very much for the sample project! I've integrated you approach in my application and it works fine. Here a short summary of Alex's solution:

1. define a style as a resource in the xaml file. In my case the xaml file is for a UserControl.

  <UserControl.Resources>
        <Style x:Key="LayoutIdx1Style" TargetType="{x:Type igDP:DataRecordCellArea}">
            <Setter Property="Foreground" Value="Red"/>
            <Setter Property="Background" Value="Silver"/>
            <Setter Property="FontFamily" Value="Comic Sans MS"/>
        </Style>
        ......

2. in the code behind file create a style from the resource and use it as DataRecordCellAreaStyle. In my case I set the style of the second level ( FieldLayouts[1] ) of the hierarchical grid. 

Style s = FindResource("LayoutIdx1Style") as Style;
Grid.FieldLayouts[1].Settings.DataRecordCellAreaStyle = testStyle;

 

2b. Instead of using a resource, it's also possible to create a style as follows:

Style MyStyle= new Style(typeof(DataRecordCellArea));
MyStyle.Setters.Add(new Setter(DataRecordCellArea.BackgroundProperty, Brushes.Red));
MyStyle.Setters.Add(new Setter(DataRecordCellArea.ForegroundProperty, Brushes.Black););

Grid.FieldLayouts[1].Settings.DataRecordCellAreaStyle = MyStyle;

  • Post Points: 5
Page 1 of 1 (11 items) | RSS