IgGridで選択した行の下に新規行追加する方法

IgGridツール検証時に行った
新規行を表の途中に入れる方法について説明します。

IgGridなどのインストールや使い方については省略させていただきます。

• IgGrid(Razor記法)

<input type = "button" id = "addRow" />
@(Html.Infragistics()
        .Grid(Model)
        .ID("IgniteGrid")
        .Height("500px")
        .Width("100%")
        .AutoGenerateColumns(false)
        .AutoGenerateLayouts(false)
        .RenderCheckboxes(true)
        .PrimaryKey("Age")
        .Columns(column =>
        {
            column.For(x => x.Age).HeaderText("年齢").Width("10%");
            column.For(x => x.Name).HeaderText("名前").Width("15%");
        })
        .Features(feature =>
        {
            feature.Updating().ColumnSettings(cs =>
            {
                cs.ColumnSetting().ColumnKey("Age").ReadOnly(true);
                cs.ColumnSetting().ColumnKey("Name").EditorType(ColumnEditorType.DatePicker).Required(true);
            });
            feature.Sorting();
        })
        .DataBind()
        .Render()
)

上記のコードでIgGridが作成されます。

選択した行の下に行を追加する方法は以下のようになります。

• JavaScript

 $(function () {
   //行追加ボタン押下時
    $("#addRow").igButton({
                labelText: $("#addRow").val(),
                click: function (event) {
                    var rows = $("#igniteGrid").igGridSelection('selectedRows');
                    var igGrid = $("#igniteGrid").data('igGrid');


                    $.each(rows, function (i, val) {
                        //debugger

                        //選択した伝票の行番号を振る
                        var result = val.id.split('-');
                        var resultId = result[0] + '-' + String(Number(result[1]) + 1);

                        var rowObj2 = {
                            "Age": $("#age").val(),
                            "Name": $("#name").val()
                        };

                      igGrid.dataSource.insertRow(val.index, rowObj2, val.index + 1, true)
　                  igGrid.commit();
                    });
                }
            });
    });

紹介したコードの中で行追加部分、以下になります。

igGrid.dataSource.insertRow(val.index, rowObj2, val.index + 1, true)

ぜひ使用してみてください。