バージョン

xamGrid コントロールの代わりに xamDataGrid コントロールを使用してください。xamGrid は数年以内に廃止する予定のため、新しい機能の追加はありません。xamGrid のサポートおよび重要なバグ修正は廃止時まで提供されます。コードベースの xamDataGrid への移動に関する質問は、サポートまでお問い合わせください。

新規行の追加

xamGrid コントロールは、 AddNewRow オブジェクトによって、新しいレコードをデータ ソースに追加するための便利かつ洗練された方法を提供します。この行は、 AddNewRowSettings オブジェクトの設定に基づいて、xamGrid の行コレクションの上または下のいずれかに存在します。エンドユーザーが各セルにデータを入力でき、コミットされると、データ コレクションに新しいデータ レコードを追加します。コントロールまたは各 ColumnLayout オブジェクトで新規行の追加の設定を構成できます。新規行の追加はルート バンドに固定されます。つまり行は同じバンドの他の行と一緒にスクロールされません。すべてのその他のバンドでは、行は通常の行アイランドにあります。

新規行追加機能は、xamGrid で編集機能から独立しています。AddNewRow オブジェクトでセルを編集するために編集を有効にする必要はありません。これによってエンドユーザーがデータを追加することは許可し、既存のデータを変更することは許可しないようにすることができます。ただし、新規行の追加内の編集動作は、通常の行での編集時と同じです。編集動作の詳細は、 「データの編集」の「動作の編集」セクションを参照してください。

Note

注: レコードを追加して正しく機能させるには IList を実装するオブジェクトが基本のデータ ソースとして必要です。

新規行追加の設定

AddNewRowSettings オブジェクトは xamGrid の新規行追加を設定するためのプロパティのリストを提供します。

  • AllowAddNewRow - 新規行追加機能を有効/無効にします。AddNewRowLocation 列挙体は Top、Bottom、Both または None という値を提供します。

  • IsEnterKeyEditingEnabled - Enter キーによる編集を有効/無効にします。

  • IsF2EditingEnabled - F2 キーによる編集を有効/無効にします。

  • IsMouseActionEdtingEnabled - シングル クリックまたはダブル クリックでの編集を可能にします。

  • IsOnCellActiveEditingEnabled - たとえば Tab キーでセルがアクティブになっている時の編集を有効/無効にします。

新規行追加を有効にする

以下のコードは新規行追加を有効にする方法を示します。

XAML の場合:

<Grid x:Name="LayoutRoot" Background="White">
    <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>
</Grid>

Visual Basic の場合:

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

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

コード ビハインドから新しいレコードを追加

新規行追加機能を有効にすることなく、コード ビハインドから行を追加できます。以下のコードは新しいレコードをデータ ソースに追加する方法を示します。

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)

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

空白行は AddNewRow 領域のデフォルト表示です。新規行を追加する時、特定の Column タイプのデフォルト エディタが使用されます。ただし、データ テンプレートを使用することでこれらのデフォルトの動作をカスタマイズできます。これは、Column オブジェクトの AddNewRowItemTemplate プロパティと AddNewRowEditorTemplate プロパティをデータ テンプレートのインスタンスに設定することで達成されます。

以下のコードは AddNewRowItemTemplate プロパティと AddNewRowEditorTemplate プロパティを設定する方法を示します。

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>

以下の図は上記のコードで設定されたテンプレートを示します。

xamGrid AddNewRowTemplate 01.png

図 1: AddNewRowItemTemplate を実装した xamGrid コントロール

xamGrid AddNewRowTemplate 02.png

図 2: AddRowEditorTemplate を実装した xamGrid コントロール

関連トピック

データの編集

行の削除