Using a XamDataGrid I need to combine 2 fields into one to show the units.
My data has a field for Units and a field for Value as in the table.
I would like to combine the Value and Units fields using a IValueConverter or some other method so it looks like this table but cannot figure out how to make it work.
These tables are a simplified version of the actual grid view I am working with.
<igDP:XamDataGrid Name="grid_Dose_Log" HorizontalAlignment="Left" Width="1090" Height="680" Canvas.Left="10" Canvas.Top="58" CellActivating="OnCellActivation"> <igDP:XamDataGrid.FieldLayoutSettings> <igDP:FieldLayoutSettings RecordSelectorLocation="None" AllowAddNew="False" AllowDelete="False" AutoFitMode="Always" HighlightAlternateRecords="True" AllowFieldMoving="No"/> </igDP:XamDataGrid.FieldLayoutSettings> <igDP:XamDataGrid.FieldLayouts> <igDP:FieldLayout> <igDP:Field Name="Date" Width="150"> <igDP:Field.Settings> <igDP:FieldSettings LabelTextAlignment="Center" LabelClickAction="SortByMultipleFields" > <igDP:FieldSettings.EditorStyle> <Style TargetType="{x:Type igEditors:XamDateTimeEditor}"> <Setter Property="Mask" Value ="mm/dd/yyyy hh:mm"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="AllowDropDown" Value="False" /> </Style> </igDP:FieldSettings.EditorStyle> </igDP:FieldSettings> </igDP:Field.Settings> </igDP:Field> <igDP:Field Name="Bath" Width="80"> <igDP:Field.Settings> <igDP:FieldSettings LabelTextAlignment="Center" LabelClickAction="SortByMultipleFields"> <igDP:FieldSettings.EditorStyle> <Style TargetType="{x:Type igEditors:XamNumericEditor}"> <Setter Property="Mask" Value ="{}{double:1.0}"/> <Setter Property="PromptChar" Value=""/> <Setter Property="SelectAllBehavior" Value="SelectEnteredCharacters" /> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="Value" Value="0"/> </Style> </igDP:FieldSettings.EditorStyle> </igDP:FieldSettings> </igDP:Field.Settings> </igDP:Field> <igDP:Field Name="Tank" Width="120"> <igDP:Field.Settings> <igDP:FieldSettings LabelTextAlignment="Center" LabelClickAction="SortByMultipleFields" > <igDP:FieldSettings.EditorStyle> <Style TargetType="{x:Type igEditors:XamTextEditor}"> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="IsReadOnly" Value="True" /> </Style> </igDP:FieldSettings.EditorStyle> </igDP:FieldSettings> </igDP:Field.Settings> </igDP:Field> <igDP:Field Name="Constituent" Width="200"> <igDP:Field.Settings> <igDP:FieldSettings LabelTextAlignment="Center" LabelClickAction="SortByMultipleFields" > <igDP:FieldSettings.EditorStyle> <Style TargetType="{x:Type igEditors:XamTextEditor}"> <Setter Property="HorizontalContentAlignment" Value="Center"/> <Setter Property="IsReadOnly" Value="True" /> </Style> </igDP:FieldSettings.EditorStyle> </igDP:FieldSettings> </igDP:Field.Settings> </igDP:Field> <igDP:Field Name="Requested" Width="100" Label="Requested (ml)"> <igDP:Field.Settings> <igDP:FieldSettings LabelTextAlignment="Center" LabelClickAction="SortByMultipleFields"> <igDP:FieldSettings.EditorStyle> <Style TargetType="{x:Type igEditors:XamNumericEditor}"> <Setter Property="Mask" Value ="{}{double:8.1}"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> </Style> </igDP:FieldSettings.EditorStyle> </igDP:FieldSettings> </igDP:Field.Settings> </igDP:Field> <igDP:Field Name="Totalized" Width="100" Label="Totalized (ml)"> <igDP:Field.Settings> <igDP:FieldSettings LabelTextAlignment="Center" LabelClickAction="SortByMultipleFields"> <igDP:FieldSettings.EditorStyle> <Style TargetType="{x:Type igEditors:XamNumericEditor}"> <Setter Property="Mask" Value ="{}{double:8.1}"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> </Style> </igDP:FieldSettings.EditorStyle> </igDP:FieldSettings> </igDP:Field.Settings> </igDP:Field> <igDP:Field Name="Time" Width="100" Label="Time (sec)"> <igDP:Field.Settings> <igDP:FieldSettings LabelTextAlignment="Center" LabelClickAction="SortByMultipleFields"> <igDP:FieldSettings.EditorStyle> <Style TargetType="{x:Type igEditors:XamNumericEditor}"> <Setter Property="Mask" Value ="{}{double:8.1}"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> </Style> </igDP:FieldSettings.EditorStyle> </igDP:FieldSettings> </igDP:Field.Settings> </igDP:Field> <igDP:Field Name="Rate" Width="100" Label="Rate (ml/min)"> <igDP:Field.Settings> <igDP:FieldSettings LabelTextAlignment="Center" LabelClickAction="SortByMultipleFields"> <igDP:FieldSettings.EditorStyle> <Style TargetType="{x:Type igEditors:XamNumericEditor}"> <Setter Property="Mask" Value ="{}{double:8.1}"/> <Setter Property="HorizontalContentAlignment" Value="Center"/> </Style> </igDP:FieldSettings.EditorStyle> </igDP:FieldSettings> </igDP:Field.Settings> </igDP:Field> <igDP:Field Name="Auto" Width="60"> <igDP:Field.Settings> <igDP:FieldSettings LabelTextAlignment="Center" LabelClickAction="SortByMultipleFields"> <igDP:FieldSettings.EditorStyle> <Style TargetType="{x:Type igEditors:XamCheckEditor}"> <Setter Property="HorizontalContentAlignment" Value="Center"/> </Style> </igDP:FieldSettings.EditorStyle> </igDP:FieldSettings> </igDP:Field.Settings> </igDP:Field> <igDP:Field Name="Error" Width="60"> <igDP:Field.Settings> <igDP:FieldSettings LabelTextAlignment="Center" LabelClickAction="SortByMultipleFields"> <igDP:FieldSettings.EditorStyle> <Style TargetType="{x:Type igEditors:XamCheckEditor}"> <Setter Property="HorizontalContentAlignment" Value="Center"/> </Style> </igDP:FieldSettings.EditorStyle> </igDP:FieldSettings> </igDP:Field.Settings> </igDP:Field> </igDP:FieldLayout> </igDP:XamDataGrid.FieldLayouts> </igDP:XamDataGrid>
Hello,
Thank you for the provided description. My suggestion is to set the Units field visibility to Collapsed in order to not be displayed in the grid.
In order to change the appearance of the Value field, we can change its CellValuePresenterStyle and use IValueConverter in order to calculate the new value based on the current one and on the value in the Value field. In the Converter, you can pass the Record as Path property and the desired formatting as ConverterParameter.
<Style x:Key="ValueConverterStyle" TargetType="{x:Type igWPF:CellValuePresenter}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type igWPF:CellValuePresenter}"> <ContentControl Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Record, Converter={StaticResource ValueConverter}, ConverterParameter={}{0:0.0}}" /> </ControlTemplate> </Setter.Value> </Setter> </Style>
In the converter, we can get the values in Value and Units cells, apply the formatting to the value of the Value cell and append both cells' values.
public class ValueConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { DataRecord record = value as DataRecord; double valueField = double.Parse((record.DataPresenter.Records[record.Index] as DataRecord).Cells["Value"].Value.ToString()); string formattedValue = string.Format(parameter.ToString(), valueField); string unitsValue = (record.DataPresenter.Records[record.Index] as DataRecord).Cells["Units"].Value.ToString(); string result = formattedValue + " " + unitsValue; return result; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } }
I have attached a sample application, that uses this approach. Please test it on your side and let me know if I may be of any further assistance.
Sincerely,
Teodosia Hristodorova
Associate Software Developer
4113.XamDataGrid_Combine_2_Fields.zip
There are actually a few approaches that work here depending on your requirements. From using a TemplateField, to an UnboundField, to just a simple TextField with a converter. For example, you can greatly simplify the above example by doing this:
<igWPF:TextField Name="Value" Converter="{StaticResource ValueConverter}" AllowEdit="False" />
And simplfying the converter like this:
public class ValueConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, CultureInfo culture) { DataRecord record = parameter as DataRecord; Data dataItem = (Data)record.DataItem; return $"{value}{dataItem.Units}"; } public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) { throw new NotImplementedException(); } }