XamDataGrid header Layout

Question

I'm using the XamDatagrid v14.2 and want to get a specific layout showing when the grid is loaded.

There are three fields being displayed in the grid: RowNumber, WebHeaderText, and WebText. I want to display the grid so the WebText column is showing right under WebHeaderText.

I was able to get it working by manually dragging the WebText column right below WebHeaderText. How do I do that programmatically so the WPF application starts up like that?

The before image below is currently how it looks when I load the WPF app. I'm trying to get the "After" layout programmatically.

Before: After:

Here is the XAML code:

<window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:ViperWebUIAnnouncement" xmlns:custom="http://infragistics.com/DataPresenter" x:class="ViperWebUIAnnouncement.MainWindow" xmlns:igdp="http://infragistics.com/DataPresenter" mc:ignorable="d" title="Web Announcements">
<grid name="layoutRoot" horizontalalignment="Left">
    <igdp:xamdatagrid name="xamDataGrid1" height="800" verticalalignment="Top">
        <igdp:xamdatagrid.fieldlayoutsettings>
            <igdp:fieldlayoutsettings autogeneratefields="False" allowaddnew="True" allowdelete="True" addnewrecordlocation="OnTop"></igdp:fieldlayoutsettings>
        </igdp:xamdatagrid.fieldlayoutsettings>
        <igdp:xamdatagrid.fieldlayouts>
            <igdp:fieldlayout>
                <igdp:fieldlayout.fields>
                    <igdp:field name="RowNumber" width="InitialAuto"></igdp:field>
                    <igdp:field name="WebHeaderText" width="InitialAuto"></igdp:field>
                    <igdp:field name="WebText" width="InitialAuto"></igdp:field>
                </igdp:fieldlayout.fields>
            </igdp:fieldlayout>
        </igdp:xamdatagrid.fieldlayouts>
    </igdp:xamdatagrid>
  </grid>
</window>

Here is the C# code:

WebAnnouncementData webAnnouncementData;

public MainWindow()
{
    InitializeComponent();
    LoadData();
}

private void LoadData()
{
    //XamDataGrid xamDataGrid1 = new XamDataGrid();
    webAnnouncementData = new WebAnnouncementData(Environment.UserName);
    BindingList<WebAnnouncement> webAnnoucementList = webAnnouncementData.GetWebAnnouncements();
        xamDataGrid1.DataSource = webAnnoucementList;
}

Answer 1

I was able to get the layout I wanted in the grid by having WebHeaderText and WebText in the same column and on different rows.

Here is the code:

 <igDP:Field Name="WebHeaderText" Width="InitialAuto" Row="0" Column="1"/>
 <igDP:Field Name="WebText" Width="InitialAuto" Row="1" Column="1"/>