Version

Add New Row

Please note that this control has been retired and is now obsolete to the XamDataGrid control, and as such, we recommend migrating to that control. It will not be receiving any new features, bug fixes, or support going forward. For help or questions on migrating your codebase to the XamDataGrid, please contact support.

The xamGrid™ control provides a convenient and elegant way to add new records to your data source via the AddNewRow object. This row exists either at the top or bottom of xamGrid’s rows collection, depending on the settings for the AddNewRowSettings object. It allows your end users to enter data in each cell, and when committed, adds the new data record to your data collection. You can configure Add New Row settings on the control or on each ColumnLayout object. The Add New Row is fixed for the root band; i.e, the row does not scroll with the other rows in the same band. For all other bands, the row is in the normal row island.

The Add New Row feature is independent of the editing feature in xamGrid: editing does not need to be enabled in order to edit the cells of an AddNewRow object. This enables you to allow end users to add data but not modify existing data. However, the editing behavior inside an Add New Row is the same as when editing in a normal row. For more information on the editing behavior, see the Editing Behavior section in Editing Data.

Note
Note:

An object that implements IList is required as the underlying data source in order for adding records to function correctly.

Add New Row Settings

The AddNewRowSettings object provides you with a list of properties to set up xamGrid’s Add New Row.

Enabling Add New Row

The following code shows you how to enable the Add New Row.

In XAML:

<ig:XamGrid x:Name="xamGrid1" ItemsSource="{Binding Source={StaticResource DataUtil}, Path=CategoriesAndProducts}">
    <ig:XamGrid.AddNewRowSettings>
        <ig:AddNewRowSettings AllowAddNewRow="Top" />
    </ig:XamGrid.AddNewRowSettings>
    <ig:XamGrid.Columns>
        <ig:TextColumn Key="CategoryID" />
        <ig:ColumnLayout Key="Products">
            <ig:ColumnLayout.AddNewRowSettings>
                <grid:AddNewRowSettingsOverride AllowAddNewRow="Bottom" />
            </ig:ColumnLayout.AddNewRowSettings>
        </ig:ColumnLayout>
    </ig:XamGrid.Columns>
</ig:XamGrid>

In Visual Basic:

Me.xamGrid1.AddNewRowSettings.AllowAddNewRow = Infragistics.Controls.Grids.AddNewRowLocation.Top
Me.xamGrid1.Columns.ColumnLayouts("Products").AddNewRowSettings.AllowAddNewRow = Infragistics.Controls.Grids.AddNewRowLocation.Bottom

In C#:

this.xamGrid1.AddNewRowSettings.AllowAddNewRow = Infragistics.Controls.Grids.AddNewRowLocation.Top;
this.xamGrid1.Columns.ColumnLayouts["Products"].AddNewRowSettings.AllowAddNewRow = Infragistics.Controls.Grids.AddNewRowLocation.Bottom;
sl xamGrid Add New Row 01.png

Adding New Record from Code Behind

You can add a row from the code behind without having to enable the Add New Row feature. The following code shows you how to add a new record to your data source.

In Visual Basic:

Dim category As New Category()
category.CategoryID = 9
category.CategoryName = "Fruits"
category.Description = "Apples, Grapes, Oranges"
Dim categories As ObservableCollection(Of Category) = TryCast(Me.xamGrid1.ItemsSource, ObservableCollection(Of Category))
categories.Add(category)

In C#:

Category category = new Category();
category.CategoryID = 9;
category.CategoryName = "Fruits";
category.Description = "Apples, Grapes, Oranges";
ObservableCollection<Category> categories = this.xamGrid1.ItemsSource as ObservableCollection<Category>;
categories.Add(category);
sl xamGrid Add New Row 02.png

AddNewRowTemplate

A blank row is the default view of the AddNewRow area and, when adding a new row, the default editor of the particular Column type is used. However, you can customize these default behavior through the use of data templates. This is achieved by setting the AddNewRowItemTemplate and AddNewRowEditorTemplate properties of the Column object to instances of data templates.

The following code snippet demonstrates how to set the AddNewRowItemTemplate and AddNewRowEditorTemplate properties.

In XAML:

<ig:TextColumn Key="SKU">
   <ig:TextColumn.AddNewRowItemTemplate>
      <DataTemplate>
         <TextBlock Foreground="#FF3AB5E9" Text="Enter Value"/>
      </DataTemplate>
   </ig:TextColumn.AddNewRowItemTemplate>
   <ig:TextColumn.AddNewRowEditorTemplate>
      <DataTemplate>
         <TextBox Text="{Binding SKU, Mode=TwoWay,UpdateSourceTrigger=Explicit}"  Background="#FF3AB5E9"/>
      </DataTemplate>
   </ig:TextColumn.AddNewRowEditorTemplate>
</ig:TextColumn>

The pictures below demonstrate the templates set in the code snippet above.

xamGrid AddNewRowTemplate 01.png

Figure 1: The xamGrid control with AddNewRowItemTemplate implemented

xamGrid AddNewRowTemplate 02.png

Figure 2: The xamGrid control with AddRowEditorTemplate implemented.

Related Topics

Editing Data

Row Deletion