Infragistics - Working with 2 XamComboEditors in XamDataGrid

Recently I had to work on a sample where I had to populate the combo box values on a datagrid column field based on the selection from the first column values. I had 2 XamComboEditors in a XamDataGrid on the same row. When the first XamComboEditor changes its value, the second XamComboEditor should refresh its item source to repopulate the values based on the first comboEditor selection.

I worked on a sample application with Country/ State scenario, where the states options are based on the country selection.

XAML code

<igdp:UnboundField Name="Country" BindingPath="Country.Name" Label="Country" Column="0" IsScrollTipField="True">

    <igdp:UnboundField.Settings>

        <igdp:FieldSettings EditorType="{x:Type igEditors:XamComboEditor}">

            <igdp:FieldSettings.EditorStyle>

                <Style TargetType="{x:Type igEditors:XamComboEditor}">

                    <Setter Property="DisplayMemberPath" Value="Name" />

                    <Setter Property="ValuePath" Value="Id" />

                    <Setter Property="ItemsSource" Value="{Binding Path=DataContext.CountryCollection,

                        RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" />

                    <Setter Property="ValueType" Value="{x:Type entities:Country}" />

                    <Setter Property="IsAlwaysInEditMode" Value="False" />

                    <Setter Property="IsEditable" Value="False" />

                    <Setter Property="DropDownButtonDisplayMode" Value="OnlyInEditMode" />

                    <EventSetter Event="SelectedItemChanged" Handler="OnCountrySelectionChanged" />

                Style>

            igdp:FieldSettings.EditorStyle>

        igdp:FieldSettings>

    igdp:UnboundField.Settings>

igdp:UnboundField>

<igdp:UnboundField Name="State" BindingPath="State.Name" Label="State" Column="1">

    <igdp:UnboundField.Settings>

        <igdp:FieldSettings EditorType="{x:Type igEditors:XamComboEditor}">

            <igdp:FieldSettings.EditorStyle>

                <Style TargetType="{x:Type igEditors:XamComboEditor}">

                    <Setter Property="DisplayMemberPath" Value="Name" />

                    <Setter Property="ValuePath" Value="Id" />

                    <Setter Property="ValueType" Value="{x:Type entities:State}" />

                    <Setter Property="IsAlwaysInEditMode" Value="False" />

                    <Setter Property="IsEditable" Value="False" />

                    <Setter Property="DropDownButtonDisplayMode" Value="OnlyInEditMode" />

                Style>

            igdp:FieldSettings.EditorStyle>

        igdp:FieldSettings>

    igdp:UnboundField.Settings>

igdp:UnboundField>

Code behind file

void OnCountrySelectionChanged(object sender, RoutedEventArgs e)

{

    DataRecord dataRecord = (DataRecord)grdSample.ActiveRecord;

    CellValuePresenter countryCellValuePresenter = CellValuePresenter.FromCell(dataRecord.Cells[0]);

    XamComboEditor countryComboEditor = countryCellValuePresenter.Editor as XamComboEditor;

    if (countryComboEditor == null) return;

    Country country = countryComboEditor.SelectedItem as Country;

   

    CellValuePresenter stateCellValuePresenter = CellValuePresenter.FromCell(dataRecord.Cells[1]);

    XamComboEditor stateComboEditor = stateCellValuePresenter.Editor as XamComboEditor;

    if (stateComboEditor == null) return;

    var states = Factory.GetStateByCountry(country.Name);

    stateComboEditor.ItemsSource = states;

    stateComboEditor.SelectedItem = states[0];

}

Using XamEditors in Infragistics XamDataGrid

Setting the Field’s EditorStyle property to a XamEditor control allows inline editing and updating of properties much easier inside a XamDataGrid. You can choose from a wide range of Editors from Infragisitcs and use it as the EditorStyle.

For editing a currency value in my Grid I have declared the FieldSettings as

<igdp:Field Label="Billed Amount" Name="BilledAmount" Column="1">

    <igdp:Field.Settings>

        <igdp:FieldSettings EditAsType="{x:Type sys:Decimal}">

            <igdp:FieldSettings.EditorStyle>

                <Style TargetType="{x:Type igEditors:XamCurrencyEditor}">

                    <Setter Property="Mask" Value="{}{currency:7.2:c}" />

                Style>

            igdp:FieldSettings.EditorStyle>                                   

        igdp:FieldSettings>

    igdp:Field.Settings>

igdp:Field>

Similarly for editing a value that should be selected from a combo box item collections.

<igdp:UnboundField  Name="ClientType" BindingPath="ClientType.Name" Label="Type" Column="4">

    <igdp:Field.Settings>

        <igdp:FieldSettings EditorType="{x:Type igEditors:XamComboEditor}">

            <igdp:FieldSettings.EditorStyle>

                <Style TargetType="{x:Type igEditors:XamComboEditor}">

                    <Setter Property="DisplayMemberPath" Value="Name" />

                    <Setter Property="ValuePath" Value="Id" />

                    <Setter Property="ItemsSource" Value="{Binding Path=DataContext.ClientTypeCollection,

                        RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}" />

                    <Setter Property="ValueType" Value="{x:Type entities:SampleClientType}" />

                    <Setter Property="IsAlwaysInEditMode" Value="False" />

                    <Setter Property="IsEditable" Value="False" />

                    <Setter Property="DropDownButtonDisplayMode" Value="OnlyInEditMode" />

                Style>

            igdp:FieldSettings.EditorStyle>

        igdp:FieldSettings>

    igdp:Field.Settings>

igdp:UnboundField>

Output screens

Infragistics xamDataCarousel - Part 2

In part 1 of this article I introduced a simple example to demonstrate the xamDataCarousel control and the usage. In this post I’ll show how to get the details of the active record selected on the control items.

For getting the details from the current selected record, we can use the WPF data binding features as in the code sample given below.

<StackPanel Grid.Row="2" Grid.Column="1" DataContext="{Binding ElementName=sampleDataCarousel, Path=ActiveRecord}">

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="Auto" />

            <ColumnDefinition Width="*" />

        Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto" />

            <RowDefinition Height="Auto" />

            <RowDefinition Height="Auto" />

            <RowDefinition Height="Auto" />

            <RowDefinition Height="Auto" />

        Grid.RowDefinitions>

        <TextBlock Text="Name :" FontWeight="Bold" Margin="0 0 0 5" HorizontalAlignment="Right" />

        <TextBlock Text="Current Department :" FontWeight="Bold" Grid.Row="1" Margin="0 0 0 5" HorizontalAlignment="Right" />

        <TextBlock Text="Salary Earned :" FontWeight="Bold" Grid.Row="2" Margin="0 0 0 5" HorizontalAlignment="Right" />

        <TextBlock Text="Calculated Bonus :" FontWeight="Bold" Grid.Row="3" Margin="0 0 0 5" HorizontalAlignment="Right" />

        <TextBlock Text="Email Address :" FontWeight="Bold" Grid.Row="4" Margin="0 0 0 5" HorizontalAlignment="Right" />

        <TextBlock Text="{Binding Path=Cells[Name].Value}" HorizontalAlignment="Left" Margin="5 0 0 0" Grid.Column="1" Grid.Row="0" />

        <TextBlock Text="{Binding Path=Cells[Department].Value}" HorizontalAlignment="Left" Margin="5 0 0 0" Grid.Column="1" Grid.Row="1" />

        <TextBlock Text="{Binding Path=Cells[Salary].Value}" HorizontalAlignment="Left" Margin="5 0 0 0" Grid.Column="1" Grid.Row="2" />

        <TextBlock Text="{Binding Path=Cells[Bonus].Value}" HorizontalAlignment="Left" Margin="5 0 0 0" Grid.Column="1" Grid.Row="3" />

        <TextBlock Text="{Binding Path=Cells[Email].Value}" HorizontalAlignment="Left" Margin="5 0 0 0" Grid.Column="1" Grid.Row="4" />

    Grid>

StackPanel>