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.
Thank you - it works perfect!
All the best from Austria
I am just checking if you have any further questions on this matter.
Please do not hesitate to let me know if you do.
Radko
Senior Software Developer
I can confirm that i sorts and filters again - thanks!
Yes, filtering and sorting will not be working because I sent you a sample with the TemplateField using alternate binding bound to the data item itself (not a data item’s field). Here is my suggestion on how to fix this:
You need to change back the TemplateField to use name binding and then change the binding in the text block to obtain the field of your choice from the DataRecordPresenter (for example). Here is how to change the template field definition in the above sample:
<igDP:TemplateField Name="Name" Label="The Name" AllowRecordFiltering="True">
<igDP:TemplateField.DisplayTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Margin="3"
Background="{Binding RelativeSource={RelativeSource AncestorType=igDP:DataRecordPresenter},
Path=DataRecord.DataItem.FavColorBrush}" />
</DataTemplate>
</igDP:TemplateField.DisplayTemplate>
</igDP:TemplateField>
PS: In the above code snippet I’ve also enabled the filtering for this field so you can see it working.
me again :-)
I receive reports from my customers that the filtering and sorting of these columns does not work any more. Do I need to set here additional configuration to enable it for these columns as well?
Thank you for your feedback.
I am very glad that you have manage to resolve the issue.