Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
WebDataGrid JavaScript API による行追加・行削除

WebDataGrid に DataTable データをバインドしたシナリオにおける JavaScript API による行の追加と削除をご紹介します。

 

1.準備 - 機能の有効化

WebDataGrid では行やセルの選択、データの編集、ページングなどの機能をサポートしておりますが、デフォルトの状態でこれらは全て無効化されております。これら機能のうち必要なもののみを有効化することができますので、実行時には使わない機能に関する HTML を生成せず、高いパフォーマンスを維持することができるようになっています。

今回は行の追加と削除を行いますので、WebDataGrid の編集機能と行削除機能を有効化します。行削除機能は選択機能と共に動作しますので、選択機能も有効化します。

        <ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px" DataKeyFields="ID">
            <Behaviors>
                <%--編集機能--%>
                <ig:EditingCore>
                    <Behaviors>
                        <%--行削除機能--%>
                        <ig:RowDeleting />
                    </Behaviors>
                </ig:EditingCore>
                <%--選択機能--%>
                <ig:Selection CellClickAction="Row" RowSelectType="Single">
                </ig:Selection>
            </Behaviors>
        </ig:WebDataGrid>

 

データ更新について

WebDataGrid ではバインドデータを自動的に更新する AutoCRUD 機能をサポートしておりますので、クライアントサイドでの更新処理が発生した際にも自動的にサーバーサイドでデータソースの更新を行なってくれます。AutoCRUD 機能は Behaviors.EditingCore に AutoCRUD プロパティとして公開されており、デフォルトで有効となっています。

前置きが長くなりましたがここまでが準備です。続いて本題である行の追加と削除について見ていきます。

 

2.行の追加

行の追加では、WebDataGrid の行コレクション配下にある add メソッドを呼び出します。 

        // 行の追加
        function addRow() {
            
            var grid = $IG.WebDataGrid.find("WebDataGrid1");

            // 行カウント
            var rowCount = grid.get_rows().get_length();

            var rowID = 0;

            // WebDataGrid に行が存在する時は、最終行を取得
            if (rowCount != 0)
            {
                rowID = grid.get_rows().get_row(rowCount - 1).get_cellByColumnKey("ID").get_value();
            }
            
            // 追加する行を用意
            var newRow = new Array(rowID + 1, "氏名", 30, "出身地");

            // 行の追加
            grid.get_rows().add(newRow);
        }

 

 上記 addRow() メソッドを呼び出すとレコードコレクションの一番下に行が追加されます。AutoCRUD によりデータソースが更新されていますので、ページのリロードやポストバック後も更新データは保持されています。

WebDataGrid 行の追加

 

 

 

 

 

 

 

 

 

 

 

 

3.行の削除

行の削除では、WebDataGrid の行コレクション配下にある remove メソッドに対象行を引数として渡します。ここでは WebDataGrid の1行目を対象としています。

        // 行の削除
        function deleteRow() {

            var grid = $IG.WebDataGrid.find("WebDataGrid1");

            // WebDataGrid に 1 行以上存在するかを確認
            if (grid.get_rows().get_length() > 0) {

                // 削除対象の行を取得
                var targetRow = grid.get_rows().get_row(0);

                // 行の削除
                grid.get_rows().remove(targetRow);
            }
            else {
                alert("削除対象の行がありません。");
            }
        }

 

3行ほど削除したところです。こちらもポストバック後も更新データは保持されています。

WebDataGrid 行の削除

 

 

 

 

 

 

 

 

 

 

 

 

AutoCRUD が有効な場合、これら add メソッドや remove メソッドを呼び出すと WebDataGrid のバインドデータが自動的に更新されます。続いて非同期ポストバックが起こり、WebDataGrid には更新後のデータが割り当ててられて表示されます。なお、AutoCRUD が無効な場合には自動更新処理は行われません。サーバーサイドでの独自検証を経てデータ更新を行う際には、一旦 AutoCRUD を無効化し、別途データ編集時に発生するイベントでデータの更新処理を実装します。

 

サンプルはこちら

(本サンプルは13.1.20131.2069バージョンで作成されました) 

WebDataGrid 関連記事:
WebDataGrid の機能は多岐にわたります。よくお問い合わせ頂く内容につきましては一部このブログでも実装方法や設定方法を紹介させていただいております。是非ご活用ください。

WebDataGrid 利用方法一覧
http://blogs.jp.infragistics.com/blogs/yuki-mita/archive/2013/08/15/26213.aspx

 

 NetAdvantage トライアル版ダウンロード
NetAdvantage ダウンロード

NetAdvantage はトライアル版を無料でご利用いただけます。是非一度お試し下さい。

Comments

Yuki Mita said:

顧客企業一覧や商品一覧などをグリッドに表示する際に、顧客企業や商品に関するウェブサイトへのリンクも含めたい場面はよくあります。WebDataGrid では TemplateDataField にハイパーリンクを表示するコントロールを埋め込むことでリンク表示を実現することができます。

# August 2, 2013 4:59 AM

Yuki Mita said:

グリッドでのデータ更新のタイミングはシナリオに応じて様々ですが、例えば行の編集を終えた後であったり、変更したい全てのセルの編集を終えた後などが考えられます。WebDataGrid ではデフォルト状態で行の編集後にデータ更新を行いますが、プロパティ設定により任意のタイミングで一括更新を行うこともできるようになっています。今回は一括更新の利用方法をご紹介します。

# August 8, 2013 4:46 AM

Yuki Mita said:

NetAdvantage for ASP.NET で提供させて頂いている主力グリッドコントロール WebDataGrid の利用方法エントリ一覧です。よくご質問頂く内容が中心のエントリとなっていますので、初めて

# August 15, 2013 1:17 AM

Yuki Mita said:

NetAdvantage for ASP.NET で提供させて頂いている主力グリッドコントロール WebDataGrid の利用方法エントリ一覧です。よくご質問頂く内容が中心のエントリとなっていますので、初めて

# August 15, 2013 2:39 AM
Anonymous comments are disabled