Hello,
I am using xamDataGrid and it does a great job. At the moment I try to optimize the userexperience and make the GUI as clear as possible.
The xamDataGrid shows a list of employees, where the Background of the name is datadriven. When I select one or multiple rows I would like to set the background of the selected rows in a different color. It seems that the Background has a higher priority - it always wins. The background of a selected row in the column RESSOURCEN_NAME is correct when the mouse is over that cell. All other columns work as expected - the don't have additional color settings.
It would be great if there is a way to achive this - or alternativly to show a thick border in a different color on all selected rows.
Thanks
Niko
<igDP:XamDataGrid.Resources> <Style TargetType="{x:Type igDP:DataRecordCellArea }" x:Key="HighlightSelection"> <Setter Property="BackgroundActive" Value="#0CA80E" /> <Setter Property="BackgroundSelected" Value="#0CA80E" /> </Style> </igDP:XamDataGrid.Resources>
<igDP:Field Label="Ressource" Name="RESSOURCEN_NAME" AllowEdit="False"> <igDP:Field.Settings> <igDP:FieldSettings> <igDP:FieldSettings.CellValuePresenterStyle> <Style TargetType="{x:Type igDP:CellValuePresenter}"> <!-- There is no difference if I keep the next two lines or not --> <Setter Property="BackgroundActive" Value="#0CA80E" /> <Setter Property="BackgroundSelected" Value="#0CA80E" /> <Setter Property="FontStyle" Value="{Binding DataItem.RessourcenFontStyle}" /> <Setter Property="Background" Value="{Binding DataItem.Color}" /> </Style> </igDP:FieldSettings.CellValuePresenterStyle> </igDP:FieldSettings> </igDP:Field.Settings> </igDP:Field>
Hello Nikolaus,
Thank you for your post.
The style targeting the DataRecordCellArea type will be applied to the rows only if the CellClickAction is set to SelectRecord or if you select records using the record selector on the left side of the xamDataGrid. Also you have to remove the x:Key property.
On the other hand the style targeting the CellValuePresenter type will be applied on the cells under the specific field only and more specific their “BackgroundActive” and “BackgroundSelected” properties will be applied only if you have the CellClickAction set to SelectCell, otherwise cells do not get “selected” at all.
If I understand you correctly you want to have a record selection (not cell selection only) so I made a sample for you showing how to configure the xamDataGrid to show modified selection colors when record selection is enabled. Also the data driven background colorization is still present.
Please do not hesitate to let me know if you have any further questions on this matter.
Sincerely,
Radko Kolev
Infragistics Inc.
www.infragistics.com/support
Hello Radko,
thanks for the example. This is functionality I have in place as well.
What I try to achive is clearity - the user should always know which records are selected.
<igDP:XamDataGrid.Resources> <Style TargetType="{x:Type igDP:DataRecordCellArea }" > <Setter Property="BackgroundActive" Value="#0CA80E" /> <Setter Property="BackgroundSelected" Value="#0CA80E" /> </Style> </igDP:XamDataGrid.Resources>
<igDP:XamDataGrid.FieldLayoutSettings> <igDP:FieldLayoutSettings AutoGenerateFields="False" AllowAddNew="False" AllowDelete="False" DataRecordCellAreaStyle="{StaticResource HighlightSelection}" AutoFitMode="ExtendLastField" HeaderPrefixAreaDisplayMode="FieldChooserButton" RecordSelectorLocation="Default"/> </igDP:XamDataGrid.FieldLayoutSettings>
Option 1: Make a thick border arrond each selected item. This is still my favorite because I can remove the highlighted background and reduce the number of colors in the GUI.
Option 2: Show the selector on the left side for all selected items.
Option 3: Kombine the selected status with a checkbox.
Please let me know which option is technically possible (or maybe there are additional options?).
Manipulating the background color of CellValuePresenter will indeed be rendered on top of any border you may put on the DataRecordCellArea. This is caused by the order in which the elements are rendered. I can suggests you to use another approach if you want to have a cell background color and record border visible at the same time:
- Use a TemplateField instead of regular field with CellValuePresenter style.
- Define a 3 pixels thick selection border (as this is your favorite choice) for the DataRecordCellArea type.
- Create a TextBlock element with 3 pixels thick margin to offset from the selection border in the TemplateField’s Display Template and bind it to the data item’s properties to obtain text and background color.
I am attaching a sample which demonstrates the bullets listed above which also removes most of the other colorization to make the GUI as clear and simple as possible.
If you require any further assistance, please do not hesitate to ask.
thanks for the example!
I was able to get the following result:
I might take some time to finetine the border and margin settings. I would like also to understand how I can make the border seamless: There are small breaks (marked green in the screenshot above) that come from the grid itself.
My original question is fully answered.
Thanks again.
The screenshot you were trying to attach did not pass or at least I don’t see it. You can try re-attaching it using Internet Explorer of Mozilla Firefox and send them as zip file in order to ensure that the files will be received successfully.
My guess is that you want to remove the vertical borders of the cells which cut the selection thick border. You can try fixing this by adding the following style:
<Style TargetType="{x:Type igDP:CellValuePresenter}">
<Setter Property="BorderThickness" Value="0" />
<Setter Property="BorderBrush" Value="{x:Null}" />
</Style>
Please let me know if this helps you.