Yuki Mita

デベロッパーサポート担当
Twitter : @ig_yuki
WebDataGrid セルの編集制御について
WebDataGrid のセル編集制御についてご紹介します。WebDataGrid ではプロパティ設定やイベントを組み合わせることで、列単位・行単位・セル単位で読み取り専用(編集不可)を指定することができます。

 

1.列単位の編集制御

列単位でセルを読み取り専用にする際には、EditingColumnSetting から対象となる列を指定し、ReadOnly プロパティを True に設定します。


デザイナの 動作の編集ColumnSettings と進みます。

WebDataGrid デザイナ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
「列の設定」ダイアログから項目の追加をクリックし、ColumnKey に制御対象の列を、ReadOnly に True を選択します。ここでは “ID” というキーを持つ列が読み取り専用になります。

WebDataGrid デザイナ

 

 

 

 

 

 

 

 

 

ここまでの設定は以下の ASPX コードとして出力されます。プロパティウィンドウの利用や ASPX コードを直接実装することでも設定可能です。

            <Behaviors>
                <ig:EditingCore>
                    <Behaviors>
                        <ig:CellEditing>
                            <ColumnSettings>
                                <ig:EditingColumnSetting ColumnKey="ID" ReadOnly="True" />
                            </ColumnSettings>
                        </ig:CellEditing>
                    </Behaviors>
                </ig:EditingCore>
            </Behaviors>

 

 2.行とセルの読み取り専用

行とセルを読み取り専用にする際には、EnteringEditMode クライアントサイドイベントをハンドルし、イベントの第2引数から set_cancel() を呼び出して編集を抑制しています。

行単位での読み取り設定には行のインデックスを、セル単位での読み取り設定には行のインデックスと列キーの組み合わせを利用します。

    function WebDataGrid1_CellEditing_EnteringEditMode(sender, eventArgs) {
        // 行の編集制御
        // 2行目は読み取り専用
        if (eventArgs.getCell().get_row().get_index() == "1")
        {
            eventArgs.set_cancel(true);
        }
        // セルの編集制御
        // 「出身地」列・3行目は読み取り専用
        if (eventArgs.getCell().get_row().get_index() == "2" && eventArgs.getCell().get_column().get_key() == "HomeTown") {
            eventArgs.set_cancel(true);
        }
    }
      

 

ここまで WebDataGrid の編集制御についてご紹介しました。EditingColumnSetting や EnteringEditMode の詳細はオンラインヘルプを御覧下さい。

 

オンラインヘルプ
EditingColumnSetting クラス
EnteringEditMode プロパティ

サンプルはこちらから
WebDataGrid_ReadOnly_CS.zip
WebDataGrid_ReadOnly_VB.zip


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

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

 

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

Posted: 19 Jun 2013, 18:21

Comments

Yuki Mita said:

WebDataGrid ではクライアントサイド、サーバーサイドの両方で選択セルや選択行の情報を取得することができます。今回はセルや行が選択された際にクライアントサイドで情報取得する方法をご紹介します。

# July 10, 2013 2:14 AM

Yuki Mita said:

NetAdvantage for ASP.NET でのクライアントサイドプログラミング Tips です。JavaScript コーディングでの便利機能をご紹介します。JavaScript での開発を始める際に是非ご一読いただければと思います。

# July 12, 2013 2:22 AM

Yuki Mita said:

様々なシナリオにおいて、クライアントサイドでグリッドの行やセル、列を取得する必要が生じます。今回は JavaScript でこれら情報を取得する方法をまとめました。 WebDataGrid にはこれらオブジェクトを取得するにあたり、インデクサや列キーなどを利用することができる

# July 17, 2013 12:02 AM

Yuki Mita said:

グリッド上でクリックやダブルクリック時に何らかの処理を行うというシナリオはよくあるかと思います。 WebDataGrid ではクライアントサイドイベントとして Click イベント 、 DoubleClick

# July 19, 2013 4:26 AM

Yuki Mita said:

WebDataGrid ではデフォルトの状態で列幅よりも長いセルの値を列幅に応じて自動改行し、全ての情報を画面上に表示する様に動作します。但し、状況によってはセルの値を改行せずに一部のみを表示する状態を実現したいケースも出てきます。このような場合、WebDataGrid

# July 23, 2013 10:58 PM

Yuki Mita said:

WebDataGrid に DataTable データをバインドしたシナリオにおける JavaScript API による行の追加と削除をご紹介します。 1.準備 - 機能の有効化 WebDataGrid

# July 29, 2013 9:10 PM

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