GridView for ASP.NET Web Forms

Transcription

1 更 新 グレープシティ 株 式 会 社

2 目 次 製 品 の 概 要 5 ComponentOne Studio for ASP.NET Web Forms のヘルプ 5 主 な 特 長 5-6 機 能 一 覧 6 列 の 機 能 6 行 の 機 能 6-7 ナビゲーションの 機 能 7 グリッド 全 般 の 機 能 7 データ 連 結 の 機 能 7-8 フィルタリングの 機 能 8 グループ 化 の 機 能 8 ソートの 機 能 8-9 スタイルの 機 能 9 1 Copyright GrapeCity inc. All rights reserved.

3 テーマの 機 能 9 ページングの 機 能 10 デザイン 時 の 機 能 10 列 の 種 類 の 機 能 テキスト 列 の 機 能 11 チェックボックス 列 の 機 能 11 画 像 列 の 機 能 ハイパーリンク 列 の 機 能 12 ボタン 列 の 機 能 コマンド 列 の 機 能 テンプレート 列 の 機 能 14 クイックスタート 14 手 順 1:コントロールを DataSource に 連 結 する 手 順 2:コントロールをカスタマイズする 手 順 3:アプリケーションの 実 行 16 GridView の 重 要 なヒント 16 グリッドのパフォーマンス 手 作 業 でGridViewを 追 加 する 17 デザイン 時 のサポート C1GridView スマートタグ C1GridView コンテキストメニュー 20 プロパティビルダー 全 般 タブ 列 タブ ページング タブ 書 式 タブ グループ 化 タブ C1GridView の 動 作 テーマ キーボードによるナビゲーション キーボードナビゲーション 行 の 編 集 33 グルーピング Copyright GrapeCity inc. All rights reserved.

4 デザイン 時 のグループ 化 のプロパティの 設 定 34 実 行 時 の Grouping プロパティの 設 定 グループの 縮 小 と 展 開 ソート 37 フィルタリング C1BoundFieldとC1TemplateField 列 でのフィルタリング ページング 仮 想 スクロール 階 層 化 データの 連 結 階 層 グリッドの 作 成 エクスポートサービス AJAX の 使 用 49 タスク 別 ヘルプ 49 データソースへのグリッドの 連 結 49 Web サイトプロジェクトでのグリッドの 連 結 Web アプリケーションプロジェクトでのグリッドの 連 結 50 データソースの 自 動 更 新 テンプレートフィールドの 実 行 時 データ 連 結 実 行 時 データ 操 作 プロパティビルダーの 使 用 57 プロパティビルダーを 使 ったプロパティの 設 定 プロパティビルダーを 使 用 した 列 の 追 加 グリッドのコンテンツの 書 式 設 定 59 ソートしたグリッドの 作 成 59 指 定 した 列 の 非 表 示 化 列 ヘッダーの 色 の 変 更 列 ヘッダーバンドの 作 成 列 の 通 貨 書 式 の 設 定 ValueList を 使 用 した 列 データのカスタマイズ 行 おきの 行 スタイルの 設 定 条 件 付 き 書 式 の 設 定 スクロール 可 能 なグリッドの 作 成 フッターテキストの 設 定 Copyright GrapeCity inc. All rights reserved.

5 スクロールできない 行 / 列 の 作 成 列 内 へのコントロールの 追 加 71 テンプレート 列 の 追 加 テンプレート 列 の 連 結 列 内 での CheckBox または ListBox コントロールの 追 加 74 Input for ASP.NET Webfoms コントロールの 追 加 グリッドの 外 観 のカスタマイズ 76 列 幅 の 設 定 集 計 とグルーピングの 使 用 行 のマージ ページング 可 能 なグリッドの 作 成 79 ページングの 追 加 現 在 のセル 位 置 の 追 跡 セルの 値 の 取 得 AJAX によるグリッドの 更 新 82 列 の 移 動 レコードの 編 集 83 グリッドのページング レコードの 選 択 列 のソート 列 のフィルタリング 86 実 行 時 のグリッドの 更 新 チェックボックスフィルタを 有 効 にする クライアント 側 での 選 択 クライアント 側 チュートリアル 89 クライアント 側 の 編 集 チュートリアル 89 手 順 1:コントロールへのデータの 連 結 手 順 2:クライアント 側 の 編 集 の 有 効 化 手 順 3: 更 新 前 のデータ 検 証 手 順 4:サーバーへの 更 新 データの 送 信 クライアント 側 からのデータベースの 更 新 クライアント 側 のキーイベントの 処 理 Copyright GrapeCity inc. All rights reserved.

6 製 品 の 概 要 GridView for ASP.NET Web Forms は 対 話 的 で 完 全 にカスタマイズ 可 能 な 表 にデータソースからの 項 目 を 表 示 します 対 話 的 にデータを 選 択 編 集 削 除 ソートまたはグループ 化 できます データを 複 数 のページにわたって 表 示 し エンドユー ザーが 容 易 にページのデータを 閲 覧 できます ComponentOne Studio for ASP.NET Web Forms のヘルプ ComponentOne Studio for ASP.NET Web Forms の 各 コントロールで 共 通 したトピック アセンブリの 追 加 テーマの 適 用 クライアント 側 情 報 などについては ASP.NET Web Forms ユーザーガイド を 参 照 してください 主 な 特 長 GridView for ASP.NET Web Forms は 対 話 形 式 でデータの 選 択 編 集 ソートおよびグループ 化 などの 動 作 を 提 供 します ま た GridView for ASP.NET Web Forms は 開 発 者 が 迅 速 かつ 容 易 に 直 感 的 でプロフェッショナルなWebアプリケーションを 構 築 するための 高 度 な 機 能 を 備 えています Microsoft GridView との 互 換 性 GridView は Microsoft 社 の C1GridView コントロールと 高 い 互 換 性 を 持 ち 簡 単 に 既 存 の ASP.NET アプリケーション をアップグレードしてすぐに 進 行 できます フィルタリング GridView は レコードの 検 索 やフィルタなどのエンドユーザーによるカスタム 操 作 用 に 列 ヘッダーの 下 の 組 み 込 み データエントリ 行 をサポートしています ShowFilter オプションを 有 効 にして 簡 単 にフィルタリングを 実 現 できます カスタマイズされたグリッド 書 式 直 感 的 な 書 式 設 定 によって 開 発 者 は 任 意 のグリッドを 自 動 的 にカスタマイズでき 列 の 作 成 枠 /グリッド 線 の 表 示 グリッド 内 の 編 集 ソートデータのカスタマイズ その 他 さまざまな 操 作 を 行 うことができます 編 集 グリッド 内 のデータを 編 集 して 変 更 内 容 を 保 存 または 解 除 できます 行 のマージ グリッドを 構 成 し 同 一 の 値 を 含 む 行 をマージするように 設 定 できます この 機 能 を 使 うと グリッドがすっきりと 使 いや すくなります 入 力 コントロールの 組 み 込 み Input for ASP.NET Web Forms コントロールをグリッドに 接 続 して データ 入 力 および 対 話 性 を 強 化 します マスク 日 付 数 値 パーセント 通 貨 の 編 集 などのエディタをグリッドの 任 意 列 に 簡 単 に 追 加 できます 任 意 のグリッド 列 にコントロールや 画 像 を 埋 め 込 む グリッドの 列 にチェックボックス リストボックス ボタン 画 像 などを 組 み 込 んで 表 示 できます コードレスにグリッドのカスタマイズ 列 のコレクション ページング 動 作 を 管 理 し UI コードを 記 述 せずにグリッドの 設 計 を 編 集 できます GridView の 豊 か なデザイン 時 のサポートにより ウェブサイトにカスタマイズされたグリッドの 機 能 を 追 加 することは 驚 くほど 容 易 になり ました 自 動 的 に 列 と 行 のサイズを 変 更 GridView は 1つのプロパティを 設 定 することにより グリッドがスクロールされたときに 列 の 一 番 長 いテキストに 合 わせて 自 動 的 に 列 幅 と 行 高 を 調 整 します 特 定 の 行 列 の 自 動 サイズを 有 効 無 効 にすることも 可 能 です. バンド 階 層 構 造 を 作 成 するために 複 数 列 の 列 ヘッダーを 結 合 できます たとえば 複 数 の 列 ヘッダーを 別 の 広 い 列 ヘッダー の 下 に 配 置 できます グループ 化 および 集 計 エンドユーザーは グループヘッダーをクリックすることで グループの 拡 張 や 縮 小 を 有 効 にしてアウトラインモードに 設 定 できます グループは 初 期 表 示 の 時 に 拡 張 するか 縮 小 するかを 指 定 できます グリッドは 各 グルップヘッダー 行 の 隣 に 拡 張 や 縮 小 アイコンを 表 示 します また グループ 化 された 行 はカウント 総 計 などの 集 計 データを 表 示 できます 再 利 用 可 能 なテンプレート プロジェクト 内 プロジェクト 外 で 同 じ 外 観 の 複 数 のグリッドを 作 成 するにはグリッドテンプレートを 保 存 してロードできま す 5 Copyright GrapeCity inc. All rights reserved.

7 テーマ スマートタグをクリックするだけで 6 種 類 のプレミアムテーマ(Arctic Midnight Aristo Rocket Cobalt および Sterling)のいずれかを 選 択 して 外 観 を 変 更 します オプションとして jquery UI からThemeRoller を 使 用 してカスタマ イズしたテーマを 作 成 します CSS 対 応 Cascading Style Sheet (CSS) を 使 用 してカスタムスキンを 定 義 します 機 能 リスト このトピックでは GridView for ASP.NET Web Formsの 主 な 機 能 の 一 覧 と 機 能 を 理 解 するのに 役 立 つページへのリンクを 記 載 しています 列 の 機 能 機 能 サンプル ヘルプ リファレンス KB 列 の 移 動 1 2 列 のサイズ 変 更 1 2 列 の 幅 列 の 非 表 示 列 の 固 定 列 ヘッダのテキスト 列 ヘッダの 画 像 列 ヘッダの 表 示 列 ヘッダの 結 合 列 フッタのテキスト 行 の 機 能 機 能 サンプル ヘルプ 行 ヘッダの 表 示 リファレンス KB 行 のマージ 行 の 固 定 6 Copyright GrapeCity inc. All rights reserved.

8 フッタ 行 の 表 示 新 規 行 の 追 加 ナビゲーションの 機 能 機 能 サンプル ヘルプ クライアント 側 での 編 集 リファレンス KB キーボード 操 作 選 択 方 法 (1つのセル 1 列 1 行 1つの 範 囲 複 数 列 複 数 行 複 数 の 範 囲 ) スクロールバー( 水 平 垂 直 両 方 自 動 無 し) 現 在 のセルのハイライト 表 示 グリッド 全 般 の 機 能 機 能 サンプル ヘルプ レイアウト 情 報 の 保 存 ( 文 字 列 ストリーム) リファレンス KB レイアウト 情 報 の 読 み 込 み( 文 字 列 ストリーム) AJAXによる 更 新 処 理 ( 列 の 移 動 編 集 ページング 行 の 選 択 ソート フィルタリング) AJAXによる 更 新 対 象 ( 一 部 コントロール 全 体 ) 読 み 込 み 中 を 示 すテキスト データ 連 結 の 機 能 機 能 サンプル データソース(ASP.NETデータソースコントロール) ヘルプ リファレンス KB 列 の 自 動 生 成 データの 更 新 方 法 ( 自 動 マニュアル) Copyright GrapeCity inc. All rights reserved.

9 プライマリキーのフィールド 名 ( 複 数 可 ) 空 データ 行 のテキスト 空 データ 行 のテンプレート フィルタリングの 機 能 機 能 サンプル ヘルプ フィルタ 行 の 表 示 リファレンス KB フィルタ 条 件 (15 種 類 ) フィルタボタンの 表 示 フィルタ 実 行 のタイミング( 自 動 手 動 ) グループ 化 の 機 能 機 能 サンプル ヘルプ グループ 化 領 域 の 表 示 リファレンス KB グループ 化 領 域 のキャプション グループ 化 の 初 期 状 態 ( 展 開 縮 小 ) 集 計 ( 個 数 合 計 平 均 最 小 最 大 標 準 偏 差 分 散 カスタム) グループヘッダ/フッタの 表 示 グループヘッダのテキスト グループフッタのテキスト 展 開 ボタンのCSS 縮 小 ボタンのCSS グループのインデント 8 Copyright GrapeCity inc. All rights reserved.

10 ソートの 機 能 機 能 サンプル ヘルプ ソートの 有 効 1 2 リファレンス KB ソート 方 向 ( 昇 順 降 順 無 し) ソートに 用 いるフィールド 名 / 式 自 動 ソート ソート 状 態 の 取 得 スタイルの 機 能 機 能 サンプル ヘルプ 行 のスタイル リファレンス KB 代 替 行 のスタイル 編 集 行 のスタイル 選 択 行 のスタイル 空 行 のスタイル ヘッダ 行 のスタイル フッタ 行 のスタイル フィルタ 行 のスタイル グループ 行 のスタイル テーマの 機 能 機 能 サンプル 7 種 類 の 組 み 込 みテーマ ヘルプ リファレンス KB jquery UIテーマ jquery UI ThemeRoller 9 Copyright GrapeCity inc. All rights reserved.

11 ページングの 機 能 機 能 サンプル ヘルプ ページングの 有 効 リファレンス KB ページング 種 別 (4 種 類 ) ページャの 表 示 位 置 ( 上 下 上 下 ) 1ページの 行 数 先 頭 ページボタンのテキスト 前 のページボタンのテキスト 次 のページボタンのテキスト 最 終 ページボタンのテキスト 先 頭 ページボタンのCSS 前 のページボタンのCSS 次 のページボタンのCSS 最 終 ページボタンのCSS カスタムページング デザイン 時 の 機 能 機 能 サンプル スマートタグ ヘルプ リファレンス KB プロパティビルダー 1 2 列 の 種 類 の 機 能 機 能 サンプル ヘルプ テキスト 列 リファレンス KB 10 Copyright GrapeCity inc. All rights reserved.

12 チェックボックス 列 画 像 列 ハイパーリンク 列 ボタン 列 コマンド 列 (フィールドの 編 集 / 更 新 /キャンセル/ 削 除 / 選 択 を 行 うボタン) テンプレート 列 ( 交 互 行 列 ヘッダ 列 フッタ セル 編 集 時 のセル) テキスト 列 の 機 能 機 能 サンプル ヘルプ 連 結 フィールド 名 リファレンス KB 書 式 (jqueryのglobalize 機 能 の 書 式 に 対 応 ) 編 集 の 有 効 null 値 のテキスト 空 文 字 列 をnull 値 に 変 換 値 をHTMLエンコードして 表 示 チェックボックス 列 の 機 能 機 能 サンプル ヘルプ 連 結 フィールド 名 リファレンス KB キャプション 画 像 列 の 機 能 機 能 サンプル ヘルプ 画 像 URLの 連 結 フィールド 名 リファレンス KB 11 Copyright GrapeCity inc. All rights reserved.

13 画 像 URLの 書 式 代 替 テキスト 代 替 テキストの 連 結 フィールド 名 編 集 の 有 効 null 値 のテキスト null 値 の 画 像 URL 空 文 字 列 をnull 値 に 変 換 ハイパーリンク 列 の 機 能 機 能 サンプル ヘルプ URL リファレンス KB URLの 連 結 フィールド 名 URLの 書 式 テキスト テキストの 連 結 フィールド 名 テキストの 書 式 リンクターゲット ボタン 列 の 機 能 機 能 サンプル ヘルプ ボタン 種 別 (プッシュボタン ハイパーリンク) リファレンス KB テキスト テキストの 連 結 フィールド 名 12 Copyright GrapeCity inc. All rights reserved.

14 テキストの 書 式 画 像 URL コマンド クリック 時 に 検 証 を 実 行 コマンド 列 の 機 能 機 能 サンプル ヘルプ ボタン 種 別 (プッシュボタン ハイパーリンク) リファレンス KB キャンセルボタンの 表 示 キャンセルボタンのテキスト キャンセルボタンの 画 像 URL 削 除 ボタンの 表 示 削 除 ボタンのテキスト 削 除 ボタンの 画 像 URL 削 除 ボタンの 自 動 生 成 編 集 ボタンの 表 示 編 集 ボタンのテキスト 編 集 ボタンの 画 像 URL 編 集 ボタンの 自 動 生 成 フィルタボタンの 表 示 フィルタボタンのテキスト フィルタボタンの 画 像 URL 13 Copyright GrapeCity inc. All rights reserved.

15 フィルタボタンの 自 動 生 成 選 択 ボタンの 表 示 選 択 ボタンのテキスト 選 択 ボタンの 画 像 URL 選 択 ボタンの 自 動 生 成 更 新 ボタンのテキスト 更 新 ボタンの 画 像 URL クリック 時 に 検 証 を 実 行 テンプレート 列 の 機 能 機 能 サンプル ヘルプ 項 目 のテンプレート リファレンス KB 代 替 項 目 のテンプレート 編 集 項 目 のテンプレート ヘッダのテンプレート フッタのテンプレート 空 の 文 字 列 をnullに 変 換 クイックスタート このクイックスタートでは GridView for ASP.NET Web Formsの 各 機 能 を 説 明 します 以 下 の 手 順 では C1GridView コン トロールを 使 用 して 簡 単 な 連 結 グリッドアプリケーションを 作 成 します C1GridViewコントロールをプロジェクトに 追 加 して コ ントロールをデータソースに 連 結 し グリッドの 外 観 と 動 作 をカスタマイズし このコントロールで 可 能 な 実 行 時 のインタラクティ ブ 操 作 のいくつかを 説 明 します 手 順 1:コントロールを DataSource に 連 結 する この 手 順 では クイックスタートの 最 初 に 新 しいプロジェクトを 作 成 し C1GridView コントロールをプロジェクトに 追 加 します 次 に C1GridView コントロールをデータソースに 連 結 します この 例 では 標 準 の Northwind データベースNwind.mdb が 14 Copyright GrapeCity inc. All rights reserved.

16 C:\Program Files\Common Files\C1Studio\Data ディレクトリにあることを 想 定 しています まず 以 下 の 手 順 を 実 行 します 1. Visual Studio で [ファイル] [ファイル] [[ 新 規 作 成 ] [プロジェクト]を 選 択 します [ [ 新 しいプロジェクト]ダイアログボックスが 表 示 します 2. [ 新 しいプロジェクト]ダイアログボックスで 左 ペインから 言 語 を 選 択 し テンプレートリストから[Web]を 選 択 します 右 ペインから [ASP.NET 空 の Web アプリケーション]を 選 択 して プロジェクトの 名 前 を 入 力 し [OK]をクリックしま す 新 しいアプリケーションが 作 成 されます 3. ソリューションエクスプローラで プロジェクトを 右 クリックして 表 示 するコンテキストメニューから[ [ 追 加 ] [[ 新 しい 項 目 ]を 選 択 します 4. [ 新 しい 項 目 の 追 加 ]ダイアログボックスで テンプレートのリストから[Web フォーム]を 選 択 し 項 目 の 名 前 を Default.aspx と 入 力 して[ [ 追 加 ]をクリックします これで 新 しいページが 開 きます 5. ソリューションエクスプローラで プロジェクトを 右 クリックして 表 示 するコンテキストメニューから[ [ 追 加 ] [[ 新 しいフォル ダ]を 選 択 します 新 しいフォルダは App_Data と 名 前 を 付 けます 6. Visual Studio のツールボックスに 移 動 し C1GridView アイコンをダブルクリックしてコントロールをプロジェクトに 追 加 します 7. ソリューションエクスプローラウィンドウで App_Data フォルダを 右 クリックして コンテキストメニューから[ [ 既 存 項 目 の 追 加 ]を 選 択 します 8. [ 既 存 項 目 の 追 加 ]ダイアログボックスで Northwind データベースの 格 納 場 所 に 移 動 し Nwind.mdb を 選 択 しま す そして 追 加 をクリックし ダイアログボックスを 閉 じて ファイルをプロジェクトに 追 加 します 9. C1GridView コントロールのスマートタグをクリックして [C1GridView タスク]メニューを 開 きます 10. データソースの 選 択 ドロップダウン 矢 印 をクリックして [ [ 新 しいデータソース]を 選 択 します [データソース 構 成 ウィ ザード]が 開 きます 11. [データソース 構 成 ウィザード] 画 面 で [Access データベース]を 選 択 します 入 力 されているデフォルト ID AccessDataSource1 をそのまま 残 して OK をクリックします 12. [データソースの 選 択 ] 画 面 で 参 照 ボタンをクリックして データベースの 場 所 を 決 めます 13. [Microsoft Access データベースの 選 択 ]ダイアログボックスで [プロジェクトフォルダ]リストの App_Data フォルダ をクリックします [フォルダの 内 容 ]ペインで Nwind.mdb ファイルを 選 択 して OK をクリックします 14. Nwind.mdb データベースが[データベースの 選 択 ] 画 面 に 表 示 されます 次 へ をクリックして 操 作 を 続 行 します 15. [Select ステートメントの 構 成 ] 画 面 で テーブルまたはビューから 列 を 指 定 ラジオボタンが ON になっていることを 確 認 します [ 名 前 ]ドロップダウンリストで [Products]を 選 択 します [ 列 ]ペインで アスタリスク(*)チェックボックス を 選 択 して すべての 列 を 選 択 します 次 へ をクリックして 操 作 を 続 行 します 16. [クエリーのテスト]ページでクエリーをテストできます 完 了 をクリックして ウィザードを 閉 じてグリッドのバインディン グを 実 行 します グリッドの 列 がデータソースを 反 映 していることに 注 意 してください グリッドの 列 がデータソースを 反 映 していることに 注 意 してください これで 単 純 なグリッドアプリケーションを 作 成 するために 必 要 な 作 業 は 完 了 です このグリッドは Northwind データベースに 連 結 されています この 時 点 でプロジェクトを 実 行 すると 機 能 完 備 のグリッドアプリケーションが 表 示 され データベースの Products テーブルのデータフォームにアクセスして 表 形 式 でデータをインタラクティブに 操 作 することができます このク イックスタートの 次 の 手 順 では グリッドの 外 観 と 動 作 をカスタマイズして グリッドの 実 行 時 インタラクティブ 操 作 を 説 明 しま す 手 順 2:コントロールをカスタマイズする クイックスタートの 前 の 手 順 では 単 純 なグリッドアプリケーションを 作 成 して グリッドをデータソースに 連 結 しました この 手 順 では グリッドの 外 観 と 動 作 設 定 を 変 更 して 初 期 のグリッドアプリケーションをさらにカスタマイズします 以 下 の 手 順 を 実 行 して 操 作 を 続 行 します 1. C1GridView コントロールを 一 回 クリックして プロパティウインドウに 移 動 します 2. Theme プロパティの 横 のドロップダウン 矢 印 をクリックして テーマのリストから Arctic を 選 択 します 詳 細 は テー マ トピックを 参 照 してください 3. C1GridViewコントロールのスマートタグをクリックして [C1GridView タスク]メニューから[プロパティビルダー プロパティビルダー]を 選 択 します [C1GridView のプロパティ]ダイアログボックスが 開 きます 4. 全 般 タブで [ソートを 有 効 にする]チェックボックスを ON にします [クライアント 側 ]の 下 の[ 列 の 移 動 を 有 効 にす 15 Copyright GrapeCity inc. All rights reserved.

17 る]チェックボックスを ON にします 5. ページング タブをクリックして [ページングを ページングを 有 効 にする]チェックボックスを ON にします デフォルトでは ページ の 移 動 で 位 置 に Bottom が モードに Numeric が 選 択 されていることに 注 意 してください 6. [C1GridView のプロパティ]ダイアログボックスで 列 タブをクリックします ここで 列 の 追 加 と 削 除 や 列 設 定 の 変 更 ができます 7. [ 選 択 した 列 ]リストから 削 除 する 列 を 選 択 して ボタンをクリックします たとえ ば ProductID SupplierID CategoryID UnitsOnOrder ReorderLevel の 各 列 を 削 除 します 8. 適 用 をクリックして 変 更 を 適 用 します OK をクリックして [C1GridView のプロパティ]ダイアログボックスを 閉 じ ます これで C1GridView コントロールの 連 結 とグリッドの 外 観 および 動 作 設 定 のカスタマイズが 完 了 しました 次 の 最 後 の 手 順 では アプリケーションを 実 行 して 行 った 変 更 を 観 察 します 手 順 3:アプリケーションの 実 行 クイックスタートの 前 の 手 順 では 単 純 なグリッドアプリケーションを 作 成 し グリッドをデータソースに 連 結 して グリッドの 外 観 と 動 作 をカスタマイズしました この 手 順 では グリッドアプリケーションを 実 行 して C1GridView コントロールで 可 能 な 実 行 時 のインタラク ティブ 操 作 のいくつかを 探 索 します 以 下 の 手 順 を 実 行 して 操 作 を 続 行 します 1. Visual Studio で [デバッグ] [デバッグ 開 始 ]を 選 択 して アプリケーションを 実 行 します グリッドは 実 行 時 に 以 下 のような 表 示 になります 2. 列 のヘッダーをクリックして 列 をソートします 3. 列 のヘッダーをドラッグすることで 列 をグリッド 内 の 他 のヘッダー 位 置 へ 移 動 します 4. グリッドの 下 部 にあるページ 数 のインジケータをクリックして グリッドの 他 のページに 移 動 します おめでとうございます!C1GridView のクイックスタートが 無 事 完 了 しました GridView の 重 要 なヒント グリッドのパフォーマンス 大 量 のデータを 表 示 する 場 合 は グリッドの 初 期 化 プロセスが 遅 れます 以 下 のオプションを 使 用 すると ページを 短 くして 処 理 速 度 を 向 上 させることができます ページングとソートの 設 定 :フルポストバックの 代 わりにAjax 呼 び 出 しを 使 用 して ページングとソートを 実 装 します 仮 想 化 :グリッドは 行 と 列 の 両 方 で 仮 想 スクロールをサポートしています VirtualizationSettingsプロパティを 行 列 16 Copyright GrapeCity inc. All rights reserved.

18 またはその 両 方 に 設 定 できます これにより グリッドのレンダリングが 高 速 になり パフォーマンスが 向 上 します 行 の 仮 想 スクロール と 列 の 仮 想 スクロール のサンプルも 参 照 してください スクロール 設 定 の 変 更 :グリッドがスクロールモードになっている 場 合 は 固 定 列 と 固 定 行 を 削 除 すると 動 作 が 速 い 軽 い スクロールモードにすることができます EnableConditionalDependenciesの の 使 用 :EnableConditionalDependenciesプロパティをTrueに 設 定 します このプ ロパティは ページロード 時 に 登 録 する 必 要 があるリソースファイルの 数 を 減 らします デフォルトでは このプロパティ はFalseに 設 定 されています EnableConditionalDependenciesは 特 定 の 操 作 に 必 要 なリソースファイル(.jsおよび.css)だけをページに 追 加 しま す このように あるリソースの 登 録 を 決 定 付 けるプロパティを 制 御 プロパティといいます 制 御 プロパティには AllowPaging ScrollingSettings AllowC1InputEditors ShowFilterなどがあり それぞれ 依 存 するリソースが 異 なります たとえば グリッドでページングを 使 用 しない 場 合 は ページロード 時 に AllowPaging に 関 連 するリソースファイルが 登 録 されません その 結 果 ブラウザのペイロードが 最 適 化 され レンダリングが 高 速 に なります このプロパティは EnableCombinedJavaScriptsプロパティがTrueに 設 定 されている 場 合 にのみ 機 能 します 手 作 業 でGridViewを 追 加 する ComponentOne Studio for ASP.NET Web Forms のインストール 後 に ツールボックスに ASP.NET コントロールが 表 示 さ れない 場 合 は 手 作 業 で 追 加 することができます 手 作 業 で Visual Studio のツールボックスに C1GridView コントロールを 追 加 するには 次 の 手 順 に 従 います 1. Visual Studio を 開 きます 2. [ 表 示 ]メニューの[ツールボックス]を 選 択 し 右 クリックしてコンテキストメニューを 開 きます 3. コントロールを 追 加 するタブを 右 クリックし コンテキストメニューから[アイテムの 選 択 ]を 選 択 します [ツールボックス 項 目 の 選 択 ]ダイアログボックスが 表 示 されます 4. このダイアログボックスで [.NET Framework コンポーネント]タブを 選 択 します 名 前 空 間 でリストをソートし([ 名 前 空 間 ] 列 ヘッダーをクリック) C1.Web.Wijmo.Controls.C1GridView 名 前 空 間 に 属 するすべてのコンポーネントの チェックボックスをオンにします 5. Visual Studio のツールボックスで コントロールをダブルクリックするか フォームにドラッグします これで C1GridView コントロールが Web フォームに 追 加 されます デザイン 時 のサポート GridView for ASP.NET Web Forms は 視 覚 的 な 編 集 機 能 を 提 供 しており グリッドアプリケーションの 作 成 がより 簡 単 にな ります 以 下 の 各 セクションでは C1GridView のデザイン 時 環 境 を 使 用 して C1GridView コントロールを 設 定 する 方 法 につ いて 説 明 します タスクメニュー スマートタグは 各 コントロールで 最 もよく 使 用 されるプロパティを 提 供 するショートカットのタスクメニューを 表 します コント ロールの 右 上 端 のスマートタグ( )をクリックして 各 コントロールのタスクメニューを 呼 び 出 すことができます C1GridView で のスマートタグの 使 用 方 法 についての 詳 細 は C1GridView スマートタグ を 参 照 してください コンテキストメニュー コンテキストメニューは 一 般 に 使 用 される Visual Studio の 各 コマンド および C1GridView コントロール 固 有 のコマンドを 提 供 するショートカットメニューを 表 します グリッド 上 のどこかを 右 クリックすることにより コンテキストメニューを 表 示 できま す C1GridView でのコンテキストメニューの 使 用 方 法 についての 詳 細 は C1GridView コンテキストメニュー を 参 照 してくだ さい プロパティビルダー [C1GridView のプロパティ]ダイアログボックスを 使 用 して C1GridView の 外 観 と 動 作 を 手 軽 にカスタマイズできま 17 Copyright GrapeCity inc. All rights reserved.

19 す C1GridView のプロパティビルダー プロパティビルダーへのアクセスおよび 使 用 方 法 のついての 詳 細 は プロパティビルダー を 参 照 してく ださい プロパティウインドウ Visual Studio のプロパティウィンドウを 使 用 して デザイン 時 に C1GridView を 簡 単 に 設 定 することもできます コントロール を 右 クリックして[プロパティ]を 選 択 し プロパティウィンドウにアクセスできます C1GridView スマートタグ スマートタグは コンポーネントで 最 も 一 般 的 に 使 用 されるプロパティを 提 供 するショートカットの[タスク]メニューを 表 します [C1GridView タスク]メニューにアクセスするには C1GridView コントロールの 右 上 端 の スマートタグ をクリックします [C1GridView タスク]メニューが 表 示 されます グリッドがデータソースに 連 結 されると [タスク]メニューに 追 加 オプションが 表 示 され 次 のような 外 観 になります 18 Copyright GrapeCity inc. All rights reserved.

20 [C1GridView タスク]メニューは 次 のように 動 作 します データソースの 選 択 既 存 のデータソースを 選 択 するか [データソース 構 成 ウィザード]から 新 しい 接 続 を 作 成 します データソースの 構 成 このオプションは データソースを 構 成 するための[データソース 構 成 ウィザード]を 起 動 します このオプション は C1GridView コントロールがデータソースに 連 結 されている 場 合 のみ 表 示 されます スキーマの 更 新 このオプションは データソースのスキーマを 更 新 します このオプションは C1GridView コントロールがデータソース に 連 結 されている 場 合 のみ 表 示 されます プロパティビルダー プロパティを 設 定 して グリッドをカスタマイズできるプロパティビルダーを 開 きます レイアウトのロード このオプションでは XML レイアウトファイルを 読 み 込 むことができます このオプションをクリックすると ロードする ファイルを 選 択 するように[ 開 く]ダイアログボックスが 開 きます レイアウトの 保 存 このオプションでは レイアウトファイルを XML ファイルとして 保 存 できます このオプションをクリックすると 対 象 ファ イルを 指 定 できるように [ 保 存 ]ダイアログボックスが 開 きます テーマ [テーマ]ドロップダウンをクリックして 提 供 されている 複 数 の 視 覚 的 スキームから 選 択 できます 視 覚 スタイルの 詳 細 に ついては テーマ を 参 照 してください 新 しいテーマの 作 成 [ 新 しいテーマの 作 成 ]オプションをクリックすると ThemeRoller for Visual Studio が 開 きます したがって 開 発 環 境 内 でテーマをカスタマイズすることができます アプリケーションで ThemeRoller for Visual Studio を 使 用 する 方 法 に ついては ThemeRoller for Visual Studio を 参 照 してください CDN の 使 用 [CDN の 使 用 ]チェックボックスを ON にすると CDN からクライアントリソースがロードされます これはデフォルトで OFF です CDN のパス CDN の URL パスを 表 示 します 19 Copyright GrapeCity inc. All rights reserved.

21 Bootstrap の 使 用 [Bootstrap の 使 用 ]オプションを 選 択 すると コントロールに Bootstrap テーマを 適 用 することができます アプリケー ションで Bootstrap テーマを 使 用 する 方 法 については Bootstrap for ASP.NET Web Forms クイックスタート を 参 照 してください モバイルモード モバイルモードを 有 効 / 無 効 にします バージョン 情 報 [バージョン 情 報 ]をクリックすると 製 品 のバージョン 情 報 を 確 認 できるダイアログボックスが 表 示 されます テンプレートの 編 集 このオプションをクリックすると テンプレート 編 集 モードが 起 動 します JavaScriptの の 結 合 を 有 効 にする このプロパティを 選 択 すると すべての 必 要 なJavaScriptファイルが1つのファイルに 結 合 されます 条 件 付 き 依 存 関 係 を 有 効 にする このプロパティは 選 択 されたコントロールの 設 定 に 従 って 依 存 関 係 リソースを 登 録 します 特 定 の 操 作 を 実 行 するた めに 必 要 なJavaScriptファイルだけがページに 追 加 されます これにより ページのロード 時 間 が 短 縮 され グリッドの パフォーマンスが 最 適 化 されます C1GridView コンテキストメニュー グリッド 上 のどこかを 右 クリックして C1GridView のコンテキストメニューを 表 示 します これは Visual Studio がすべての.NET コントロールに 提 供 するコンテキストメニューですが C1GridView のコンテキストメニューには 他 にもいくつかの 機 能 があ ります コンテキストメニューのコマンドは 以 下 のように 動 作 します スマートタグの 表 示 このオプションは C1GridView コントロールのスマートタグを 表 示 します スマートタグの 使 用 方 法 や 利 用 可 能 な 機 能 についての 情 報 は C1GridView スマートタグ を 参 照 してください テンプレートの 編 集 テンプレートまたは Pager テンプレートを 編 集 するには テンプレートの 編 集 を 選 択 します これらのいずれかのオプ ションを 選 択 すると テンプレート 編 集 モードが 起 動 します テンプレート 編 集 の 終 了 このオプションを 使 用 すると テンプレートが 現 在 編 集 モードにある 場 合 テンプレートの 編 集 モードを 終 了 します ま た テンプレートの 編 集 モードを 使 用 していない 場 合 このオプションは 使 用 できません 20 Copyright GrapeCity inc. All rights reserved.

22 プロパティビルダー プロパティビルダーを 使 用 すれば C1GridView コントロールの 外 観 と 動 作 を 簡 単 にカスタマイズできます プロパティビル ダーにアクセスするには [C1GridView タスク]メニュー( 詳 細 については C1GridView スマートタグ を 参 照 )からプロパ ティビルダーを 選 択 します [C1GridView のプロパティ]ダイアログボックスが 表 示 されます [C1GridView のプロパティ]ダイアログボックスは 以 下 の5 種 類 のタブで 構 成 されます タブ 全 般 列 ページング 書 式 グループ 化 説 明 データソースを 表 示 します ここで ヘッダー フッター ソートの 各 プロパティを 設 定 で きます 表 示 する 列 のタイプを 指 定 して それぞれにプロパティを 設 定 できます ページングを 使 用 するかどうかを 決 定 できます また その 表 示 方 法 と 表 示 場 所 もカス タマイズできます フォント 色 グリッドの 配 置 ヘッダー フッター ページャ 特 定 の 項 目 および 列 を 含 むすべての 内 容 を 設 定 できます 列 のグルーピングのプロパティを 設 定 し グループヘッダー 行 とグループフッター 行 を 書 式 設 定 し 表 示 する 方 法 を 指 定 できます 全 般 タブ 21 Copyright GrapeCity inc. All rights reserved.

23 プロパティビルダー の 全 般 タブは データソースを 表 示 します ここで ヘッダー フッター ソートの 各 プロパティを 設 定 でき ます 全 般 タブは [データ] [ヘッダーとフッター ヘッダーとフッター] [ 動 作 ]および[クライアント 側 ] 設 定 で 構 成 されています 全 般 タブには 以 下 のオプションが 含 まれています [データソース ID]: 現 在 のデータソースを 表 示 します [データソース ID]: 現 在 のデータソースを 表 示 します [ヘッダーの 表 示 ]:このチェックボックスが ON になっている 場 合 (デフォルト) ShowHeader プロパティが True に 設 定 され グリッドのヘッダーが 表 示 されます [フッターの 表 示 ]:このチェックボックスが ON になっている 場 合 ShowFooter プロパティが True に 設 定 され グリッ ドのフッターが 表 示 されます デフォルトでは このチェックボックスは OFF に 設 定 され ShowFooter is False は False になります [フィルタの 表 示 ]:グリッドの 先 頭 にフィルタを 表 示 します デフォルトでは このチェックボックスが OFF で ShowFilter は False になっています [ソートを 有 効 にする]:このチェックボックスが ON になっている 場 合 AllowSorting プロパティが True に 設 定 され ユーザーは 実 行 時 にグリッドをソートできます デフォルトでは このチェックボックスは OFF に 設 定 さ れ AllowSorting は False になります [ 列 の 移 動 を 有 効 にする]:このチェックボックスが ON になっている 場 合 AllowColMoving プロパティが True に 設 定 され ユーザーは 実 行 時 にグリッド 内 の 列 を 移 動 またはその 順 番 を 再 変 更 できます デフォルトでは このチェック ボックスは OFF に 設 定 され AllowPaging は False になります [ 列 のサイズ 変 更 を 有 効 にする]:このチェックボックスが ON になっている 場 合 AllowColSizing プロパティが True に 設 定 され ユーザーは 実 行 時 にグリッドをリサイズできます デフォルトでは このチェックボックスは OFF に 設 定 さ れ AllowColSizing は False になります [グループ 化 を 有 効 にする]:このチェックボックスが ON になっている 場 合 グループの 領 域 がグリッドの 先 頭 に 表 示 さ れます デフォルトでは このチェックボックスは OFFで グループ 化 が 適 用 されていません 22 Copyright GrapeCity inc. All rights reserved.

24 列 タブ プロパティビルダーの 列 タブでは それぞれのプロパティを 表 示 および 設 定 する 列 のタイプを 指 定 します 列 タブは 列 の 生 成 列 リスト および 列 のプロパティセクションから 構 成 されます 列 タブには 以 下 のオプションとセクションが 含 まれています [ 実 行 時 に 列 を 自 動 作 成 ]:このチェックボックスが ON になっている 場 合 (デフォルト) AutoGenerateColumnsプロ パティが True に 設 定 され 列 オブジェクトが 生 成 され 自 動 的 に 表 示 されます グリッドが 連 結 されている 場 合 この オプションは 自 動 的 に OFF になる 場 合 があることに 注 意 してください [ 使 用 可 能 な 列 ]:このウィンドウは 使 用 可 能 な 列 のタイプを 表 示 します 使 用 可 能 な 列 のタイプには 次 のものがありま す C1Band: 複 数 レベルの 列 ヘッダーの 作 成 に 使 用 されるバンド 列 を 表 示 します C1BoundField: データソースのフィールドに 連 結 される 列 を 表 示 します C1ButtonField: 各 項 目 のコマンドボタンを 表 示 します C1CheckBoxField: 各 項 目 に 対 してブール 型 チェックボックスを 表 示 します C1CommandField: 各 項 目 に 対 して 編 集 中 のコマンドを 含 む 列 を 表 示 します C1HyperLinkField: 各 項 目 をハイパーリンクとして 表 示 します C1TemplateField: 指 定 のテンプレートに 従 って 列 の 各 項 目 を 表 示 します グリッドがデータソースに 連 結 されている 場 合 データソースから 使 用 可 能 な 列 が 使 用 可 能 な 列 ウィンドウの データフィールド オプションでリスト 表 示 されます [ 選 択 した 列 ]:このウィンドウは 現 在 選 択 されている 列 を 表 示 します グリッドがデータソースに 連 結 されている 場 合 連 結 された 列 がこのウィンドウに 表 示 されます [ 選 択 した 列 ]のリストに 列 を 追 加 するには [ 使 用 可 能 な 列 ]のリストで 列 を 選 択 し 移 動 矢 印 ボタンをクリックして [ 選 択 した 列 ]のリストに 項 目 を 移 動 します 列 の 順 序 を 移 動 するには ウィンドウの 右 にある 上 および 下 矢 印 を 選 択 します リストから 列 を 削 除 するには ウィンド 23 Copyright GrapeCity inc. All rights reserved.

25 ウの 右 にある 削 除 ボタンをクリックします [ 列 のプロパティ]:このリストには 使 用 可 能 な 列 のプロパティが 表 示 されます 列 のプロパティを 変 更 するには [ 選 択 した 列 ]のリストにある 列 をクリックし 列 のプロパティウィンドウのプロパティの 横 にあるテキストボックスまたはドロップ ダウン 矢 印 をクリックし その 値 を 変 更 します ページング タブ プロパティビルダーの ページング タブでは ページングを 使 用 するかどうかを 決 定 できます また その 表 示 方 法 と 表 示 場 所 もカスタマイズできます ページング タブには ページングセクションとページの ページの 移 動 セクションが 含 まれています ページング タブには 以 下 のオプションが 含 まれています [ページングを 有 効 にする]:このチェックボックスが ON になっている 場 合 AllowPaging プロパティが True に 設 定 され ページングがグリッドに 含 まれます デフォルトでは このチェックボックスは OFF に 設 定 され AllowPaging は False になります [カスタムページングを 有 効 にする]:[ページングを 有 効 にする]チェックボックスが ON の 場 合 このオプションが 有 効 になります チェックボックスが ON の 場 合 AllowCustomPaging プロパティが True に 設 定 され カスタムページン グが 使 用 可 能 になります デフォルトでは このチェックボックスは OFF に 設 定 され AllowCustomPaging は False になります [ページサイズ]:[ページングを ページングを 有 効 にする]チェックボックスが ON の 場 合 このオプションが 有 効 になります [ページ サイズ]テキストボックスで PageSizeプロパティを 設 定 し 各 ページのグリッドで 表 示 できる 項 目 数 を 選 択 できます デ フォルトでは PageSize は 10 です [ 移 動 ボタンの 表 示 ]:このオプションは [ページングを 有 効 にする]チェックボックスが ON の 場 合 に 有 効 になります このチェックボックスが ON になっている 場 合 (デフォルト) グリッドにページングコントロールが 表 示 されます [ 位 置 ]:このオプションは [ページングを 有 効 にする]チェックボックスと[ 移 動 ボタンの 表 示 ]チェックボックスが ON の 24 Copyright GrapeCity inc. All rights reserved.

26 ときに 有 効 になります このオプションは グリッドにページャコントロールを 表 示 する 場 所 を 指 定 できます 以 下 のオプ ションがあります Bottom:ページングコントロールがグリッドの 下 部 に 表 示 されます これはデフォルト 設 定 です Top:ページングコントロールがグリッドの 上 部 に 表 示 されます TopAndBottom:ページングコントロールがグリッドの 上 部 と 下 部 に 表 示 されます [モード]:このオプションは [ページングを 有 効 にする]チェックボックスと[ 移 動 ボタンの 表 示 ]チェックボックスが ON のときに 有 効 になります このオプションは グリッドに 表 示 するページャコントロールの 種 類 を 指 定 できます 以 下 のオ プションがあります [NextPrevious]: 前 へ ボタンと 次 へ ボタンのページャコントロールが 使 用 されます [Numeric]:ユーザーがページに 直 接 アクセスできる 数 字 リンクボタンのページャコントロールが 使 用 されま す これはデフォルト 設 定 です [NextPreviousFirstLast]: 前 へ 次 へ 先 頭 へ および 最 後 へ ボタンのページャコントロールが 使 用 されます [NumericFirstLast]: 番 号 付 き 先 頭 へ および 最 後 へ ボタンのページャコントロールが 使 用 されます [ボタンカウント]:このオプションは [Numeric] [NumericFirstLast]が 選 択 されているときにのみ 有 効 になり ペー ジャコントロールに 表 示 するページボタンの 数 を 指 定 します [ 最 初 のページのテキスト] [ 最 初 のページの Image クラス] [ 最 終 ページのテキスト] および[ 最 後 のページの Image クラス]: これらのオプションは [NextPreviousFirstLast]または[NumericFirstLast]が 選 択 されているとき にのみ 有 効 になります [ 最 初 のページのテキスト]オプションは FirstPageText プロパティを 設 定 し 先 頭 へ ページボタンを 表 示 す るテキストを 指 定 します [ 最 初 のページの Image クラス]オプションは FirstPageImageUrl プロパティを 設 定 し 先 頭 へ ページボタ ンを 表 示 する 画 像 を 指 定 します [ 最 初 のページの Image クラス]テキストボックスの 横 にあるボタンをクリック して 画 像 を 選 択 します [ 最 終 ページのテキスト]オプションは LastPageText プロパティを 設 定 し 最 後 へ ページボタンを 表 示 する テキストを 指 定 します [ 最 後 のページの Image クラス]オプションは C1GridViewPagerSettings.LastPageImageUrl プロパティを 設 定 し 最 後 へ ページボタンを 表 示 する 画 像 を 指 定 します [ 最 後 のページの Image クラス]テキストボック スの 横 にあるボタンをクリックして 画 像 を 選 択 します [ 次 のページのテキスト] [ 次 のページの Image クラス] [ 前 のページのテキスト] および[ 前 のページの Image ク ラス]: これらのオプションは [NextPrevious]または[NextPreviousFirstLast]が 選 択 されているときにのみ 有 効 に なります [ 次 のページのテキスト]オプションは NextPageText プロパティを 設 定 し 次 へ ページボタンを 表 示 するテ キストを 指 定 します [ 次 のページの Image クラス]オプションは NextPageImageUrl プロパティを 設 定 し 次 へ ページボタンを 表 示 する 画 像 を 指 定 します [ 次 のページの Image クラス]テキストボックスの 横 にあるボタンをクリックして 画 像 を 選 択 します [ 前 のページのテキスト]オプションは PreviousPageText プロパティを 設 定 し 前 へ ページボタンを 表 示 す るテキストを 指 定 します [ 前 のページの Image クラス]オプションは C1GridViewPagerSettings.PreviousPageImageUrl プロパ ティを 設 定 し 前 へ ページボタンを 表 示 する 画 像 を 指 定 します [ 前 のページの Image クラス]テキストボック スの 横 にあるボタンをクリックして 画 像 を 選 択 します 書 式 タブ プロパティビルダーの 書 式 タブでは フォント 色 グリッドの 配 置 およびヘッダー フッター ページャ 特 定 の 項 目 および 列 を 含 むすべての 内 容 を 設 定 できます 書 式 タブには オブジェクト 列 および 列 のプロパティセクションが 含 まれていま す 25 Copyright GrapeCity inc. All rights reserved.

27 書 式 タブには 以 下 のセクションが 含 まれています [オブジェクト]: 使 用 可 能 なオプションを 表 示 します オブジェクトを 選 択 し 列 のプロパティウィンドウでその 書 式 設 定 プ ロパティを 設 定 します [ 列 ]: 使 用 可 能 な 列 のリストを 表 示 します グリッドが 連 結 されている 場 合 連 結 列 がこのリストに 表 示 されます 列 を 選 択 し 列 のプロパティウィンドウでその 書 式 設 定 プロパティを 設 定 します [ 列 のプロパティ]:オブジェクトまたは 列 が 適 切 なペインから 選 択 されている 場 合 そのオブジェクトまたは 列 に 設 定 で きる 使 用 可 能 な 書 式 設 定 プロパティが 列 のプロパティウィンドウに 表 示 されます グループ 化 タブ プロパティビルダーの グループ 化 タブでは 列 のグルーピングのプロパティを 設 定 し グループヘッダー 行 とグループフッ ター 行 を 書 式 設 定 し 表 示 する 方 法 を 指 定 できます グループ 化 タブには 列 リストセクションと グループ 化 のプロパティセ クションが 含 まれています 26 Copyright GrapeCity inc. All rights reserved.

28 グループ 化 タブには 以 下 のセクションが 含 まれています [ 列 リスト]: 使 用 可 能 な 列 のリストを 表 示 します グリッドが 連 結 されている 場 合 連 結 列 がこのリストに 表 示 されます 列 を 選 択 し グループ 化 のプロパティウィンドウでそのグルーピングのプロパティを 設 定 します [グループ 化 のプロパティ]: 列 リストから 列 を 選 択 すると その 列 に 設 定 できる 使 用 可 能 なグルーピングのプロパティが グループ 化 のプロパティウィンドウに 表 示 されます グルーピング 動 作 をカスタマイズし グループヘッダー 行 とグルー プフッター 行 を 書 式 設 定 し 表 示 する 方 法 を 指 定 できます C1GridView の 動 作 GridView for ASP.NET Web Forms を 使 用 すると C1GridView コンポーネントで 生 成 した 表 に 表 示 する 項 目 を 選 択 編 集 削 除 ソートできます GridView for ASP.NET Web Formsは ページングもサポートしているため データを 複 数 のペー ジに 分 けて 表 示 し デフォルトまたはカスタマイズした 移 動 ボタンを 使 ってアクセスできます C1GridView コンポーネントを 使 用 して 作 成 した 表 の 各 列 は データソースのフィールドに 対 応 します ユーザーは 表 示 対 象 とする 列 表 示 する 列 のタイプ 表 全 体 の 外 観 を 制 御 できます AutoGenerateColumns プロパティを 使 用 して 列 を 自 動 的 か 手 動 で またはその 両 方 の 方 法 で 作 成 できます このプロパ ティを True(デフォルト)に 設 定 すると データソースの 各 フィールドに 対 し C1BoundField が 作 成 されます このプロパティを False に 設 定 すると 表 示 する 列 を 指 定 して Columns コレクションに 追 加 できます 注 意 : 明 示 的 に 宣 言 された 列 が 最 初 に 配 置 され その 後 自 動 的 に 生 成 された 列 が 続 きます 自 動 的 に 生 成 された 列 は Columns コレクションに 追 加 されません クラス 階 層 27 Copyright GrapeCity inc. All rights reserved.

29 以 下 のリストでは GridView for ASP.NET Web Forms に 含 まれる より 重 要 なクラス 間 のクラス 関 係 について 説 明 します C1.Web.Wijmo.Controls.C1GridView.C1GridView : System.Web.UI.WebControls.WebControl グリッドの 機 能 の 大 部 分 をカプセル 化 します このコンポーネントは Visual Studio のツールボックスに 表 示 されます C1.Web.Wijmo.Controls.C1GridView.C1Field : System.Object 列 のベースクラス C1.Web.Wijmo.Controls.C1GridView.C1GridViewRow : System.Web.UI.WebControls.TableRow グリッドの 項 目 C1.Web.Wijmo.Controls.C1GridView.C1GridViewRowCollection : System.Collections.CollectionBase 項 目 のコレクション C1.Web.Wijmo.Controls.C1GridView.PagerStyle : System.Web.UI.WebControls.TableItemStyle ページャのスタイル ページャを 表 示 / 非 表 示 およびその 表 示 方 法 を 指 定 します C1.Web.Wijmo.Controls.C1GridView.GroupInfo : System.Object グループ 化 されたヘッダー 行 およびフッター 行 を 表 示 する 方 法 と 場 所 を 指 定 します テーマ C1GridView には コントロールの 外 観 を 簡 単 に 変 更 できるテーマが 容 易 されています このコントロールには 複 数 の 組 み 込 みテーマが 含 まれており アプリケーションのコントロールをすばやくカスタマイズできます C1GridView のタスクメニュー プロパティウィンドウやコードからテーマを 簡 単 に 変 更 できます テーマの 変 更 C1GridView のテーマは デザイン 時 にプロパティウィンドウを 使 用 して 変 更 できます 1. C1GridView コントロールを 一 回 クリックして 選 択 状 態 にし プロパティウィンドウへ 移 動 します 2. プロパティウィンドウでは テーマドロップダウンをクリックしてスタイルを 選 択 します 例 えば rocket 選 択 したテーマはグリッドに 適 用 されます 提 供 されるテーマ 以 下 のテーマは GridView for ASP.NET Web Forms に 含 まれています : Arctic Arctic Aristo Cobalt Midnight Rocket Sterling 以 下 の 画 像 は Arctic テーマを 表 示 します 28 Copyright GrapeCity inc. All rights reserved.

30 Aristo 以 下 の 画 像 は Aristo テーマを 表 示 します これは C1GridView のデフォルト 外 観 を 表 します Cobalt 以 下 の 画 像 は Cobalt テーマを 表 示 します 29 Copyright GrapeCity inc. All rights reserved.

31 Midnight 以 下 の 画 像 は Midnight テーマを 表 示 します Rocket 以 下 の 画 像 は Rocket テーマを 表 示 します 30 Copyright GrapeCity inc. All rights reserved.

32 Sterling 以 下 の 画 像 は Sterling テーマを 表 示 します キーボードによるナビゲーション 実 行 時 に キーボードナビゲーションを 使 用 して グリッドをナビゲートできます 使 用 可 能 なキーボードナビゲーションは Microsoft Excel などの 製 品 に 似 ているため ユーザーはより 簡 単 にグリッドを 直 感 的 にナビゲートできます また キーボー ドナビゲーションにより グリッドのナビゲートや 操 作 のアクセシビリティも 向 上 します 下 表 は 可 能 なインタラクティブ 操 作 の 説 明 です TabNavigation プロパティが ControlNavigation に 設 定 された 場 合 現 在 のセルのナビゲーションはグリッド 内 のコントロー ルの 入 力 フォーカス(ある 場 合 )に 従 います TabNavigation が TabNavigation の 場 合 現 在 のセルは 左 から 右 に および 上 31 Copyright GrapeCity inc. All rights reserved.

33 から 下 に 循 環 します ナビゲーションが 右 下 端 のセルに 到 達 したとき [Tab]キーを 押 すと 現 在 のセルはグリッドの 左 上 端 のセ ルにジャンプします オプ ション 説 明 上 矢 印 下 矢 印 左 矢 印 右 矢 印 フォーカスのある 現 在 のセルを1セル 上 に 移 動 します フォーカスのある 現 在 のセルを1セル 下 に 移 動 します フォーカスのある 現 在 のセルを1セル 左 に 移 動 します フォーカスのある 現 在 のセルを1セル 右 に 移 動 します Home フォーカスのある 現 在 のセルを 現 在 の 行 の 先 頭 セルに 移 動 します End Enter Page Up Page Down Tab 英 数 字 キー フォーカスのある 現 在 のセルを 現 在 の 行 の 末 尾 セルに 移 動 します フォーカスのある 現 在 のセルを1セル 下 に 移 動 します フォーカスのある 現 在 のセルを 現 在 の 列 の 先 頭 セルに 移 動 します フォーカスのある 現 在 のセルを 現 在 の 列 の 末 尾 セルに 移 動 します 現 在 の 行 の 次 のセルにフォーカスを 移 動 します フォーカスのあるセルがグリッドの 末 尾 セルの 場 合 は タブキーで フォーカスはグリッドの 先 頭 セルに 移 動 されます C1GridView の KeyActionTab プロパティが MoveAcrossOut に 設 定 した 場 合 は フォーカスが 末 尾 セルから 次 のコントロールに 移 動 されます セルが 選 択 されたとき 任 意 の 英 数 字 キーを 入 力 するとセルはクライアント 側 編 集 モードに 入 ります キーボードナビゲーション 実 行 時 に キーボードナビゲーションを 使 用 して グリッドをナビゲートできます 使 用 可 能 なキーボードナビゲーションは Microsoft Excel などの 製 品 に 似 ているため ユーザーはより 簡 単 にグリッドを 直 感 的 にナビゲートできます また キーボード ナビゲーションにより グリッドのナビゲートや 操 作 のアクセシビリティも 向 上 します 下 表 は 可 能 なインタラクティブ 操 作 の 説 明 です オプ ション 上 矢 印 下 矢 印 左 矢 印 右 矢 印 説 明 フォーカスのある 現 在 のセルを1セル 上 に 移 動 します フォーカスのある 現 在 のセルを1セル 下 に 移 動 します フォーカスのある 現 在 のセルを1セル 左 に 移 動 します フォーカスのある 現 在 のセルを1セル 右 に 移 動 します 32 Copyright GrapeCity inc. All rights reserved.

34 Home フォーカスのある 現 在 のセルを 現 在 の 行 の 先 頭 セルに 移 動 します End Enter Page Up Page Down Tab 英 数 字 キー フォーカスのある 現 在 のセルを 現 在 の 行 の 末 尾 セルに 移 動 します フォーカスのある 現 在 のセルを1セル 下 に 移 動 します フォーカスのある 現 在 のセルを 現 在 の 列 の 先 頭 セルに 移 動 します フォーカスのある 現 在 のセルを 現 在 の 列 の 末 尾 セルに 移 動 します 現 在 の 行 の 次 のセルにフォーカスを 移 動 します フォーカスのあるセルがグリッドの 末 尾 セルの 場 合 は タブキーで フォーカスがグリッドの 先 頭 セルに 移 動 されます C1GridView の KeyActionTab プロパティが MoveAcrossOut に 設 定 した 場 合 は フォーカスが 末 尾 セルから 次 のコントロールに 移 動 されます セルが 選 択 されたとき 任 意 の 英 数 字 キーを 入 力 するとセルはクライアント 側 編 集 モードに 入 ります 行 の 編 集 C1GridView コンポーネントの 各 行 は データソースのレコードを 表 します 行 には 異 なるスタイルを 選 択 編 集 削 除 適 用 することができます 手 動 でデータを 作 成 している 場 合 C1ButtonField および C1GridView.RowEditing RowUpdating C1GridView.RowCancelingEdit イベントの 各 コードを 追 加 して 各 行 を 編 集 または 削 除 対 象 として 選 択 できます データソースコントロールに 接 続 する 場 合 これはすべて 自 動 的 に 対 処 されます EditRowStyle プロパティを 使 用 して 行 の 外 観 を 決 定 できます 行 の 編 集 についての 詳 細 は タスク 別 ヘルプを 参 照 してくだ さい RowMerge プロパティを 使 用 すると 同 一 のテキストを 含 む 行 をマージできます プロパティビルダー プロパティビルダーを 使 えば マージする 行 とマージする 方 法 の 指 定 が 行 えます 詳 細 は 行 のマージを 参 照 してください Action プロパティを 設 定 することで ユーザーが 実 行 時 にレコードを 編 集 するときに AJAX を 使 用 してグリッドを 更 新 できま す 詳 細 については レコードの 編 集 を 参 照 してください グルーピング C1GridView のデータグルーピング 機 能 を 使 用 すれば データ 集 計 を 自 動 的 に 計 算 して 縮 小 / 展 開 が 可 能 なノードを 持 つ ツリーを 作 成 できます ShowGroupArea 実 行 時 に C1GridView.AllowGroupingを True に 設 定 してデータをグループ 化 することが 可 能 です(デ フォルトとして False に 設 定 されています) が True の 場 合 グルーピング 領 域 がグリッドの 最 上 部 に 表 示 されます 33 Copyright GrapeCity inc. All rights reserved.

35 実 行 時 にグループ 化 するには 列 ヘッダーをグルーピング 領 域 にドラッグするだけです 実 行 時 の 列 操 作 を 可 能 にするに は AllowColMoving プロパティを True に 設 定 する 必 要 があることに 注 意 してください C1GridView のデータグルーピング 機 能 は C1Field クラスの2つのプロパティによって 制 御 されます GroupInfo プロパティは グループの 外 観 位 置 グループヘッダー 行 およびグループヘッダー 行 の 内 容 の 他 列 に 対 してグループを 作 成 するかどうかを 決 定 します Aggregate プロパティは この 列 に 対 する 計 算 が 行 われ グループヘッダー 行 およびグループフッター 行 に 含 まれる 集 計 のタイプを 指 定 します 通 常 は GroupInfo プロパティは グループ 化 するカテゴリ(OrderYear Country など)を 含 む 列 に 対 して 設 定 しま す Aggregateプロパティは 集 計 する 値 を 含 む 列 (Amount Sales Expenses など)に 対 して 設 定 します GroupAreaCaption プロパティを 設 定 して グルーピング 領 域 に 表 示 するテキストをカスタマイズできます デザイン 時 のグループ 化 のプロパティの 設 定 プロパティビルダーを 使 用 して デザイン 時 に Grouping プロパティを 設 定 できます ダイアログボックスの3つのタブを 使 用 し て データグルーピングのそれぞれの 側 面 を 設 定 します グルーピングタブ このタブには 列 のリストが 含 まれます グループ 化 するそれぞれの 列 に 対 して Position プロパティを 設 定 し グ ループヘッダー 行 とグループフッター 行 を 表 示 する 場 所 を 指 定 します(Position を None に 設 定 すると 列 のグルーピ ングは 削 除 されます) また HeaderText プロパティ(および/または FooterText) プロパティ)を 設 定 して グルー プヘッダー 行 /グループフッター 行 の 表 示 内 容 を 決 定 します オプションで グループヘッダースタイル グループフッ タースタイルを 設 定 します 列 タブ 集 計 するそれぞれの 列 に 対 して Aggregate プロパティを 設 定 します 通 常 は これらは 数 値 を 含 む 列 で グループ 化 されません 詳 細 については 列 タブ を 参 照 してください 書 式 設 定 タブ グループ 化 するそれぞれの 列 を 選 択 し グループヘッダー 行 およびグループフッター 行 にスタイルを 設 定 します 通 常 は 背 景 色 を 設 定 して グループヘッダー 行 やグループフッター 行 を 通 常 の 行 より 目 立 つようにします 詳 細 について は 書 式 タブ を 参 照 してください プロパティビルダーについての 詳 細 は プロパティビルダーの 使 用 を 参 照 してください 34 Copyright GrapeCity inc. All rights reserved.

36 実 行 時 の Grouping プロパティの 設 定 Grouping プロパティは 実 行 時 に 設 定 することもできます この 機 能 を 使 うと ユーザーの 選 択 に 基 づいてグルーピングを 設 定 できるため 柔 軟 性 が 増 大 します たとえば 以 下 のコードは ユーザーによる 選 択 が 可 能 な4つのモードの1つで 同 じデータを 表 示 するようグリッドを 設 定 します ( 完 全 なサンプルは 製 品 パッケージに 付 属 しています) Visual Basic コードの 書 き 方 Visual Basic Private Sub _rblview_selectedindexchanged(byval sender As Object, ByVal e As System.EventArgs) ' グループ 化 /マージを 設 定 します Dim col As C1.Web.Wijmo.Controls.C1GridView.C1Field = C1GridView1.Columns(0) Select Case _rblview.selecteditem.text ' 従 来 のモード:グループ 化 またはマージしません Case "Traditional" col.visible = True col.rowmerge = C1.Web.Wijmo.Controls.C1GridView.RowMerge.None col.groupinfo.position = C1.Web.Wijmo.Controls.C1GridView.GroupPosition.None ' マージする:グルー 化 せず 同 じ 値 は 列 にマージします Case "Merged" col.visible = True col.rowmerge = C1.Web.Wijmo.Controls.C1GridView.RowMerge.None col.groupinfo.position = C1.Web.Wijmo.Controls.C1GridView.GroupPosition.None ' グループ 化 する: 縮 小 可 能 なヘッダーでグループ 化 し グループ 化 した 値 をマージします Case "Grouped" col.visible = True col.rowmerge = C1.Web.Wijmo.Controls.C1GridView.RowMerge.None col.groupinfo.position = C1.Web.Wijmo.Controls.C1GridView.GroupPosition.Header ' 概 要 : 縮 小 可 能 なヘッダーでグループ 化 し グループ 化 した 値 を 非 表 示 にします Case "Summary" col.visible = False col.rowmerge = C1.Web.Wijmo.Controls.C1GridView.RowMerge.None col.groupinfo.position = C1.Web.Wijmo.Controls.C1GridView.GroupPosition.Header End Select End Sub C# コードの 書 き 方 C# private void _rblview_selectedindexchanged(object sender, System.EventArgs e) { // グルー 化 およびマージを 設 定 します C1.Web.Wijmo.Controls.C1GridView.C1Field col = C1GridView1.Columns[0]; switch (_rblview.selecteditem.text) 35 Copyright GrapeCity inc. All rights reserved.

37 { // 従 来 のモード:グループ 化 またはマージしません case "Traditional": col.visible = true; col.rowmerge = C1.Web.Wijmo.Controls.C1GridView.RowMerge.None; col.groupinfo.position = C1.Web.Wijmo.Controls.C1GridView.GroupPosition.None; break; // マージする:グループ 化 せず 同 じ 値 は 列 にマージします case "Merged": col.visible = true; col.rowmerge = C1.Web.Wijmo.Controls.C1GridView.RowMerge.None; col.groupinfo.position = C1.Web.Wijmo.Controls.C1GridView.GroupPosition.None; break; // グループ 化 する: 縮 小 可 能 なヘッダーでグループ 化 し グループ 化 した 値 をマージします case "Grouped": col.visible = true; col.rowmerge = C1.Web.Wijmo.Controls.C1GridView.RowMerge.None; col.groupinfo.position = C1.Web.Wijmo.Controls.C1GridView.GroupPosition.Header; break; // 概 要 : 縮 小 可 能 なヘッダーでグループ 化 し グループ 化 した 値 を 非 表 示 にします case "Summary": col.visible = false; col.rowmerge = C1.Web.Wijmo.Controls.C1GridView.RowMerge.None; col.groupinfo.position = C1.Web.Wijmo.Controls.C1GridView.GroupPosition.Header; break; 完 全 なサンプルについては ComponentOne HelpCentral Sample ページの Grouping サンプルを 参 照 してください グループの 縮 小 と 展 開 GridView for ASP.NET Web Forms は ユーザーがサーバーへのラウンドトリップなしでグループを 縮 小 / 展 開 できるクライア ント 側 スクリプトを 生 成 します OutlineMode プロパティを StartCollapsed または StartExpanded に 設 定 すると グリッドは 各 グループヘッダー 行 の 横 に 展 開 / 縮 小 アイコンを 表 示 します ユーザーはこれらのアイコンをクリックして グループを 縮 小 / 展 開 して データの 全 体 構 造 または 詳 細 を 確 認 できます アウトラインノードの 動 作 は 次 のようになります クリック ノードが 現 在 展 開 された 状 態 にある 場 合 縮 小 されます 下 位 のグループヘッダーおよびデータはまったく 表 示 されなくなります ノードが 現 在 縮 小 された 状 態 にある 場 合 展 開 されます 下 位 のグループヘッダーが 存 在 する 場 合 これらは 縮 小 された 状 態 で 表 示 されます 下 位 のグループヘッダーが 存 在 しない 場 合 データは 表 示 されます [Shift]キーを 押 してクリック クリックされたノードの 下 のすべてのノードとデータが 表 示 されます 36 Copyright GrapeCity inc. All rights reserved.

38 CollapsedImageClass と ExpandedImageClass プロパティを 使 用 して グループヘッダーに 対 し 異 なる 複 数 のアイコンを 選 択 できます グルーピングについての 詳 細 は GridView for ASP.NET Web Forms タスク 別 ヘルプ を 参 照 してください ソート C1GridView コントロールは コーディングが 不 要 な 組 み 込 みのソート 機 能 を 提 供 します 列 のカスタムの SortExpression プ ロパティ 値 や Sorting と Sorted イベントを 使 用 して C1GridView コントロールのソート 機 能 をさらにカスタマイズできます C1GridView プロパティを True に 設 定 すると AllowSorting コントロールの デフォルトのソート 動 作 を 有 効 にできま す AllowSorting が True の 場 合 C1GridView コントロールは LinkButton コントロールを 列 ヘッダーに 表 示 し 各 列 の SortExpression プロパティを 連 結 先 となるデータフィールドの 名 前 に 暗 黙 的 に 設 定 します たとえば グリッドが Northwind sample データベースの Employees テーブルの City 列 を 表 示 する 列 を 含 んでいる 場 合 その 列 の SortExpression は City に 設 定 されます SortDirection プロパティでソート 方 向 を 指 定 または 設 定 できます(Ascending Descending または None) 実 行 時 に ユーザーはその 列 でソートする 列 見 出 しの LinkButton コントロールをクリックできます リンクをクリックすると ページはポストバックを 実 行 して C1GridView コントロールの Sorting イベントを 発 生 させます クエリーが 実 行 された 後 グ リッドの Sorted が 発 生 します 最 後 に データソースコントロールは C1GridView コントロールを 再 ソートされたクエリーの 結 果 に 連 結 します 列 がソートされると 列 ヘッダーは 実 行 時 にソート 方 向 を 示 すソートインジケータ( 矢 印 アイコン)を 表 示 しま す 次 の 画 面 では 商 品 名 列 がソートされました データソースコントロールがソートをサポートしていないときに ソート 操 作 が C1GridView コントロールで 実 行 される と C1GridView コントロールは NotSupportedException 例 外 をスローすることに 注 意 してください この 例 外 を Sorting イベントのハンドラで 取 得 し データソースを 確 認 してソートがサポートされているか または 独 自 のソートロジックを 使 用 してい るかを 決 定 します Actionプロパティを 設 定 することで ユーザーが 実 行 時 に 列 をソートするときに AJAX を 使 用 してグリッドを 更 新 できます 例 に ついては 列 のソート を 参 照 してください フィルタリング C1GridView コントロールは コーディングが 不 要 な 組 み 込 みのデータフィルタ 機 能 を 提 供 します 実 行 時 にデータのフィルタ リングを 可 能 にするには ShowFilterプロパティを True に 設 定 する 必 要 があります(デフォルトでは False) ShowFilter が 37 Copyright GrapeCity inc. All rights reserved.

39 True の 場 合 フィルタバーがグリッド 上 部 の グリッドの 列 見 出 しの 下 に 表 示 されます 実 行 時 にグリッドのデータをフィルタするには フィルタバーにテキストを 入 力 して フィルタリングする 列 のフィルタの 行 にある ドロップダウン 矢 印 をクリックし メニューからフィルタタイプを 選 択 します フィルタを 削 除 するには フィルタリングする 列 のフィ ルタの 行 にあるドロップダウン 矢 印 をクリックして Nofilter を 選 択 します 次 の 画 面 では 単 価 列 は 100 と 等 しい 値 のみを 表 示 するようにフィルタされています FilterOperator プロパティを 設 定 して フィルタ 条 件 を 選 択 できます(プロパティビルダー プロパティビルダーの 列 タブでこのプロパティを 設 定 で きることに 注 意 してください) デフォルトでは FilterOperator は Contains に 設 定 されますが FilterOperator を 以 下 のオ プションに 設 定 できます オプション NoFilter Contains(デフォルト) NotContain BeginsWith EndsWith Equals NotEqual Greater Less GreaterOrEqual LessOrEqual IsEmpty NotIsEmpty IsNull NotIsNull Custom 説 明 フィルタを 適 用 しません 列 にフィルタ 項 目 を 含 めます 列 にフィルタ 項 目 を 含 めません 列 の 項 目 はフィルタ 項 で 開 始 します 列 の 項 目 はフィルタ 項 で 終 了 します 列 の 項 目 はフィルタ 項 と 厳 密 に 等 しくなります 列 の 項 目 はフィルタ 項 と 厳 密 に 等 しくありません 列 の 項 目 が( 数 値 )フィルタ 項 より 小 さくなります 列 の 項 目 が( 数 値 )フィルタ 項 より 大 きくなります 列 の 項 目 が( 数 値 )フィルタ 項 より 大 きいか 等 しくなります 列 の 項 目 が( 数 値 )フィルタ 項 より 小 さいか 等 しくなります 列 の 項 目 は 空 です 列 の 項 目 は 空 ではありません 列 の 項 目 は Null です 列 の 項 目 は Null ではありません カスタムフィルタを 適 用 します FilterStyle プロパティを 設 定 して フィルタバーの 外 観 をカスタマイズできます フィルタボタンを 表 示 するに 38 Copyright GrapeCity inc. All rights reserved.

40 は AutoGenerateFilterButton を True に 設 定 するか 手 動 で C1CommandField を 作 成 して その ShowFilterButton プロパティを True に 設 定 する 必 要 があります フィルタボタンが 表 示 されない 場 合 ユーザーは[Enter]キーを 押 してフィルタ を 起 動 できます Actionプロパティを 設 定 することで ユーザーが 実 行 時 に 列 をフィルタリングするときに AJAX を 使 用 してグリッドを 更 新 できま す 詳 細 については 列 のフィルタリング を 参 照 してください C1BoundFieldとC1TemplateField 列 でのフィルタリング C1GridViewのコントロールは 下 記 の 使 用 可 能 なプロパティによってC1BoundFieldとC1TemplateField 両 方 の 列 にフィルタ リングを 対 応 します DataField フィルタ 設 定 が 適 用 されているデータフィールドを 指 定 する 文 字 列 型 の 値 です FilterOperator FilterOperatorを 指 定 する 列 挙 型 の 値 です DataFieldが 設 定 されている 場 合 のみ 動 作 します FilterValue フィルタの 値 を 指 定 します DataFieldが 設 定 されている 場 合 のみ 動 作 します FilterCustomOperator FilterOperatorプロパティはFilterOperator.Customに 設 定 されている 場 合 フィルタオペレーターとして 使 用 します 文 字 列 型 の 値 であり DataFieldが 設 定 された 場 合 のみ 動 作 します FilterStyle フィルタアイテムにカスタムスタイルを 適 用 します TableItemStyle 型 の 値 であり DataFieldが 設 定 された 場 合 のみ 動 作 します ShowFilter フィルタテキストボックスをフィルタ 行 で 表 示 するかどうかを 指 定 します DataFieldプロパティを 設 定 するとエンドユー ザーによるフィルタリングが 有 効 になります ShowFilterプロパティの 値 はブール 型 です DataFieldが 設 定 されている 場 合 のみ 動 作 します FilterExpression 複 数 フイールドのフィルタ 設 定 を 持 つフィルタ 条 件 を 示 します 複 雑 なフィルター 条 件 を 適 用 するには ユーザーがこの プロパティにフィルタ 条 件 を 設 定 することができます 値 は 文 字 列 型 です DataFieldが 設 定 されていない 場 合 動 作 しま す 以 下 のコードはグリッドでC1TemplateFieldのShowFilterとFilterValueの 設 定 のフィルタリングを 示 します ソースビュー <Columns> <wijmo:c1boundfield DataField="ProductName" SortExpression="ProductName" HeaderText="ProductName" FilterValue="ライフマーガリン" ShowFilter="true"> </wijmo:c1boundfield> <wijmo:c1boundfield DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice"> </wijmo:c1boundfield> <wijmo:c1boundfield DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" 39 Copyright GrapeCity inc. All rights reserved.

41 SortExpression="QuantityPerUnit"> </wijmo:c1boundfield> <wijmo:c1boundfield DataField="UnitsInStock" HeaderText="UnitsInStock" SortExpression="UnitsInStock"> </wijmo:c1boundfield> <wijmo:c1checkboxfield DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued"> </wijmo:c1checkboxfield> </Columns> The output for the above code is as shown: 以 下 のコードはグリッドでC1TemplateFieldのFilterOperator とFilterValueの 設 定 のフィルタリングを 示 します ソースビュー <Columns> <wijmo:c1templatefield DataField="ProductName" HeaderText="Product Name" FilterOperator="BeginsWith" FilterValue=" 果 "> <ItemTemplate> <asp:label runat="server" Font-Italic="true" ID="lb1l" Text='<%# Bind("ProductName") %>'> </asp:label> </ItemTemplate> </Columns> 以 下 の 画 像 は 上 記 のコードの 出 力 を 示 されています ページング C1GridView コントロールは コーディングが 不 要 の 組 み 込 みのデータページング 機 能 を 提 供 します デフォルトでは グリッドは 連 続 した1つのウィンドウで 表 示 されます 選 択 すると グリッドを 複 数 ページに 分 けた ページ に 表 示 できます ページングが 設 定 される と 実 行 時 に ユーザーは グリッドの 上 部 または 下 部 のボタンまたはリンクからグリッドの 各 ページに 移 動 できます ページングの 追 加 の 例 については ページングの 追 加 トピックを 参 照 してください 実 行 時 にデータのページングを 可 能 にするには AllowPaging プロパティを True に 設 定 する 必 要 があります(デフォルトでは False) Visible が True の 場 合 ページング 移 動 ボタンがデフォルトでグリッド 下 部 のグリッドのフッターに 表 示 されます 選 択 した 場 40 Copyright GrapeCity inc. All rights reserved.

42 合 Position プロパティを 設 定 すると ページングコントロールの 位 置 を 変 更 できます デフォルトでは 10 項 目 がグリッドの 各 ページ に 表 示 されます PageSize プロパティを 設 定 して この 数 値 を 変 更 できます たとえば 以 下 の 画 面 では PageSize が 5 に 設 定 され ています デフォルトでは ページングコントロールは 数 字 リンクとして 表 示 されます Mode プロパティを 設 定 して ページングコントロールの 外 観 を 変 更 できます Mode プロパティを 以 下 のオプションに 設 定 できます モード NextPrevious Numeric(default) 説 明 前 へ と 次 へ ボタンで 構 成 するページングコントロールのセット ページに 直 接 アクセスするための 数 字 リンクボタンで 構 成 するページネーションコントロールのセット NextPreviousFirstLast 前 へ 次 へ> 先 頭 へ および 最 後 へ の 各 ボタンで 構 成 するページネーションコントロールのセッ ト NumericFirstLast 番 号 付 けされた 先 頭 へ と 最 後 へ リンクボタンで 構 成 するページネーションコントロールのセット ページャコントロールのスタイルをカスタマイズするために PagerSettings プロパティを 設 定 できます デザイン 時 にプロパティビル ダー([C1GridView のプロパティ]ダイアログボックス)の ページング タブでページングプロパティに 簡 単 にアクセスできることに 注 意 してください Action プロパティを 設 定 することで ユーザーが 実 行 時 にグリッドをページングするときに AJAX を 使 用 してグリッドを 更 新 できます 詳 細 については グリッドのページング を 参 照 してください 仮 想 スクロール 仮 想 スクロールを 使 用 すると 大 量 データを 表 示 するときにグリッドのレンダリングをスピードアップできます この 機 能 により グリッドはサーバーへのコールバックからデータを 取 得 できるため 滑 らかなスクロールを 維 持 しながらデータロードを 高 速 化 で きます 次 の 例 は ScrollingSettings VirtualizationSettings およびCallbackSettingsプロパティを 設 定 して 行 と 列 に 仮 想 スク ロールを 実 装 する 方 法 を 示 します このマークアップは*.aspx ページの 本 体 のコンテンツに 追 加 できます ソースビュー <asp:content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <asp:scriptmanager ID="ScriptManager1" runat="server"> </asp:scriptmanager> </p> <%--Bind the grid to a datasource--%> <asp:sqldatasource ID="SqlDataSource1" runat="server" ConnectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source= DataDirectory \C1NWind.mdb;Persist Security Info=True" ProviderName="System.Data.OleDb" SelectCommand="SELECT * FROM ORDERS"> </asp:sqldatasource> <%--Set C1GridView's ScrollingSettings.VirtualizationSettings.Mode and 41 Copyright GrapeCity inc. All rights reserved.

43 CallbackSettings.Action--%> <cc1:c1gridview ID="C1GridView1" runat="server" DataSourceID="SqlDataSource1" Height="400px"> <CallbackSettings Action="Scrolling" /> <ScrollingSettings Mode="Both"> <VirtualizationSettings Mode="Both" /> </ScrollingSettings> </cc1:c1gridview> 上 記 の 例 のような 仮 想 スクロールを 実 装 するには 以 下 の 手 順 に 従 います 1. グリッドをデータソースにバインドします 2. ScrollingSettingsプロパティを Bothに 設 定 し 仮 想 スクロール 機 能 を 有 効 にします 3. VirtualizationSettingsのMode 値 をRows Columns またはBothに 設 定 して 行 や 列 のスクロールを 許 可 します 4. ActionプロパティをScrollingに 設 定 します これは スクロール 時 にサーバーへのコールバックを 使 用 するようにグリッ ドに 指 示 します CallbackSettingsプロパティによって 決 定 される 仮 想 スクロールモードには 次 の2つがあります 1つ は 静 的 モードで クライアントはすべてのデータを 利 用 できますが 行 はスクロール 時 にレンダリングされます もう1つ は 動 的 モードで Scrolling 値 によって 設 定 されます データの 新 しい 部 分 は レンダリングが 必 要 になったときに サー バーに 要 求 されます 階 層 化 データの 連 結 C1GridViewでは カスタマイズしたクエリーを 使 用 して サマリー 行 と 詳 細 行 から 成 る 階 層 グリッドにデータを 連 結 できます 階 層 関 係 は C1DetailGridViewの 複 数 のテーブル 間 に 手 作 業 で 定 義 されます これにより 異 なるレベルの 複 数 のレイアウトで 階 層 化 データを 表 示 したり ソート フィルタ フィルタ グループ 化 編 集 などの 機 能 を 提 供 することができます 次 の 図 は 階 層 グリッドで1つの 行 を 展 開 したところです 42 Copyright GrapeCity inc. All rights reserved.

44 重 要 なプロパティ DataSourceID: 各 グリッドビューには そのGridViewでデータ 階 層 を 表 すための 独 自 のデータソースが 必 要 です 各 詳 細 グリッドビューのデータソースは DataSourceIDプロパティを 使 用 して 設 定 されます DataKeyNames:DataKeyNamesプロパティを 使 用 して C1GridViewコントロールの 主 キーを 識 別 します このプロ パティは 接 続 されたデータベースから 文 字 列 の 配 列 としてフィールド 名 を 取 得 します データソースの 各 テーブルの 主 キー 列 は 適 切 な 親 テーブルまたは 子 テーブルのDataKeyNamesプロパティに 追 加 されます ソースビュー <cc1:c1gridview runat="server" DataSourceID="SqlDataSource1" DataKeyNames="CustomerID, CompanyName"> MasterDetailRelation: MasterDetailRelationプロパティを 使 用 して 詳 細 または 子 テーブルと 親 テーブルの 間 の データのリンク 方 法 を 指 定 します これにより MasterDataKeyNameおよびDetailDataKeyNameプロパティを 指 定 することで データソースの2つのテーブルをリンクできます MasterDataKeyName:MasterDataKeyNameプロパティを 使 用 して 親 テーブルと 子 テーブルの 関 係 を 設 定 しま す このプロパティは 親 テーブルのDataKeyNamesで 指 定 されているフィールドと 一 致 するように 設 定 する 必 要 があ ります DetailDataKeyName:DetailDataKeyNameプロパティも 子 テーブルと 親 テーブルの 関 係 を 設 定 するために 使 用 さ れます このプロパティは 詳 細 セクションのデータを 子 テーブルから 取 得 します DetailDataKeyNameとして 設 定 さ れたフィールドは 対 応 する 関 係 の 子 テーブルの 外 部 キーであると 共 に MasterDataKeyNameとして 設 定 された フィールドと 一 致 するように 子 テーブルの 主 キーにもなります ソースビュー <Relation> <cc1:masterdetailrelation MasterDataKeyName="CustomerID" DetailDataKeyName="CustomerID" /> </Relation> PageSize:PageSizeプロパティを 設 定 して 親 または 子 グリッドに 表 示 される 行 数 を 定 義 できます 階 層 グリッドの 作 成 このトピックでは 実 行 時 にC1GridViewに 階 層 化 GridViewを 作 成 する 方 法 について 説 明 します この 例 では C1GridView コントロールをNwind.mdbデータベースのCustomersテーブルとOrdersテーブルに 連 結 します これらのテーブルのフィールドを 使 用 して C1GridViewに 階 層 化 GridViewを 表 示 します ソースビューの 場 合 C1GridViewに 階 層 グリッドを 作 成 するには <cc1:c1gridview ></cc1:c1gridview >タグを 次 のように 変 更 します ソースビュー copycode 43 Copyright GrapeCity inc. All rights reserved.

45 <cc1:c1gridview id="c1gridview1" runat="server" allowvirtualscrolling="false" autogeneratecolumns="false" culture="ja-jp" datakeynames="customerid" datasourceid="sqldatasource1" freezingmode="none" rowheight="19" scrollmode="none" staticcolumnindex="-1" staticrowindex="-1"> <Columns> <cc1:c1boundfield DataField="CustomerID" HeaderText="CustomerID" SortExpression="CustomerID" ReadOnly="True" Width="200" /> <cc1:c1boundfield DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" Width="200" /> <cc1:c1boundfield DataField="Country" HeaderText="Country" SortExpression="Country" Width="200" /> <cc1:c1boundfield DataField="City" HeaderText="City" SortExpression="City" Width="200" /> <cc1:c1boundfield DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" Width="200" /> <cc1:c1boundfield DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle" Width="200" /> <cc1:c1boundfield DataField="Address" HeaderText="Address" SortExpression="Address" Width="200" /> <cc1:c1boundfield DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode" Width="200" /> <cc1:c1boundfield DataField="Phone" HeaderText="Phone" SortExpression="Phone" Width="200" /> <cc1:c1boundfield DataField="Fax" HeaderText="Fax" SortExpression="Fax" Width="200" /> </Columns> <Detail runat="server"> <cc1:c1detailgridview ID="Orders" DataSourceID="SqlDataSource2" DataKeyNames="OrderID" AutogenerateColumns="false" AllowSorting="true" PageSize="5" AllowColMoving="true"> <Columns> <cc1:c1boundfield DataField="OrderID" HeaderText="OrderID" SortExpression="OrderID" Width="150" /> <cc1:c1boundfield DataField="CustomerID" HeaderText="CustomerID" SortExpression="CustomerID" Width="150" /> <cc1:c1boundfield DataField="ShippedDate" HeaderText="ShippedDate" SortExpression="ShippedDate" Width="150" /> <cc1:c1boundfield DataField="Freight" HeaderText="Freight" SortExpression="Freight" Width="150" /> <cc1:c1boundfield DataField="ShipVia" HeaderText="ShipVia" SortExpression="ShipVia" Width="150" /> </Columns> <Relation> <cc1:masterdetailrelation DetailDataKeyName="CustomerID" MasterDataKeyName="CustomerID" /> </Relation> </cc1:c1detailgridview> </Detail> </cc1:c1gridview> <!-- データソースを 提 供 します --> <asp:sqldatasource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource> <asp:sqldatasource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" SelectCommand="SELECT * FROM [Orders] Where CustomerID <SelectParameters> <asp:sessionparameter Name="CustomerID" SessionField="CustomerID" Type="string"> </asp:sessionparameter> </SelectParameters> </asp:sqldatasource> ノート: 子 ビューに 対 して 選 択 クエリを 実 行 中 MasterDataKeyNameフィールドの 値 がセッションパラメータとして 渡 されます これで データベースからデータが 取 得 され 親 階 層 ビューで 表 示 されます コードの 場 合 コードビハインドを 開 き 次 のコードを 追 加 します Page_Loadイベントの 前 に 次 のコードを 追 加 して 階 層 グリッドビューを 作 成 します Visual Basic Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init Dim orders As New C1.Web.Wijmo.Controls. C1GridView.C1DetailGridView() orders.id = "Orders" orders.datasourceid = "SqlDataSource2" orders.datakeynames = New String() {"OrderID" Dim ordersrelation As New C1.Web.Wijmo.Controls. C1GridView.MasterDetailRelation() ordersrelation.detaildatakeyname = "CustomerID" ordersrelation.masterdatakeyname = "CustomerID" orders.relation.add(ordersrelation) C1GridView1.Detail.Add(orders) End Sub C# protected void Page_Init(object sender, EventArgs e) { C1.Web.Wijmo.Controls. C1GridView.C1DetailGridView orders = copycode copycode 44 Copyright GrapeCity inc. All rights reserved.

46 new C1.Web.Wijmo.Controls. C1GridView.C1DetailGridView(); orders.id = "Orders"; orders.datasourceid = "SqlDataSource2"; orders.datakeynames = new string[] { "OrderID" ; C1.Web.Wijmo.Controls. C1GridView.MasterDetailRelation ordersrelation = new C1.Web.Wijmo.Controls. C1GridView.MasterDetailRelation(); ordersrelation.detaildatakeyname = "CustomerID"; ordersrelation.masterdatakeyname = "CustomerID"; orders.relation.add(ordersrelation); C1GridView1.Detail.Add(orders); ここまでの 成 果 プロジェクトを 実 行 すると 完 全 な 機 能 を 備 えた 階 層 グリッドアプリケーションにデータベースのOrdersおよびCustomersテーブルが 表 示 されます エクスポートサービス C1 ASP.NET Export Service を 使 用 すると 複 雑 なエクスポートアプリケーションを 作 成 しなくても GridView を Excel CSV および PDF にエクスポートできます このサービスはアプリケーションサーバー 上 に 置 かれます C1 ASP.NET Export Service を 使 用 する 利 点 は 次 のとおりです トピックの 内 容 書 式 設 定 を 維 持 したままグリッドをエクスポートできます エクスポートされたファイルの 設 定 を 必 要 に 応 じて 変 更 できます インストール Export Service は インターネットインフォメーションサービス(IIS) 上 に 配 布 される Web アプリケーションです C:\Program Files\ComponentOne\Studio for ASP.NET Web Forms フォルダにある C1ASPNETExportService インストーラを 実 行 してください 次 のファイ ルが IIS にインストールされます これらのファイルは 次 の 場 所 にも 格 納 されています C:\ProgramData\ComponentOne\C1ASPNET\C1APNETExportService システム 要 件 サービスホストのシステム 要 件 は 次 のとおりです Microsoft Windows 7 以 上 ASP.NET 4.0 以 上 (.NET Framework 4.0)を 含 む IIS 7.0 以 上 45 Copyright GrapeCity inc. All rights reserved.

47 Microsoft Windows 7 または Microsoft Windows Server 2008 R2 では.NetFramework 4.0 をアップデートできます 詳 細 について は を 参 照 してください GridView のエクスポート 設 定 グリッドをさまざまな 形 式 でダウンロードするための 設 定 は 次 のとおりです Excel にエクスポート ファイル 形 式 :GridView は xls または xlsx 形 式 の Excel シートにエクスポートできます 作 成 者 :データの 書 き 込 みに 対 して 責 任 を 負 う 人 または 組 織 の 名 前 を 指 定 します 行 の 高 さの 自 動 調 整 : 行 の 高 さを 内 容 に 応 じて 自 動 的 に 調 整 するかどうかを 選 択 します サーバー URL:エクスポートするグリッドがあるサーバーの URL を 設 定 します "<サーバーの URL> /exportapi/grid" を 入 力 します ファイル 名 :エクスポートされるファイルに 使 用 する 名 前 を 設 定 します CSV にエクスポート サーバー URL:エクスポートするグリッドがあるサーバーの URL を 設 定 します "<サーバーの URL>/exportapi/grid" を 入 力 します ファイル 名 :エクスポートされるファイルに 使 用 する 名 前 を 設 定 します PDF にエクスポート 用 途 グリッドヘッダーを 繰 り 返 す:グリッドのヘッダーを 繰 り 返 します 幅 の 自 動 調 整 : 自 動 調 整 を 有 効 にします 横 : 横 長 モードを 有 効 にします マージン 設 定 : 上 : 上 マージンのサイズをポイント 単 位 で 設 定 します 下 : 下 マージンのサイズをポイント 単 位 で 設 定 します 右 : 右 マージンのサイズをポイント 単 位 で 設 定 します 左 : 左 マージンのサイズをポイント 単 位 で 設 定 します 用 紙 の 種 類 : 用 紙 の 種 類 (Custom Letter LetterSmall など)を 設 定 します 用 紙 サイズ: 幅 :ページの 幅 をポイント 単 位 で 設 定 します 高 さ:ページの 高 さをポイント 単 位 で 設 定 します ファイルの 内 容 : 画 質 : 画 質 を Low( 低 ) Medium( 中 ) または High( 高 )に 設 定 します 圧 縮 : 圧 縮 レベルを Default(デフォルト) None(なし) Best Speed( 速 度 優 先 ) または Best Compression( 圧 縮 率 優 先 )に 設 定 します フォントタイプ:フォントタイプを True Type または Embedded( 埋 め 込 み)に 設 定 します ドキュメント 情 報 : 作 成 者 :ドキュメントを 作 成 した 人 または 組 織 の 名 前 を 設 定 します 作 成 元 アプリケーション: 元 のドキュメントを 作 成 したアプリケーションの 名 前 を 設 定 します サブタイトル:ドキュメントのサブタイトルを 設 定 します タイトル:タイトルバーに 表 示 されるドキュメントのタイトルを 設 定 します PDF 作 成 アプリケーション:PDF ドキュメントを 作 成 したアプリケーションの 名 前 を 設 定 します キーワード:PDF ドキュメントに 関 連 付 けられるキーワードを 設 定 します これらのキーワードは ドキュメントの 検 索 に 使 用 できま す ドキュメントのセキュリティ: 暗 号 化 の 種 類 : 暗 号 化 の 種 類 を NotPermit( 許 可 しない) Standard40 Standard128 または Aes128 に 設 定 します 所 有 者 パスワード:ドキュメントの 権 限 を 編 集 するために 必 要 なパスワードを 設 定 します ユーザーパスワード:ドキュメントを 開 くために 必 要 なパスワードを 設 定 します コンテンツのコピーを 許 可 :コンテンツのコピーを 許 可 または 禁 止 します 注 釈 の 編 集 を 許 可 :ユーザーが 注 釈 を 編 集 することを 許 可 または 禁 止 します コンテンツの 編 集 を 許 可 :ユーザーがドキュメントの 内 容 を 編 集 することを 許 可 または 禁 止 します 印 刷 を 許 可 :ドキュメントの 印 刷 を 許 可 または 禁 止 します 構 成 設 定 : サーバー URL:サーバーの URL を 設 定 します "<サーバーの URL>/exportapi/grid" を 入 力 します ファイル 名 :エクスポートされる PDF に 使 用 するファイル 名 を 設 定 します GridView の 内 容 を Excel CSVS または PDF にエクスポートするには exportgrid メソッドを 呼 び 出 します GridView を Excel にエクスポー トするには <head> タグと</head> タグの 間 に 次 のコードを 追 加 します <script src=" type="text/javascript"></script> 46 Copyright GrapeCity inc. All rights reserved.

48 <asp:placeholder runat="server"> <script type="text/javascript"> $(function () { $("#Button1").click(exportExcel); ); // Export 関 数 function exportexcel() { var filename = "ExportedGrid"; var type = "Xls"; var excelsetting = { showgridlines: true, autorowheight: true, author: "ComponentOne" ; var url = " + "/exportapi/grid"; $("#<%=C1GridView1.ClientID%>").c1gridview("exportGrid", filename,_ type, excelsetting, url); </script> </asp:placeholder> GridView を CSV ファイルにエクスポートするには <head> タグと </head> タグの 間 に 次 のコードを 追 加 します <script src=" type="text/javascript"></script> <asp:placeholder ID="PlaceHolder1" runat="server"> <script type="text/javascript"> $(function () { $("#Button1").click(exportCsv); ); // Export 関 数 function exportcsv() { var filename = "ExportedGrid"; var url = " + "/exportapi/grid"; $("#<%=C1GridView1.ClientID%>").c1gridview("exportGrid",_ filename, "csv", url); </script> </asp:placeholder> GridView を PDF にエクスポートするには <head> タグと </head> タグの 間 に 次 のコードを 追 加 します <script src=" type="text/javascript"></script> <asp:placeholder ID="PlaceHolder1" runat="server"> <script type="text/javascript"> $(function () { $("#Button1").click(exportPdf); ); // PDF 設 定 function getpdfsetting() { return { repeatheader: true, landscape: true, autofitwidth: true, pagesize: { width: 300, height: 400, paperkind: 'A4', margins: { top: 50, right: 50, bottom: 50, left: 50, 47 Copyright GrapeCity inc. All rights reserved.

49 imagequality:'low', compression: 'BestCompression', fonttype: 'TrueType', author: 'Grapecity', creator: 'Grapecity', subject: 'エクスポート', title: 'Export Document', producer: 'Grapecity', keywords: 'export, pdf', encryption: 'NotPermit', ownerpassword: '0000', userpassword: '00000', allowcopycontent: true, alloweditannotations: true, alloweditcontent: true, allowprint: true, </script> </asp:placeholder> // Export 関 数 function exportpdf() { var filename = 'ExportGrid'; var pdfsetting = getpdfsetting(); var url = " +_ "/exportapi/grid"; $("#<%=C1GridView1.ClientID%>").c1gridview("exportGrid", filename,_ "pdf", pdfsetting, url); 生 成 される PDF のプロパティを 次 の 図 に 示 します ファイルが Internet Explorer でダウンロードされない 場 合 は Internet Explorer の 保 護 モードをオフにしてファイルをエクスポートするか Internet Explorer を 管 理 者 として 実 行 します 保 護 モードをオフにするには 次 のようにします Internet Explorer の[ [ 設 定 ]を 開 き [インターネットオプション] [インターネットオプション]を 選 択 します [セキュリティ]タブで [インターネット]を 選 択 し [ 保 護 モードを 有 効 にする]のチェックを 外 します 48 Copyright GrapeCity inc. All rights reserved.

50 AJAX の 使 用 Asynchronous JavaScript and XML (AJAX) は サーバー 上 に 存 在 するデータと 通 信 するための 非 常 に 効 果 的 な 方 法 を 提 供 します これは Web ページ(ASP.NET Web アプリケーション)がページ 全 体 をリロードせずにサーバー 側 のロジックを 実 行 して さまざまなページ 要 素 を 更 新 できることを 意 味 します これは Web アプリケーションからデータを 提 示 する 際 の 非 常 に 効 果 的 な 方 法 です これにより ページのリロード 時 間 が 節 約 され より 能 率 的 なユーザーエクスペリエンスが 提 供 されま す AJAX では GridView for ASP.NET Web Forms はサーバーへのポストバックを 実 行 せずにデータをロードできるため ロー ド 時 間 が 最 小 限 に 短 縮 され エンドユーザーエクスペリエンスが 大 幅 に 向 上 します C1GridView の Callback 機 能 を 使 用 す ると グリッドは 要 求 された 情 報 のみを 取 得 するためにサーバーにコールバックします これは グリッドを 更 新 する 場 合 に ページ 全 体 のリロードが 必 要 なサーバーのポストバックと 異 なります エンドユーザーは ロード 中 の 画 面 の 厄 介 なちらつきな しで グリッドをすばやく 変 更 できます C1GridView の Action プロパティを 以 下 のオプションの1つに 設 定 するだけで グリッドの 編 集 グルーピング/アウトルック グルーピング ページング 行 選 択 ソート およびグリッドのスクロールに Callback 機 能 を 使 用 できます None: ポストバックを 使 用 して すべてのアクションを 実 行 します ColMove: コールバックを 使 用 して 列 移 動 を 実 行 します Editing: コールバックを 使 用 して 編 集 を 実 行 します. Paging: コールバックを 使 用 して ページジングを 実 行 します Selection: コールバックを 使 用 して 行 選 択 を 実 行 します. Sorting: コールバックを 使 用 して ソートを 実 行 します. Filtering: コールバックを 使 用 して フィルタリングを 実 行 します All: コールバックを 使 用 して グリッド 上 のすべてのアクションを 実 行 します. タスク 別 ヘルプ タスク 別 ヘルプは ユーザーが Visual Studio でのプログラミングに 習 熟 しており DataSet について また 連 結 されたコント ロールの 一 般 的 な 使 用 方 法 について 知 識 があるものと 想 定 しています ヘルプに 記 述 された 手 順 に 従 うことによって さまざ まな C1GridView の 機 能 を 実 現 するプロジェクトを 作 成 して C1GridView の 用 途 を 理 解 することができます ヘルプでは 連 結 データ 用 に 標 準 Northwind Access データベース Nwind.mdb を 使 用 しています ヘルプでは Nwind.mdb が C:\Program Files\Common Files\C1Studio\Data ディレクトリにあることを 想 定 しており 簡 潔 にするために 完 全 なパス 名 ではなくファイル 名 を 記 述 しています 注 意 :プロジェクトファイルおよびデータベースファイルの 保 存 場 所 によっては プロジェクトの Nwind.mdb 参 照 ロケー ションを 変 更 する 必 要 があるかもしれません また タスク 別 ヘルプの 各 トピックでは ユーザーが ASP.NET プロジェクトを 新 規 作 成 し 連 結 された C1GridView コントロー ルをフォームに 配 置 し C1.Web.UI.Controls.C1GridView 名 前 空 間 や 関 連 の System 名 前 空 間 に Imports(Visual Basic)ま たは using(c#)ステートメントを 使 用 しているものと 想 定 しています 詳 細 情 報 については データソースへのグリッドの 連 結 を 参 照 してください データソースへのグリッドの 連 結 このトピックでは C1GridView をデータソースコントロールに 連 結 する 方 法 について 説 明 します Web サイトプロジェクトで C1GridView をデータソースに 連 結 する 手 順 は Web アプリケーションプロジェクトと 多 少 異 なります Web サイトプロジェクトでのグリッドの 連 結 C1GridView をデータソースコントロールに 連 結 するには 以 下 の 手 順 を 実 行 します 49 Copyright GrapeCity inc. All rights reserved.

51 1. ソリューションエクスプローラで プロジェクト 名 を 右 クリックして コンテキストメニューから[ [ 追 加 ] [[ 新 しいフォルダ]を 選 択 します 新 しいフォルダは App_Data と 名 前 を 付 けます 2. ソリューションエクスプローラで App_Data フォルダを 右 クリックして [ [ 既 存 項 目 の 追 加 ]をクリックします 3. デフォルトでインストールされる Nwind.mdb ファイルを 探 します 4. [ 既 存 項 目 の 追 加 ]ダイアログボックスで Nwind.mdb ファイルをクリックして 追 加 をクリックします 5. Default.aspx ページに 戻 ります 6. C1GridView コントロールを 選 択 し C1GridView スマートタグをクリックして [C1GridView タスク]メニューを 開 きま す 7. [データソースの 選 択 ]ドロップダウン 矢 印 をクリックして [ 新 しいデータソース]を 選 択 します 8. データソース 構 成 ウィザードで[Access データベース]を 選 択 して OK をクリックします 9. 参 照 をクリックし [Microsoft Access データベースの 選 択 ]ダイアログボックスの[プロジェクトフォルダ] で App_Data を 選 択 します 10. 右 側 の[フォルダの 内 容 ]ペインで Nwind.mdb を 選 択 して OK をクリックします 11. 次 へ をクリックします Select ステートメントの 構 成 ウィンドウが 表 示 されます a. [テーブルまたはビューから 列 を 指 定 します]オプションが ON になっていることを 確 認 します b. [コンピューター コンピューター]ドロップダウンリストで [Products]を 選 択 します c. [ 列 ]ボックスで ProductID ProductName QuantityPerUnit および UnitsInStock または 希 望 する 他 の チェックボックスを ON にします 12. 次 へ をクリックします [クエリーのテスト]ページが 表 示 されます オプションとして クエリーのテスト をクリックし クエリーをテストします 13. 完 了 をクリックし ウィザードを 閉 じてデータソースを 追 加 します Web アプリケーションプロジェクトでのグリッドの 連 結 C1GridView をデータソースコントロールに 連 結 するには 以 下 の 手 順 を 実 行 します 1. プロジェクトで [プロジェクト] [ 既 存 項 目 の 追 加 ]を 選 択 します 2. デフォルトでサンプルのフォルダにインストールされる Nwind.mdb ファイルを 探 して 選 択 し 追 加 をクリックします [データソース 構 成 ウィザード]が 表 示 されます 3. [テーブル]チェックボックスを ON にして 完 了 をクリックします 4. C1GridView コントロールを 右 クリックして [スマートタグの 表 示 ]をクリックします 5. [C1GridView タスク]メニューで データソースの 選 択 ドロップダウン 矢 印 をクリックして [ 新 しいデータソース]を 選 択 します [データソース 構 成 ウィザード]が 表 示 されます 6. [Access データベース]を 選 択 して OK をクリックします 7. 参 照 ボタンをクリックして [フォルダの 内 容 ]の 下 に 表 示 される Nwind.mdb を 選 択 します 8. OK をクリックして 次 へ をクリックします Select ステートメントの 構 成 ウィンドウが 表 示 されます a. [テーブルまたはビューから 列 を 指 定 します]オプションが ON になっていることを 確 認 します b. [ 名 前 ]ドロップダウンリストで [Products]を 選 択 します c. [ 列 ]ボックスで ProductID ProductName QuantityPerUnit および UnitsInStock または 他 の 希 望 する チェックボックスを ON にします 9. 次 へ をクリックします [クエリーのテスト]ページが 表 示 されます オプションとして クエリーのテスト をクリックし クエリーをテストします 10. 完 了 をクリックし ウィザードを 閉 じてデータソースを 追 加 します データソースの 自 動 更 新 このトピックでは テンプレートと DataSource コントロールを 使 用 して 編 集 可 能 なグリッドを 作 成 する 方 法 について 説 明 します 以 下 の 手 順 を 実 行 します 1. グリッドを 作 成 して DataSource コントロールに 連 結 します 詳 細 は データソースへのグリッドの 連 結 トピックを 参 照 してください Northwind データベースの Suppliers テーブルを 使 用 して SupplierID CompanyName ContactName Address の 各 フィールドを 取 得 します 2. UpdateQuery を 構 成 します a. AccessDataSource1 コンポーネントを 右 クリックして [プロパティ]を 選 択 できます プロパティ タブで UpdateQuery の 横 の... ボタンをクリックします [コマンドおよびパラメータエディタ]ダイアログボックスが 表 示 されます b. クエリービルダ をクリックし Suppliers テーブルを 選 択 して 追 加 をクリックします 50 Copyright GrapeCity inc. All rights reserved.

52 c. 以 下 のテキストを UPDATE コマンドに 挿 入 します OK をクリックして [クエリービルダ]を 閉 じます UPDATE Suppliers SET CompanyName =?, ContactName =?, Address =? WHERE (SupplierID =?) d. パラメータの 追 加 ボタンをクリックして パラメータを SupplierID という 名 前 に 変 更 します e. 詳 細 設 定 プロパティの 表 示 をクリックして Type プロパティを Int32 に 設 定 します f. 同 様 に CompanyName ContactName Address パラメータを 追 加 します ただし Type は String に 設 定 します g. OK をクリックして [コマンドおよびパラメータエディタ]ダイアログボックスを 閉 じます 3. C1GridView コントロールを 右 クリックして [スマートタグの 表 示 ]を 選 択 します 4. 必 要 に 応 じて [C1GridView タスク]メニューの[データソースの 選 択 ]ボックスで AccessDataSource1 を 選 択 します 5. コントロールを 右 クリックして [プロパティ]をクリックします プロパティウィンドウで DataKeyNames 値 を SupplierID に 設 定 します 6. プロパティウインドウで AllowClientEditing プロパティを True に 設 定 します テンプレートフィールドの 実 行 時 データ 連 結 このトピックでは 実 行 時 にテンプレートフィールドを C1GridView に 連 結 する 方 法 について 説 明 します この 例 では C1Nwind.mdb データベースの Customers テーブルに C1GridView コントロールが 連 結 され C1ComboBox を 含 む C1TemplateField に Country フィールドがアタッチされます デザイナの 場 合 次 の 手 順 を 実 行 します 1. C1GridView コントロールを 右 クリックし コンテキストメニューから[スマートタグの 表 示 ] 選 択 して コントロールを C1Nwind.mdb データベースに 連 結 します このデータベースは デフォルトでは samples ディレクトリに 置 かれていま す 詳 細 な 手 順 については 手 順 1/3:データソースへの C1GridView の 連 結 を 参 照 してください 2. テンプレートフィールドを Country フィールド 列 に 追 加 し C1ComboBox をエディタドキュメントの ItemTemplate セク ションに 追 加 します 詳 細 な 手 順 については 列 へのコントロールの 追 加 を 参 照 してください ソースビューの 場 合 C1GridView に Template 列 を 追 加 するには <cc1:c1gridview ></cc1:c1gridview > タグを 次 のように 変 更 しま す <cc1:c1gridview ID="C1GridView1" runat="server" AutogenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1"> <Columns> <cc1:c1boundfield DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID"> </cc1:c1boundfield> <cc1:c1boundfield DataField="CustomerName" HeaderText="CustomerName" SortExpression="CustomerName"> </cc1:c1boundfield> <cc1:c1templatefield HeaderText="Country"> <ItemTemplate> <span> <%# Eval("Country") %></span> </ItemTemplate> <EditItemTemplate> <cc1:c1combobox ID="dlCountry" runat="server"> </cc1:c1combobox> </EditItemTemplate> </cc1:c1templatefield> <cc1:c1commandfield ShowEditButton="True"> </cc1:c1commandfield> </Columns> コードの 場 合 </cc1:c1gridview> 51 Copyright GrapeCity inc. All rights reserved.

53 各 行 で C1ComboBox を 連 結 するには 次 のコードを 追 加 して RowDataBound イベントを 処 理 します 1. Visual Basic でコードを 書 く 場 合 Visual Basic Protected Sub C1GridView1_RowDataBound(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewRowEventArgs) Handles C1GridView1.RowDataBound If (e.row.rowstate And C1GridViewRowState.Edit) > 0 Then ' 基 底 のデータ 項 目 を 取 得 します この 例 では ' 基 底 のデータ 項 目 は DataRowView オブジェクトです Dim rowview As DataRowView = DirectCast(e.Row.DataItem, DataRowView) ' 現 在 の 行 の country 値 を 取 得 します Dim country As [String] = rowview("country").tostring() ' 現 在 の 行 から DropDownList コントロールを 取 得 し それをデータ 連 結 します Dim dlcountry As C1ComboBox = DirectCast(e.Row.FindControl("dlCountry"), C1ComboBox) dlcountry.datasource = GetData() dlcountry.datatextfield = "Country" dlcountry.datavaluefield = "Country" dlcountry.databind() 'ドロップダウンの 項 目 を 取 得 し 選 択 項 目 として 設 定 します For Each item As C1ComboBoxItem In dlcountry.items If item.text = country Then dlcountry.selectedvalue = item.text End If Next End If End Sub Protected Function GetData() As DataTable Dim con As New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + Server.MapPath("~/App_Data/C1NWind1.mdb")) Dim cmd As New OleDbCommand("Select Country from Countries", con) Dim da As New OleDbDataAdapter(cmd) Dim dt As New DataTable() da.fill(dt) Return dt End Function C# でコードを 書 く 場 合 C# protected void C1GridView1_RowDataBound(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewRowEventArgs e) { if ((e.row.rowstate & C1GridViewRowState.Edit)>0) { // 基 底 のデータ 項 目 を 取 得 します この 例 では // 基 底 のデータ 項 目 は DataRowView オブジェクトです DataRowView rowview = (DataRowView)e.Row.DataItem; // 現 在 の 行 の country 値 を 取 得 します String country = rowview["country"].tostring(); // 現 在 の 行 から DropDownList コントロールを 取 得 し それをデータ 連 結 します 52 Copyright GrapeCity inc. All rights reserved.

54 C1ComboBox dlcountry = (C1ComboBox)e.Row.FindControl("dlCountry"); dlcountry.datasource = GetData(); dlcountry.datatextfield = "Country"; dlcountry.datavaluefield = "Country"; dlcountry.databind(); //ドロップダウンの 項 目 を 取 得 し 選 択 項 目 として 設 定 します foreach (C1ComboBoxItem item in dlcountry.items) { if (item.text == country) { dlcountry.selectedvalue = item.text; DataTable GetData() { OleDbConnection con = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0; Data Source="+Server.MapPath("~/App_Data/C1NWind1.mdb")); OleDbCommand cmd = new OleDbCommand("Select Country from Countries",con); OleDbDataAdapter da = new OleDbDataAdapter(cmd); DataTable dt = new DataTable(); da.fill(dt); return dt; 2. Update コマンドにパラメータとして C1ComboBox の SelectedValue を 提 供 するには 次 のコードを 追 加 して RowUpdating イベントを 処 理 します Visual Basic でコードを 書 く 場 合 Visual Basic Protected Sub C1GridView1_RowUpdating(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewUpdateEventArgs) Handles C1GridView1.RowUpdating ' 編 集 中 の 行 を 取 得 します Dim row As C1GridViewRow = C1GridView1.Rows(C1GridView1.EditIndex) ' 行 から DropDownList コントロールを 取 得 します Dim combo As C1ComboBox = DirectCast(row.FindControl("dlCountry"), C1ComboBox) ' DropDownList コントロールの 選 択 された 値 を ' NewValues コレクションに 追 加 します NewValues コレクションは ' データソースコントロールに 渡 され このコントロールが ' データソースを 更 新 します e.newvalues("country") = combo.selectedvalue SqlDataSource1.UpdateCommand = "Update Customers Set CustomerName=@CustomerName, Country=@Country where CustomerID=@CustomerID" SqlDataSource1.UpdateParameters.Add("CustomerID", e.keys("customerid").tostring()) SqlDataSource1.UpdateParameters.Add("CustomerName", e.newvalues("customername").tostring()) 53 Copyright GrapeCity inc. All rights reserved.

55 SqlDataSource1.UpdateParameters.Add("Country", e.newvalues("country").tostring()) SqlDataSource1.Update() End Sub C# でコードを 書 く 場 合 C# protected void C1GridView1_RowUpdating(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewUpdateEventArgs e) { // 編 集 中 の 行 を 取 得 します C1GridViewRow row = C1GridView1.Rows[C1GridView1.EditIndex]; // 行 から DropDownList コントロールを 取 得 します C1ComboBox combo = (C1ComboBox)row.FindControl("dlCountry"); // DropDownList コントロールの 選 択 された 値 を // NewValues コレクションに 追 加 します NewValues コレクションは // データソースコントロールに 渡 され このコントロールが // データソースを 更 新 します e.newvalues["country"] = combo.selectedvalue; SqlDataSource1.UpdateCommand = "Update Customers Set CustomerName=@CustomerName, Country=@Country where CustomerID=@CustomerID"; SqlDataSource1.UpdateParameters.Add("CustomerID", e.keys["customerid"].tostring()); SqlDataSource1.UpdateParameters.Add("CustomerName", e.newvalues["customername"].tostring()); SqlDataSource1.UpdateParameters.Add("Country", e.newvalues["country"].tostring()); SqlDataSource1.Update(); 実 行 時 データ 操 作 データが 動 的 に 連 結 されている 場 合 に ソート フィルタ 処 理 ページング グループ 化 などのデータ 操 作 をグリッドに 対 して 実 行 する 方 法 について 説 明 します ソート ソート 機 能 を 実 装 するには Sorting イベントと Sorted イベントを 処 理 する 必 要 があります 次 のコードを 使 用 して Sorted イベントでグリッドを 再 連 結 します Visual Basic でコードを 書 く 場 合 Visual Basic Protected Sub C1GridView1_Sorting(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewSortEventArgs) Handles C1GridView1.Sorting End Sub 54 Copyright GrapeCity inc. All rights reserved.

56 'ソートの 処 理 Protected Sub C1GridView1_Sorted(sender As Object, e As EventArgs) Handles C1GridView1.Sorted C1GridView1.DataSource = BindGrid() C1GridView1.DataBind() End Sub C# でコードを 書 く 場 合 C# protected void C1GridView1_Sorting(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewSortEventArgs e) { //ソートの 処 理 protected void C1GridView1_Sorted(object sender, EventArgs e) { C1GridView1.DataSource = BindGrid(); C1GridView1.DataBind(); フィルタ 処 理 フィルタ 処 理 機 能 を 実 装 するには Filtering イベントと Filtered イベントを 処 理 する 必 要 があります 次 のコードを 使 用 して Filtered イベントでグリッドを 再 連 結 します Visual Basic でコードを 書 く 場 合 Visual Basic Protected Sub C1GridView1_Filtering(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewFilterEventArgs) End Sub 'フィルタ 処 理 Protected Sub C1GridView1_Filtered(sender As Object, e As EventArgs) Handles C1GridView1.Filtered C1GridView1.DataSource = BindGrid() C1GridView1.DataBind() End Sub C# でコードを 書 く 場 合 C# protected void C1GridView1_Filtering(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewFilterEventArgs e) { //フィルタ 処 理 protected void C1GridView1_Filtered(object sender, EventArgs e) { C1GridView1.DataSource = BindGrid(); C1GridView1.DataBind(); 55 Copyright GrapeCity inc. All rights reserved.

57 ページング ページング 機 能 を 実 装 するには Paging イベントを 処 理 する 必 要 があります 次 のコードを 使 用 し て NewPageIndex を C1GridView の PageIndex として 設 定 した 後 グリッド 内 でグリッドを 再 連 結 します Visual Basic でコードを 書 く 場 合 Visual Baisc 'ページングの 処 理 Protected Sub C1GridView1_PageIndexChanging(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewPageEventArgs) Handles C1GridView1.PageIndexChanging C1GridView1.PageIndex = e.newpageindex C1GridView1.DataSource = BindGrid() C1GridView1.DataBind() End Sub C# でコードを 書 く 場 合 C# //ページングの 処 理 protected void C1GridView1_PageIndexChanging(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewPageEventArgs e) { C1GridView1.PageIndex = e.newpageindex; C1GridView1.DataSource = BindGrid(); C1GridView1.DataBind(); グループ 化 グループ 化 機 能 を 実 装 するには ColumnGrouped イベントと ColumnUngrouped イベントを 処 理 する 必 要 があり ます メモ: C1GridView をグループ 化 するには AllowColMoving プロパティと ShowGroupArea プロパティを true に 設 定 してください 次 のコードを 使 用 し ColumnGrouped イベントで ドラッグされる 列 の HeaderText をパラメータとしてグリッドを 再 連 結 します Visual Basic でコードを 書 く 場 合 Visual Basic Protected Sub C1GridView1_ColumnUngrouped(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewColumnUngroupedEventArgs) Handles C1GridView1.ColumnUngrouped End Sub ' 列 のグループ 化 を 処 理 します Protected Sub C1GridView1_ColumnGrouped(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewColumnGroupedEventArgs) Handles C1GridView1.ColumnGrouped C1GridView1.DataSource = BindGrid(e.Drag.HeaderText) C1GridView1.DataBind() End Sub 56 Copyright GrapeCity inc. All rights reserved.

58 C# でコードを 書 く 場 合 C# // 列 のグループ 化 解 除 を 処 理 します protected void C1GridView1_ColumnUngrouped(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewColumnUngroupedEventArgs e) { // 列 のグループ 化 を 処 理 します protected void C1GridView1_ColumnGrouped(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewColumnGroupedEventArgs e) { C1GridView1.DataSource = BindGrid(e.Drag.HeaderText); C1GridView1.DataBind(); プロパティビルダーの 使 用 プロパティビルダーを 使 用 すれば C1GridView コントロールの 外 観 と 動 作 を 簡 単 にカスタマイズできます プロパティビル ダーを 使 用 して ヘッダーおよびフッターの 表 示 / 非 表 示 を 指 定 し ページングやページ 移 動 ボタンをカスタマイズ し C1GridView コントロールの 外 観 を 書 式 設 定 できます プロパティビルダーにアクセスするには [C1GridView タスク]メニューからプロパティビルダー プロパティビルダーを 選 択 します [C1GridView のプロパティ]ダイアログボックスが 表 示 されます プロパティビルダー プロパティビルダーについての 詳 細 は プロパティビル ダー トピックを 参 照 してください プロパティビルダーを 使 ったプロパティの 設 定 [C1GridView のプロパティ]ダイアログボックスでは プロパティを 簡 単 に 設 定 し C1GridView コントロールの 外 観 と 動 作 を カスタマイズできます プロパティビルダー プロパティビルダーを 使 用 してプロパティを 設 定 するには 以 下 の 手 順 を 実 行 します 1. C1GridView を 右 クリックして コンテキストメニューから[スマートタグの スマートタグの 表 示 ]を 選 択 します [C1GridView タスク]メ ニューからプロパティビルダー プロパティビルダーを 選 択 します [C1GridView のプロパティ]ダイアログボックスが 表 示 されます 2. [C1GridView のプロパティ]ダイアログボックスから 左 の 列 で 以 下 のタブの1つを 選 択 します この 例 では 列 タブ が 選 択 されています [C1GridView のプロパティ]ダイアログボックスには 次 の5つのタブが 含 まれています タブ 説 明 全 般 データソースを 表 示 します ここで ヘッダー フッター ソートの 各 プロパティを 設 定 できます 詳 細 に ついては 全 般 タブ を 参 照 してください 列 表 示 する 列 のタイプを 指 定 して それぞれにプロパティを 設 定 できます 詳 細 については 列 タ ブ を 参 照 してください ペー ジン グ 書 式 グ ページングを 使 用 するかどうかを 決 定 できます また その 表 示 方 法 と 表 示 場 所 もカスタマイズでき ます 詳 細 については ページング タブ を 参 照 してください フォント 色 グリッドの 配 置 ヘッダー フッター ページャ 特 定 の 項 目 および 列 を 含 むすべての 内 容 を 設 定 できます 詳 細 については 書 式 タブ を 参 照 してください 列 をグループに 入 れるかどうか および グループヘッダー 行 とグループフッター 行 を 書 式 設 定 し 表 57 Copyright GrapeCity inc. All rights reserved.

59 ルー ピング 示 する 方 法 を 指 定 できます 詳 細 については グループ 化 タブを 参 照 してください 3. [ 選 択 した 列 ]のリストで 列 を1つ 選 択 します 4. [ 列 のプロパティ]で 希 望 するプロパティを 設 定 して 適 用 をクリックします 5. プロパティの 設 定 が 完 了 したら OK をクリックします または C1GridView のプロパティはデザイン 時 にプロパティウィンドウを 使 用 して 設 定 することもできます 1. C1GridView コントロールを 選 択 します 2. Visual Studio ツールバーの[ 表 示 ]メニューから[プロパティウィンドウ]を 選 択 します 3. プロパティウィンドウで 希 望 のプロパティを 設 定 します プロパティビルダーを 使 用 した 列 の 追 加 [C1GridView のプロパティ]ダイアログボックスを 使 用 して 列 を 追 加 および 削 除 し 表 示 する 列 のタイプも 決 定 できます 使 用 可 能 な 列 のタイプには 次 のものがあります C1Band: 複 数 レベルの 列 ヘッダーの 作 成 に 使 用 されるバンド 列 を 表 示 します C1BoundField:データソースのフィールドに 連 結 される 列 を 表 示 します C1ButtonField: 各 項 目 のコマンドボタンを 表 示 します C1CheckBoxField: 各 項 目 に 対 してブール 型 チェックボックスを 表 示 します C1CommandField: 各 項 目 に 対 して 編 集 中 のコマンドを 含 む 列 を 表 示 します C1HyperLinkField: 各 項 目 をハイパーリンクとして 表 示 します C1TemplateField: 指 定 のテンプレートに 従 って 列 の 各 項 目 を 表 示 します 58 Copyright GrapeCity inc. All rights reserved.

60 列 を 追 加 するには 以 下 の 手 順 を 実 行 します 1. C1GridView コントロールを 右 クリックして コンテキストメニューから[スマートタグの スマートタグの 表 示 ]を 選 択 します [C1GridView タスク]メニューからプロパティビルダー プロパティビルダーを 選 択 します [C1GridView のプロパティ]ダイアログボックス が 表 示 されます 2. 左 ペインで 列 タブを 選 択 します 列 タブについての 詳 細 は 列 タブトピックを 参 照 してください 3. [ 列 リスト]で [ 使 用 可 能 な 列 ]のリストから 希 望 の 列 を 選 択 します 4. 列 リストの 間 にある 矢 印 ボタンをクリックして [ 選 択 した 列 ]リストの 下 に 列 を 生 成 します 下 の 図 に HyperLink 列 が 追 加 されました 注 意 :[ 実 行 時 に 自 動 的 に 列 を 作 成 ]の 横 のチェックボックスが ON になっている 場 合 (デフォルト) 連 結 列 が 自 動 的 に 生 成 されます このチェックボックスが OFF になっているとき 手 動 で 列 を 生 成 する 必 要 があります グリッドのコンテンツの 書 式 設 定 以 下 のサーバー 側 タスク 別 ヘルプトピックでは グリッドの 書 式 設 定 方 法 として 列 の 自 動 生 成 枠 の 追 加 ソート 行 の 追 加 行 やフォント 色 の 変 更 などについて 説 明 します ソートしたグリッドの 作 成 列 を 自 動 的 にソートするようにグリッドを 設 定 するには 以 下 の 手 順 を 実 行 します 1. C1GridView コントロールを 選 択 して AllowSorting プロパティを True に 設 定 します Visual Basic コードの 書 き 方 Visual Basic C1GridView1.AllowSorting = True C# コードの 書 き 方 C# C1GridView1.AllowSorting = true 2. C1GridView.DataSourceID プロパティを 設 定 します 3. アプリケーションを 実 行 して ソートする 列 の HeaderText をクリックします 製 品 サンプル ControlExplorer サンプルの Sorting ページを 参 照 してください 59 Copyright GrapeCity inc. All rights reserved.

61 指 定 した 列 の 非 表 示 化 C1GridViewで 非 表 示 にする 列 を 指 定 するには 対 象 列 の Visible プロパティを Falseに 設 定 します そして C1GridView で 表 示 する 列 を 指 定 するには 以 下 の 手 順 を 実 行 します 1. を 右 クリックして コンテキストメニューから[スマートタグの スマートタグの 表 示 ]を 選 択 します 2. [C1GridView タスク]メニューから[プロパティビルダー プロパティビルダー]を 選 択 します [C1GridView のプロパティ]ダイアログボック スが 表 示 されます 左 ペインで 列 タブを 選 択 します 3. 左 ペインで 列 タブを 選 択 します 4. [ 実 行 時 に 自 動 的 に 列 を 作 成 ]を OFF にします(ON になっていた 場 合 ) 5. [ 選 択 した 列 ]のリストから 表 示 したくない 列 を 選 択 します 6. [ 列 のプロパティ]で Visible プロパティを False に 設 定 します グリッドに 表 示 しないデータソースの 任 意 の 列 に 上 記 の 手 順 を 実 行 します [ 選 択 した 列 ]のリストで 列 を 選 択 し 削 除 ボタン("X")をクリックして 表 示 された 列 を 削 除 できることにも 注 意 してください 7. OK をクリックし 設 定 を 保 存 して[C1GridView のプロパティ]ダイアログボックスを 閉 じます このトピックの 作 業 結 果 アプリケーションを 実 行 して 非 表 示 に 設 定 した 列 は 実 行 時 に 表 示 されていないことを 確 認 します 列 ヘッダーの 色 の 変 更 テーマを 使 用 して グリッドの 外 観 を 簡 単 にカスタマイズすることができます テーマの 詳 細 と 使 用 可 能 なテーマについては Themes トピックを 参 照 してください 次 の 手 順 では テーマを 使 用 しないで Grid コントロールの 外 観 をカスタマイズする 方 法 について 学 びます メモ:この 手 順 では GridView を 含 む Asp.Net プロジェクトが 既 に 作 成 されていることを 前 提 としています 詳 細 につい ては クイックスタート トピックを 参 照 してください 次 の 手 順 を 実 行 します 1. [ソース]ボタンをクリックして ソースビューに 切 り 替 えます 2. 次 のコードをページの <head> タグ 内 に 追 加 します ソースビュー <style type= text/css >.wijgridth { background-image: none!important; background-color: Yellow!important; height: 27px; text-align: -moz-center; border: solid 1px #4c535c; vertical-align: middle; border-right: none; font-weight: normal; color: #000; border-top: none; </style> メモ: ASP.NET コントロールの 背 景 には 画 像 があります このため コントロールのヘッダー ツールバー セルなどの 要 素 の 背 景 を 変 更 する 前 に その 画 像 を 削 除 する 必 要 があります 60 Copyright GrapeCity inc. All rights reserved.

62 ここまでの 成 果 アプリケーションを 実 行 し 列 ヘッダーが 黄 色 で 表 示 されることを 確 認 します 列 ヘッダー 領 域 の 作 成 このトピックでは デザイン 時 とプログラムで C1Band を 使 用 して 複 数 列 ヘッダーを 作 成 する 方 法 について 説 明 します デザイナの 場 合 以 下 の 手 順 を 実 行 します 1. C1GridView コントロールを 右 クリックして [スマートタグの 表 示 ]を 選 択 します [C1GridView タスク]メニューで [プ ロパティビルダー]を 選 択 します C1GridView のプロパティウィンドウが 表 示 されます 2. 列 タブを 選 択 して [ 実 行 時 に 自 動 的 に 列 を 作 成 ]を OFF にします(ON になっていた 場 合 ) 3. [ 使 用 可 能 な 列 ]のリストから [バンド] 列 を 選 択 します 4. 列 リストの 間 にある 矢 印 ボタンをクリックして 選 択 した 列 のリストにバンド 列 を 移 動 します 5. 新 しい バンド 列 を 選 択 して HeaderText プロパティに 何 かテキストを 入 力 します この 例 では HeaderText プロパティ に 商 品 と 入 力 されています 6. バンドを ProductID と ProductName 列 の 上 位 置 に 配 置 するには バンド 列 を 選 択 し 上 矢 印 をクリックして[ 選 択 し た 列 ]のリストの 先 頭 に 配 置 します 7. ProductID 列 を 選 択 して バンド 列 内 の 特 定 のレベル 上 に 表 示 されるまで 上 矢 印 をクリックします 同 じ 操 作 を ProductName に 対 しても 実 行 します 8. OK をクリックします コードの 場 合 Page_Load イベントに 次 のコードを 追 加 して 動 的 なバンドヘッダーを 追 加 します Visual Basic コードの 書 き 方 Visual Basic ' C1BoundField オブジェクト 動 生 成 を 無 効 にします Me.C1GridView1.AutoGenerateColumns = False 61 Copyright GrapeCity inc. All rights reserved.

63 ' バンド 列 を 作 成 します Dim band As New C1.Web.Wijmo.Controls.C1GridView.C1Band ' ヘッダーテキストを Products に 設 定 します band.headertext = " 商 品 " ' ProductID 列 をバンド 列 に 追 加 します Dim col As New C1.Web.Wijmo.Controls.C1GridView.C1BoundField col.headertext = " 商 品 コード" col.datafield = "ProductID" band.columns.add(col) ' ProductName 列 をバンド 列 に 追 加 します col = New C1.Web.Wijmo.Controls.C1GridView.C1BoundField col.headertext = " 商 品 名 " col.datafield = "ProductName" band.columns.add(col) ' グリッドの 既 存 の ProductIDと ProductName 列 を 削 除 します Me.C1GridView1.Columns.RemoveAt(0) Me.C1GridView1.Columns.RemoveAt(0) ' グリッドにバンド 列 を 挿 入 します Me.C1GridView1.Columns.Insert(0, band) C# コードの 書 き 方 C# // C1BoundField オブジェクト 動 生 成 を 無 効 にします C1GridView1.AutoGenerateColumns = false; // バンド 列 を 作 成 します C1Band band = new C1Band(); // ヘッダーテキストを Products に 設 定 します band.headertext = " 商 品 "; // ProductID 列 をバンド 列 に 追 加 します C1BoundField col = new C1BoundField(); col.headertext = col.datafield = "ProductID"; band.columns.add(col); // ProductName 列 をバンド 列 に 追 加 します col = new C1BoundField(); col.headertext = col.datafield = "ProductName"; band.columns.add(col); // グリッドの 既 存 の ProductID と ProductName 列 を 削 除 します this.c1gridview1.columns.removeat(0); this.c1gridview1.columns.removeat(0); // グリッドにバンド 列 を 挿 入 します this.c1gridview1.columns.insert(0, band); このトピックの 作 業 結 果 プロジェクトを 実 行 すると Products バンド 列 の 下 に ProductID と ProductName 列 が 表 示 されます 62 Copyright GrapeCity inc. All rights reserved.

64 通 貨 を 表 す 列 の 書 式 設 定 C1GridView コントロールの 列 の 表 示 を 簡 単 に 書 式 設 定 できます たとえば このトピックでは Products テーブルの UnitPrice 列 を 通 貨 として 表 示 するように 書 式 設 定 します 列 の 書 式 設 定 のカスタマイズ 方 法 についての 詳 細 は DataFormatString プロパ ティの 説 明 を 参 照 してください デザイナの 場 合 以 下 の 手 順 を 実 行 します 1. C1GridView コントロールのスマートタグをクリックして [C1GridView タスク]メニューから [プロパティビルダー]を 選 択 し ます 2. [C1GridView のプロパティ]ダイアログボックスが 開 きます 3. 左 ペインで 列 タブを 選 択 します 4. 選 択 した 列 のリストから UnitPrice 列 をクリックします 5. 列 のプロパティウィンドウで DataFormatString プロパティまで 下 方 へスクロールします 6. DataFormatString の 横 のドロップダウン 矢 印 をクリックして c を 選 択 します 7. OK をクリックし 設 定 を 保 存 して[C1GridView のプロパティ]ダイアログボックスを 閉 じます ソースビューの 場 合 ソースビューをに 切 り 替 え DataFormatString="c" を <cc1:c1boundfield> タグに 追 加 します 次 のような 表 示 になります ソースビュー <cc1:c1boundfield DataField="UnitPrice" HeaderText=" 単 価 " SortExpression="UnitPrice" DataFormatString="c"> コードの 場 合 Page_Load イベントに 次 のコードを 追 加 して 列 を 書 式 設 定 します Visual Basic コードの 書 き 方 Visual Basic ' UnitPrice 列 を 書 式 設 定 します CType(C1GridView1.Columns(2), C1.Web.Wijmo.Controls.C1GridView.C1BoundField).DataFormatString = "c" 63 Copyright GrapeCity inc. All rights reserved.

65 C# コードの 書 き 方 C# // UnitPrice 列 を 書 式 設 定 します ((C1.Web.Wijmo.Controls.C1GridView.C1BoundField)C1GridView1.Columns[2]).DataFormatString = "c"; 上 記 のコードで 列 のインデックスを 変 更 する 必 要 があるかもしれませんので ご 注 意 ください このトピックの 作 業 結 果 アプリケーションを 実 行 して UnitPrice 列 が 通 貨 として 書 式 設 定 されて 表 示 されることを 確 認 します ValueList を 使 用 した 列 データのカスタマイズ このトピックでは ValueList プロパティを 使 用 してセルデータの 表 示 を 変 更 する 方 法 について 説 明 します ValueList プロパティを 使 用 すると 列 の 実 際 のセルデータ 値 (ID データを 含 む 列 など)を 理 解 可 能 な 表 示 値 に 置 き 換 えることができます コードの 場 合 次 のコードを Page_Load イベントに 追 加 して 置 換 テキストを 含 む ValueList ディクショナリを 準 備 します Visual Basic コードの 書 き 方 Visual Basic ' ValueList ディクショナリの 準 備 Dim ht As New Hashtable() ht.add("1", "Beverages") ht.add("2", "Condiments") ht.add("3", "Confections") ht.add("4", "Dairy Products") ht.add("5", "Grains/Cereals") ht.add("6", "Meat/Poultry") ht.add("7", "Produce") ht.add("8", "Seafood") C# コードの 書 き 方 C# // ValueList ディクショナリの 準 備 Hashtable ht = new Hashtable(); ht.add("1", "Beverages"); ht.add("2", "Condiments"); ht.add("3", "Confections"); ht.add("4", "Dairy Products"); 64 Copyright GrapeCity inc. All rights reserved.

66 ht.add("5", "Grains/Cereals"); ht.add("6", "Meat/Poultry"); ht.add("7", "Produce"); ht.add("8", "Seafood"); ValueList ディクショナリ 内 の 項 目 で 置 き 換 える 項 目 を 含 む 列 (この 例 では CategoryID)を 割 り 当 てます Visual Basic コードの 書 き 方 Visual Basic ' 実 際 のセルデータ 値 に 対 して ValueList ディクショナリの 値 を 割 り 当 てます CType(C1GridView1.Columns.ColumnByName("CategoryID"), C1.Web.Wijmo.Controls.C1GridView.C1BoundField).ValueList = ht Sub C# コードの 書 き 方 C# // 実 際 のセルデータ 値 に 対 して ValueList ディクショナリの 値 を 割 り 当 てます ((C1.Web.Wijmo.Controls.C1GridView.C1BoundField)C1GridView1.Columns.ColumnByName("CategoryID")).ValueList = ht; ここまでの 成 果 プロジェクトを 実 行 すると グリッドの CategoryID 列 の 項 目 が ValueList ディクショナリ 内 の 項 目 に 置 き 換 えられ C1GridView の CategoryID 列 に 表 示 さ れます 置 換 テキストを 含 まない 元 のグリッドは 次 のように 表 示 されます 置 換 テキストを 含 むグリッドは 次 のように 表 示 されます 1 行 おきの 行 スタイルの 設 定 このトピックでは C1GridView の 行 の 色 を 交 互 に 変 える 方 法 について 説 明 します デザイナの 場 合 次 の 手 順 を 実 行 します 1. C1GridView コントロールを Web フォームにドラッグ&ドロップします 2. C1GridView にデータを 追 加 します 詳 細 については データソースへのグリッドの 連 結 を 参 照 してください 3. [OK]をクリックします ソースビューの 場 合 65 Copyright GrapeCity inc. All rights reserved.

67 行 の 色 を 交 互 に 変 えるには 次 のコードを<head> </head> タグの 間 に 追 加 します ソースビュー <style type = "text/css"> <// 1 行 おきに 行 の 色 を 設 定 します.wijmo-wijgrid-alternatingrow { background-color:pink!important; </style> CSS の 場 合 デフォルトでは aristo テーマを 使 用 することで C1GridView の 行 の 色 を 交 互 に 変 えることができます 既 存 のテーマを 変 更 して 行 スタイルを1 行 おきに 設 定 するには 次 の 手 順 に 従 います 1. 次 のリンクから 変 更 するテーマの CSS ファイルを 開 きます 2. テキストエディタで 新 しいファイルを 作 成 し テーマの CSS ファイルの 内 容 をコピーします 前 述 の ソースビューの 場 合 で 定 義 されているようにコードを 変 更 して 1 行 おきに 行 の 色 を 設 定 します 3. 拡 張 子.css を 付 けてファイルを 保 存 します 4. CSS ファイルをプロジェクトに 追 加 します 5. 次 に 示 すように ソースビューで <head></head> タグ 内 にコードを 追 加 して CSS ファイルをリンクします <link rel= stylesheet type= text/css href= name.css > メモ:スタイルシートは custom-theme フォルダ 内 にある CSS ファイルです ここまでの 成 果 プロジェクトを 実 行 すると 1 行 おきに 違 う 色 が 表 示 されます 条 件 付 き 書 式 の 設 定 特 定 の 条 件 に 基 づいてグリッドの 外 観 を 変 更 したい 場 合 があります コードの 場 合 特 定 の 条 件 に 一 致 するグリッド 行 やセルの 外 観 を 変 更 するには RowDataBound イベントを 使 用 します RowDataBound イベントを 使 用 して 特 定 の 行 の 色 やセルのフォントを 変 更 するには 次 の 手 順 を 実 行 します 1. RowIndex プロパティを 使 用 して 外 観 を 変 更 する 行 の 番 号 を 指 定 します 2. C1GridViewRow.BackColor プロパティに 目 的 の 色 を 設 定 します 66 Copyright GrapeCity inc. All rights reserved.

68 たとえば RowDataBound イベントに 次 のコードを 追 加 します RowDataBound event: Visual Basic コードの 書 き 方 Visual Basic Protected Sub C1GridView1_RowDataBound(ByVal sender As Object, ByVal e As C1.Web.UI.Controls.C1GridView.C1GridViewRowEventArgs) Handles C1GridView1.RowDataBound If (e.row.rowindex = 2) Then e.row.backcolor = System.Drawing.Color.Red End If End Sub C# コードの 書 き 方 C# private void C1GridView1_RowDataBound(object sender, C1.Web.UI.Controls.C1GridView.C1GridViewRowEventArgs e) { if ((e.row.rowindex == 2)) { e.row.backcolor = System.Drawing.Color.Red; 3. 特 定 のセルで 使 用 されるフォントの 色 を 変 更 するには セル 内 のテキストと 目 的 の 色 を 指 定 します たとえば RowDataBound イベントに 次 のコードを 追 加 します Visual Basic コードの 書 き 方 Visual Basic Protected Sub C1GridView1_RowDataBound(ByVal sender As Object, ByVal e As C1.Web.UI.Controls.C1GridView.C1GridViewRowEventArgs) Handles C1GridView1.RowDataBound If (e.row.cells(0).text = "Chang") Then e.row.cells(0).forecolor = System.Drawing.Color.Green End If End Sub C# コードの 書 き 方 C# private void C1GridView1_RowDataBound(object sender, C1.Web.UI.Controls.C1GridView.C1GridViewRowEventArgs e) { if ((e.row.cells[0].text == "Chang")) { e.row.cells[0].forecolor = System.Drawing.Color.Green; メモ:このコード 内 の 列 インデックスは 適 宜 変 更 してください このコードでは テキスト Chang を 含 むセルの フォント 色 を 緑 色 に 変 更 しています 67 Copyright GrapeCity inc. All rights reserved.

69 ここまでの 成 果 最 初 のコードスニペットでは 3 行 目 の 背 景 色 を 赤 色 に 変 更 しています. 2つ 目 のコードスニペットでは RowDataBound イベントを 使 用 して 特 定 の 行 の 色 またはセルのフォントを 変 更 しています スクロール 可 能 なグリッドの 作 成 C1GridView コントロールで 垂 直 スクロールと 水 平 スクロールを 有 効 にするには 次 の 手 順 を 実 行 します デザイナの 場 合 1. C1GridView コントロールを 右 クリックして [プロパティ]を 選 択 して[プロパティ]ウィンドウを 開 きます 2. [プロパティ]ウィンドウから ScrollingSettingsを 拡 大 してモードを Both に 変 更 します 3. Heightテキストボックスに250pxとWidthテキストボックスに450pxを 入 力 します コードの 場 合 Visual Basicコードの 書 き 方 : Visual Basic 'グリッドの 高 さと 幅 を 設 定 します C1GridView1.Height = 250 C1GridView1.Width = 450 'スクロールをオンにして 水 平 スクロールと 垂 直 スクロールの 両 方 を 設 定 します C1GridView1.ScrollingSettings.Mode = C1.Web.Wijmo.Controls.C1GridView.ScrollMode.Both C#コードの 書 き 方 : C# 68 Copyright GrapeCity inc. All rights reserved.

70 //グリッドの 高 さと 幅 を 設 定 します C1GridView1.Height = 250; C1GridView1.Width = 450; // スクロールをオンにして 水 平 スクロールと 垂 直 スクロールの 両 方 を 設 定 します C1GridView1.ScrollingSettings.Mode = C1.Web.Wijmo.Controls.C1GridView.ScrollMode.Both; ソースビューの 場 合 グリッドに 水 平 スクロールバーと 垂 直 スクロールバーの 両 方 を 表 示 するには <cc1:c1gridview>タグ 内 にScrollingSettings プロパティを 変 更 します <cc1:c1gridview ID="C1GridView1" runat="server" Height="250px" Width="450px"> <ScrollingSettings Mode="Both"> </ScrollingSettings> 注 意 :スクロールバーを 表 示 して 正 しくスクロールするには Height プロパティと Width プロパティを 指 定 する 必 要 があ ります フッターテキストの 設 定 このトピックでは デザイン 時 やプログラムによって C1GridView にフッターを 表 示 し そのテキストを 設 定 する 方 法 について 説 明 します デザイナの 場 合 以 下 の 手 順 を 実 行 します 1. C1GridView コントロールを 右 クリックして [スマートタグの 表 示 ]を 選 択 します [C1GridView タスク]メニューで [プロパティビルダー プロパティビルダー]を 選 択 します C1GridView のプロパティウィンドウが 表 示 されます 2. 全 般 タブで [フッターの 表 示 ]チェックボックスを ON にします 3. 列 タブを 選 択 して [ 実 行 時 に 自 動 的 に 列 を 作 成 ]を OFF にします 4. [ 選 択 した 列 ]のリストから 列 を 選 択 します 5. FooterText プロパティに 希 望 のテキストを 入 力 します ソースビューの 場 合 ソースビューに 切 り 替 え 以 下 の 手 順 を 実 行 します 1. 以 下 のテキストを <cc1:c1gridview> タグに 設 定 します AutoGenerateColumns プロパティをFalse に 設 定 します Set the ShowFooter プロパティTrue に 設 定 します この 結 果 次 のようになります <cc1:c1gridview ID="C1GridView1" runat="server" DataSourceID="AccessDataSource1" AutogenerateColumns="False" ShowFooter="True"> 2. FooterText プロパティを 使 用 して 個 々の 列 のフッターテキストを 設 定 します 次 の <FooterText="フッター" テキスト <を <cc1:c1boundfield< タグ 内 に 追 加 します その 結 果 次 のようになります <cc1:c1boundfield DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" FooterText="フッタ"> これにより FooterText プロパティが 設 定 されます コードの 場 合 コードエディタを 開 き 以 下 の 手 順 を 実 行 します 69 Copyright GrapeCity inc. All rights reserved.

71 AutoGenerateColumns プロパティを False に 設 定 します Set the ShowFooter プロパティを True に 設 定 します FooterText プロパティを 使 用 して 個 々の 列 のフッターテキストを 設 定 します このプロパティは DataBind メソッドが 呼 び 出 される 前 に 設 定 する 必 要 があります 例 えば 次 のコードを Page_Load イベントに 追 加 します Visual Basic コードの 書 き 方 Visual Basic C1GridView1.AutoGenerateColumns = False C1GridView1.ShowFooter = True C1GridView1.Columns(0).FooterText = "フッター" C# コードの 書 き 方 C# C1GridView1.AutoGenerateColumns = false; C1GridView1.ShowFooter = true; C1GridView1.Columns[0].FooterText = "フッター"; このトピックの 作 業 結 果 この 例 では 一 番 の 列 のフッターテキストをフッターに 設 定 します 注 意 :フッターテキストは 自 動 生 成 されていない 列 に 対 してのみ 設 定 できます スクロールできない 行 / 列 の 作 成 行 / 列 をスクロールできないように 固 定 するには StaticRowIndex または StaticColumnIndex を 使 用 します このプロパ ティに 整 数 値 を 設 定 して 固 定 する 行 / 列 の 番 号 を 指 定 します 次 の 例 では グリッドの 最 初 の 行 をスクロールできないように 固 定 しています デザイナの 場 合 次 の 手 順 を 実 行 します 1. スクロール 可 能 なグリッドを 作 成 します 詳 細 については スクロール 可 能 なグリッドの 作 成 を 参 照 してください 2. グリッドを 右 クリックし [プロパティ]を 選 択 して C1GridView に 関 連 するプロパティとイベントを 表 示 します 70 Copyright GrapeCity inc. All rights reserved.

72 3. StaticRowIndex プロパティを 固 定 する 行 のインデックス 値 に 設 定 します 4. [OK]をクリックして 設 定 を 保 存 し [プロパティ]ダイアログを 閉 じます ソースビューの 場 合 次 の 手 順 を 実 行 します 1. スクロール 可 能 なグリッドを 作 成 します 詳 細 については スクロール 可 能 なグリッドの 作 成 を 参 照 してください 2. ソースビューに 切 り 替 えます 3. C1GridView の StaticRowIndex プロパティを 固 定 する 列 のインデックス 値 に 設 定 します それには 次 に 示 すよう に StaticRowIndex='0' を <cc1: C1GridView> タグに 追 加 します <cc1:c1gridview ID="C1GridView1" runat="server" StaticRowIndex='0'> これで グリッドを 垂 直 方 向 にスクロールしても 最 初 の 行 が 固 定 されたままになります コードの 場 合 次 の 手 順 を 実 行 します 1. スクロール 可 能 なグリッドを 作 成 します 詳 細 については スクロール 可 能 なグリッドの 作 成 を 参 照 してください 2. 最 初 の 列 の StaticRowIndex プロパティを 0 に 設 定 します これで グリッドを 垂 直 方 向 にスクロールしても 最 初 の 行 が 固 定 されたままになります Visual Basic コードの 書 き 方 Visual Basic ' 垂 直 方 向 にスクロールされたときに グリッドの 最 初 の 行 が 固 定 されるようにします Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load C1GridView1.StaticRowIndex = 0 End Sub C# コードの 書 き 方 C# // 垂 直 方 向 にスクロールされたときに グリッドの 最 初 の 行 が 固 定 されるようにします protected void Page_Load(object sender, EventArgs e) { C1GridView1.StaticRowIndex = 0; アプリケーションを 実 行 し グリッドをスクロールします 最 初 の 行 がグリッドの 他 の 行 と 一 緒 にスクロールしないことがわかりま す スクロールしない 列 を 作 成 するには StaticColumnIndex プロパティを 使 用 して 同 じ 手 順 に 従 います 列 内 へのコントロールの 追 加 テンプレート 列 を 使 用 することで 任 意 のコントロールをグリッドの 列 に 簡 単 に 追 加 できます 以 下 のサーバー 側 タスク 別 ヘル プトピックでは C1GridView コントロール 内 にテンプレート 列 の 追 加 テンプレート 列 にコントロールの 追 加 そしてテンプレー ト 列 をコントロールに 連 結 する 手 順 について 説 明 します 71 Copyright GrapeCity inc. All rights reserved.

73 テンプレート 列 の 追 加 テンプレート 列 を C1GridView に 追 加 するには 以 下 の 手 順 を 実 行 します 1. C1GridView コントロールを 右 クリックして [スマートタグの 表 示 ]を 選 択 します [C1GridView タスク]メニューで プ ロパティビルダーを 選 択 します C1GridView のプロパティウィンドウが 表 示 されます 2. 列 タブをクリックします 3. ボタンをクリックして すべての 列 を[ 選 択 した 列 ]のリストから 削 除 します 4. [ 使 用 可 能 な 列 ]のリストから[テンプレートフィールド]を 選 択 します 5. 列 のリストの 間 にある 矢 印 ボタンをクリックして 選 択 した 列 のリストにテンプレートフィールドをコピーします 上 記 の 手 順 を3 回 繰 り 返 して テンプレートフィールドをさらに3つ( 合 計 4つ) 作 成 します 6. [ 列 のプロパティ]で 各 列 の HeaderText プロパティをそれぞれ 仕 入 先 # 担 当 者 名 仕 入 先 名 および 住 所 に 設 定 します 注 意 : 各 テンプレート 列 への 変 更 を 表 示 するには 適 用 ボタンをクリックする 必 要 があります 7. [ 使 用 可 能 な 列 ]のリストから [コマンドフィールド]ノードを 拡 張 して [ 編 集 更 新 キャンセル]を 選 択 します 8. 列 リストの 間 にある 矢 印 ボタンをクリックして [ 編 集 更 新 キャンセル]を[ 選 択 した 列 ]のリストにコピーします [ 選 択 した 列 ]のリストは 次 のようになります 9. OK をクリックして [C1GridView のプロパティ]ダイアログボックスを 閉 じます テンプレート 列 の 連 結 このトピックでは 編 集 できないテンプレート 列 と 実 行 時 に 編 集 可 能 なテンプレート 列 をデータソースに 連 結 する 方 法 について 説 明 します このトピックでは テンプレート 列 の 追 加 トピックを 完 備 したことを 想 定 しています 編 集 できないテンプレート 列 のバインディング 編 集 ができないテンプレート 列 SupplierID をデータソースに 連 結 するには 以 下 の 手 順 を 実 行 します 1. C1GridView コントロールを 右 クリックして [スマートタグの 表 示 ]を 選 択 します 2. [C1GridView タスク]メニューで [テンプレートの 編 集 ]を 選 択 します テンプレートエディタが 表 示 されます 3. CC1GridView スマートタグをクリックして [ 表 示 ]ドロップダウンリストから [Column [0] - Supplier #]を 選 択 しま す テンプレートエディタが 表 示 されます 72 Copyright GrapeCity inc. All rights reserved.

74 4. ツールボックスの 標 準 タブから Label コントロールを [Item Template]セクションにドラッグします 5. [Label タスク]メニューが 表 示 されない 場 合 Label1 スマートタグをリックして [DataBindings の 編 集 ]を 選 択 しま す Label1 DataBindings ウィンドウが 表 示 されます 6. [ 連 結 可 能 プロパティ]リストで Text を 選 択 して [ 連 結 するフィールド]ボックスから SupplierID フィールドを 選 択 しま す 7. OK をクリックします 8. C1GridView スマートタグをクリックして [C1GridView タスク]メニューから [テンプレート 編 集 の 終 了 ]を 選 択 しま す 編 集 可 能 なテンプレート 列 のバインディング 編 集 可 能 なテンプレート 列 Contact name Company name および Address をデータソースに 連 結 するには 以 下 の 手 順 を 実 行 します 1. C1GridView スマートタグをクリックして [テンプレートの 編 集 ]を 選 択 します 2. [ 表 示 ]ドロップダウンリストから [Column [1] - ContactName]を 選 択 します 3. ツールボックスの 標 準 タブから Label コントロールを [Item Template]セクションにドラッグします 4. [Label タスク]メニューが 表 示 されない 場 合 Label2 スマートタグをクリックして [DataBindings の 編 集 ]をクリックし ます Label2 DetaBindings ウィンドウが 表 示 されます 5. [バインド 可 能 プロパティ]リストで Text を 選 択 して [バインドするフィールド]ボックスから ContactName フィールド を 選 択 します 6. OK をクリックします 7. ツールボックスの 標 準 タブから TextBox コントロールを EditItem Template セクションにドラッグします 8. [TextBox タスク]メニューが 表 示 されない 場 合 TextBox1 スマートタグをクリックして [DataBindings の 編 集 ]をク リックします 9. [バインド 可 能 プロパティ]リストで Text を 選 択 して [バインドするフィールド]チェックボックスから ContactName 73 Copyright GrapeCity inc. All rights reserved.

75 フィールドを 選 択 します 10. [ 両 方 向 のデータ 連 結 ]チェックボックスが ON になっていることを 確 認 して OK をクリックします 11. Company name 列 と Address 列 にも 上 記 の 手 順 を 繰 り 返 します 各 列 をそれぞれ CompanyName フィールドと Address フィールドに 連 結 します 12. C1GridView スマートタグをクリックして [C1GridView タスク]メニューから[テンプレート 編 集 の 終 了 ]を 選 択 します このトピックの 作 業 結 果 プロジェクトを 実 行 します 1 行 目 の 編 集 ボタンをクリックすると Supplier # 列 以 外 に 各 列 に 編 集 可 能 なテキストボックス が 表 示 されます この 情 報 を 編 集 できます データベースを 更 新 するには 更 新 をクリックし 行 った 編 集 を 無 視 するには キャンセル をクリックします 列 内 での CheckBox または ListBox コントロールの 追 加 ASP.NET の 標 準 の CheckBox と ListBox コントロールを 使 用 して 列 のデータを 表 示 するには 以 下 の 手 順 を 実 行 します 1. C1GridView を 右 クリックして コンテキストメニューから[スマートタグの スマートタグの 表 示 ]を 選 択 します [C1GridView のタスク] メニューから [プロパティビルダー プロパティビルダー]を 選 択 します [C1GridView のプロパティ]ダイアログボックスが 表 示 されます 2. 左 ペインで 列 タブを 選 択 します 3. [ 列 リスト]で 使 用 可 能 な 列 のリストからテンプレートフィールドを 選 択 します 4. 列 リストの 間 にある 矢 印 ボタンをクリックして 選 択 した 列 のリストにテンプレートフィールドをコピーします 5. 新 しいテンプレートフィールドを 選 択 して Column properties に 任 意 のプロパティを 設 定 します これは 列 にヘッ ダーまたはフッターを 追 加 して 列 のサイズや 位 置 を 固 定 する などの 設 定 を 含 めます 6. OK をクリックして フォームに 戻 ります 7. スマートタグをクリックして [C1GridView タスク]メニューから [テンプレートの 編 集 ]を 選 択 します 8. [ 表 示 ]ドロップダウン 矢 印 をクリックして 作 成 した 新 規 テンプレート 列 を 選 択 します テンプレートエディタの Document が 表 示 されます 9. ItemTemplate セクションを 選 択 します 10. Visual Studio ツールボックスの CheckBox または ListBox コントロールをダブルクリックして ItemTemplate セク ションに 追 加 します プロパティウィンドウを 使 って CheckBox または ListBox を 書 式 設 定 できることに 注 意 してくださ い 11. C1GridViewスマートタグをクリックして [C1GridView タスク]メニューから[テンプレート 編 集 の 終 了 ]を 選 択 します Input for ASP.NET Web Forms コントロールの 追 加 GridView for ASP.NET Web Forms は Input for ASP.NET Web Forms コントロールと 完 全 な 互 換 性 があります Input for 74 Copyright GrapeCity inc. All rights reserved.

76 ASP.NET Web Forms を 使 用 すれば マスク 日 付 数 値 パーセント 通 貨 の 編 集 などのデータ 検 証 を 簡 単 にグリッドに 追 加 できます サーバー 側 の 編 集 時 にC1Inputコントロールを 使 用 してセルを 更 新 するには 以 下 の 手 順 を 実 行 します 1. C1GridViewコントロールを 右 クリックして コンテキストメニューから[プロパティ]を 選 択 します 2. プロパティウインドウで AllowC1InputEditors プロパティおよび AutoGenerateEditButton プロパティを True に 設 定 します 注 意 :Input for ASP.NET Web Forms についての 詳 細 は Input for ASP.NET Web Forms のヘルプを 参 照 してくださ い 以 下 の 手 順 では C1GridView コントロール 内 にテンプレート 列 を 追 加 し これらの 列 に C1InputNumeric と C1InputCurrency を 追 加 します 以 下 の 手 順 では C1GridView コントロールを 作 成 し それを Northwind データベースの Products テーブルに 連 結 してあるものと 想 定 していることに 注 意 してください 下 記 の 手 順 を 実 行 します 1. C1GridView を 右 クリックして コンテキストメニューから[スマートタグの 表 示 ]を 選 択 します [C1GridView のタスク] メニューから プロパティビルダーを 選 択 します [C1GridView のプロパティ]ダイアログボックスが 表 示 されます 2. 左 ペインで 列 タブを 選 択 します 3. [ 実 行 時 に 自 動 的 に 列 を 作 成 ]チェックボックスが 選 択 されている 場 合 非 選 択 状 態 にします 4. [ 選 択 した 列 ]のリストで 列 を 選 択 し 削 除 ボタンをクリックして ProductID SupplierID CategoryID UnitPrice UnitsInStock QuantityPerUnit および UnitsOnOrder 列 を 削 除 します テンプレート 列 を 追 加 して これらの 列 の 大 部 分 を 置 き 換 えることに 注 意 してください 5. [ 使 用 可 能 な 列 ]のリストで [ 使 用 可 能 な 列 ]のリストから[テンプレートフィールド]を 選 択 します 6. 列 リストの 間 にある 矢 印 ボタンをクリックして 選 択 した 列 のリストにテンプレートフィールドをコピーします 合 計 で3 つのテンプレートフィールドが 追 加 されるように この 手 順 をあと2 回 繰 り 返 します 7. 各 テンプレート 列 の HeaderText プロパティを それぞれ 単 価 在 庫 発 注 済 に 設 定 します 8. 下 矢 印 ボタンを 使 用 して Discontinued 列 を[ 選 択 した 列 ]のリストの 下 部 に 移 動 します 9. OK をクリックし [C1GridView のプロパティ]ダイアログボックスを 閉 じて フォームに 戻 ります 10. C1GridView スマートタグをクリックして [C1GridView タスク]メニューから [テンプレートの 編 集 ]を 選 択 します 11. C1InputCurrency コントロールを Price 列 に 追 加 します a. [C1GridView タスク]メニューで 表 示 ドロップダウン 矢 印 をクリックし Column[2] - Price で[Item Template]を 選 択 します b. Item Template エディタが 表 示 されます c. テンプレートの 本 体 領 域 内 をクリックし Visual Studio のツールボックスに 移 動 し C1InputCurrency コントロー ルをダブルクリックして それを C1TemplateField.ItemTemplate に 追 加 します d. C1InputCurrency コントロールのスマートタグをクリックし [C1InputCurrency タスク]メニューから [DataBindngs の 編 集 ]を 選 択 します これによって [C1InputCurrency DataBindings]ダイアログボックスが 開 きます e. [C1InputCurrency DataBindings]ダイアログボックスから [Show all properties]チェックボックスがon に なっていない 場 合 ON にします f. [バインド 可 能 プロパティ]リストで[ 値 ]を 選 択 し フィールドのバインド ラジオボタンを 選 択 して [バインドする フィールド]ドロップダウンリストで UnitPrice 列 を 選 択 します g. OK をクリックし 設 定 を 保 存 して[C1InputCurrency DataBindings]ダイアログボックスを 閉 じます h. C1InputCurrency コントロールを1 回 クリックして 選 択 し プロパティウィンドウで Width プロパティを "60px" に 設 定 します 12. C1InputNumeric コントロールを Stock 列 に 追 加 します a. [C1GridView スマートタグ]をクリックし 表 示 ドロップダウン 矢 印 をクリックして Column[3] - Stock で[Item Template]を 選 択 します b. テンプレートの 本 体 領 域 内 をクリックし Visual Studio のツールボックスに 移 動 し C1InputNumeric コントロー ルをダブルクリックして それを C1TemplateField.ItemTemplate に 追 加 します c. C1InputNumeric コントロールのスマートタグをクリックして [C1InputNumeric タスク]メニューから [DataBindings の 編 集 ]を 選 択 します これによって [C1InputNumeric DataBindings]ダイアログボックスが 開 きます 75 Copyright GrapeCity inc. All rights reserved.

77 d. [C1InputNumeric DataBindings]ダイアログボックスから [すべてのプロパティの 表 示 ]のチェックボックスが ON になっていない 場 合 ON にします e. バインド 可 能 プロパティリストで 値 を 選 択 し フィールドのバインド ラジオボタンを 選 択 して バインドするフィー ルドドロップダウンリストで UnitsInStock を 選 択 します f. OK をクリックし 設 定 を 保 存 して[C1InputNumeric DataBindings]ダイアログボックスを 閉 じます g. C1InputNumeric コントロールを1 回 クリックして 選 択 し プロパティウィンドウで Width プロパティを 60px に 設 定 します h. C1InputNumeric コントロールのスマートタグをクリックし [C1InputNumeric タスク]メニューで [DecimalPlaces]テキストボックスに 0 を 入 力 します 13. C1InputNumeric コントロールを Ordered 列 に 追 加 します a. [C1GridView スマートタグ]をクリックし 表 示 ドロップダウン 矢 印 をクリックして Column[4] - Stock で[Item Template]を 選 択 します b. テンプレートの 本 体 領 域 内 をクリックし Visual Studio のツールボックスに 移 動 し C1InputNumeric コントロー ルをダブルクリックして それを C1TemplateField.ItemTemplate に 追 加 します c. C1InputNumeric コントロールのスマートタグをクリックして [C1InputNumeric タスク]メニューから [DataBindings の 編 集 ]を 選 択 します これによって [C1InputNumeric DataBindings]ダイアログボックスが 開 きます d. [C1InputNumeric DataBindings]ダイアログボックスから [すべてのプロパティの 表 示 ]のチェックボックスが ON になっていない 場 合 ONにします e. バインド 可 能 プロパティリストで 値 を 選 択 し フィールドのバインド ラジオボタンを 選 択 して バインドするフィー ルドドロップダウンリストで QuantityPerUnit を 選 択 します f. OK をクリックし 設 定 を 保 存 して[C1InputNumeric DataBindings]ダイアログボックスを 閉 じます g. C1InputNumeric コントロールを1 回 クリックして 選 択 し プロパティウィンドウで Width プロパティを 60px に 設 定 します h. C1InputNumeric コントロールのスマートタグをクリックし [C1InputNumeric タスク]メニューで [MaxValue] テキストボックスに 200 を 入 力 します i. C1GridViewC1GridView スマートタグをクリックして [C1GridView タスク]メニューから[テンプレート 編 集 の 終 了 ]を 選 択 します このトピックの 作 業 結 果 アプリケーションを 実 行 して Price Stock および Ordered 列 で グリッドに Input for ASP.NET Web Forms コントロールが 使 用 されていることを 確 認 します グリッドの 外 観 のカスタマイズ 以 下 のサーバー 側 タスク 別 ヘルプの 各 トピックでは 外 観 をカスタマイズする 方 法 について 説 明 します 列 幅 の 設 定 76 Copyright GrapeCity inc. All rights reserved.

78 このトピックでは C1GridView の 列 幅 を 設 定 する 方 法 について 説 明 します 自 動 生 成 されていない 列 の 場 合 コードによって 列 幅 を 指 定 できます 列 幅 を 設 定 するには 以 下 の 手 順 を 実 行 します 1. C1GridView の C1GridView.AutoGenerateColumns プロパティを False に 設 定 します 2. C1GridView に 表 示 する 列 を 指 定 します 詳 細 については 指 定 した 列 の 非 表 示 化 を 参 照 してください 3. コードエディタを 使 うかデザイン 時 に たとえば 3 番 目 の 列 の 幅 を 設 定 します DataBind メソッドを 呼 び 出 した 後 に 次 のコードを 追 加 します Visual Basic コードの 書 き 方 Visual Basic C1GridView1.Columns(2).ItemStyle.Width = New Unit(500) C# コードの 書 き 方 C# C1GridView1.Columns[2].ItemStyle.Width = new Unit(500); このトピックの 作 業 結 果 プロパティビルダーから 左 ペインの 書 式 タブを 選 択 して 右 側 の[ 列 ]のリストから 列 を 選 択 します Width プロパティを 500 Pixels に 変 更 して OK をクリックします あるいは 列 のマークアップを 編 集 して Width 要 素 を 含 めます cc1:c1boundfield DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" Width="500"> このトピックでは 列 の 幅 を 変 更 する 方 法 について 習 いました この 例 では 3 番 目 の 列 が 500 ピクセルです 集 計 とグループ 化 の 使 用 77 Copyright GrapeCity inc. All rights reserved.

79 以 下 のサーバー 側 タスク 別 ヘルプの 各 項 目 では 同 じテキストの 行 をマージする 方 法 について 説 明 します グルーピングにつ いての 詳 細 は グルーピング トピックを 参 照 してください 行 のマージ このトピックでは C1GridView の 同 一 のテキストを 含 む 行 をマージする 方 法 について 説 明 します RowMerge プロパティを 使 うと 同 じテキストを 持 つ 行 を 選 択 した 列 にマージすることができます たとえば RowMerge プ ロパティを Free に 設 定 すると Property 列 に 同 じテキストを 持 つ 行 をマージできるようになります コードの 場 合 C1GridView クラスの RowMerge プロパティを 使 って 行 をマージするかどうか また マージする 場 合 その 方 法 を 決 定 しま す Visual Basic コードの 書 き 方 Visual Basic CType(C1GridView1.Columns(0), C1.Web.Wijmo.Controls.C1GridView.C1Field).RowMerge = C1.Web.Wijmo.Controls.C1GridView.RowMerge.Free C# コードの 書 き 方 C# ((C1.Web.Wijmo.Controls.C1GridView.C1Field)C1GridView1.Columns[0]).RowMerge = C1.Web.Wijmo.Controls.C1GridView.RowMerge.Free; ソースビューの 場 合 列 のマークアップに RowMerge プロパティを 設 定 します ソースビュー <cc1:c1gridview ID="C1GridView1" runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="false"> <Columns> 78 Copyright GrapeCity inc. All rights reserved.

80 <cc1:c1boundfield DataField="ProductName" SortExpression="ProductName" HeaderText="Name" RowMerge="Free" /> <cc1:c1boundfield DataField="OrderID" SortExpression="OrderID" HeaderText=" 注 文 コード" /> <cc1:c1boundfield DataField="Quantity" SortExpression="Quantity" HeaderText=" 数 量 " /> <cc1:c1boundfield DataField="Total" SortExpression="Total" HeaderText=" 合 計 " /> </Columns> </cc1:c1gridview> デザインビューの 場 合 プロパティビルダーからも RowMerge プロパティにアクセスできます [ 選 択 した 列 ]のリストから 列 を 単 に 選 択 し て RowMerge プロパティの 横 のドロップダウン 矢 印 をクリックして Free または Restricted を 選 択 します デフォルト は None となっています 製 品 サンプル ControlExplorer サンプルの Merging ページを 参 照 してください ページング 可 能 なグリッドの 作 成 以 下 のサーバー 側 タスク 別 ヘルプの 各 項 目 では C1GridView 内 でページングの 設 定 ページングスタイルの 変 更 およびカ スタマイズしたページングの 作 成 を 行 う 方 法 について 説 明 します ページングは ナビゲーションとして 次 ページ または 前 ページ リンクや 矢 印 ページ 番 号 その 他 のカスタマイズしたページング 項 目 のいずれかをページに 単 に 追 加 して ユーザー が 各 ページをめくって 複 数 ページに 分 けた 内 容 を 表 示 できるようにします 詳 細 については ページング トピックを 参 照 してく ださい ページングの 追 加 このトピックでは C1GridView の 内 容 を 複 数 ページに 分 けて 表 示 し これらのページを 移 動 し 各 ページに 表 示 される 項 目 の 数 を 設 定 する 方 法 について 説 明 します デザイナの 場 合 以 下 の 手 順 を 実 行 します 1. C1GridViewコントロールを 右 クリックして [スマートタグの 表 示 ]を 選 択 します [C1GridView タスク]ニューで [プロ パティビルダー]を 選 択 します C1GridView のプロパティウィンドウが 表 示 されます 2. ページング タブを 選 択 して [ページングを 有 効 にする]チェックボックスを ON にします これにより AllowPaging プロパティが True に 設 定 されます 3. [ページサイズ]テキストボックスに ページ 上 に 表 示 する 行 数 ( 5 など)を 設 定 します 4. デフォルトでは[ページの 移 動 ]の 下 の[ 移 動 ボタンの 表 示 ]チェックボックスが ON にされています これにより ページ 移 動 ボタンがページに 配 置 されます ページ 上 のボタンの 位 置 を 指 定 するには Position ドロップダウン 矢 印 をクリッ クして Bottom Top TopAndBottom のいずれかを 選 択 します デフォルトでは Mode プロパティは Numeric に 設 定 され ページ 上 の 移 動 ボタンは 数 字 で 表 示 されます ソースビューの 場 合 以 下 の 手 順 を 実 行 します 1. AllowPaging="True" と PageSize="5" を <cc1:c1gridview> タグに 追 加 して AllowPaging プロパティを True に 設 定 し PageSize プロパティをデータソースからデータをページを 通 じて 一 度 に4 項 目 を 移 動 するように 設 定 します ソースビュー <cc1:c1gridview ID="C1GridView1" runat="server" AutoGenerateColumns="False" 79 Copyright GrapeCity inc. All rights reserved.

81 DataSourceID="AccessDataSource1" VisualStylePath="~/C1WebControls/VisualStyles" AllowPaging="True" PageSize="5"> デフォルトで Mode プロパティは Numeric に 設 定 され ページ 上 に 移 動 ボタンは 数 字 で 表 示 されます 2. 移 動 ボタンの 位 置 を 変 更 する 場 合 は <cc1:c1gridview> と </cc1:c1gridview> タグの 間 に <PagerSettings Position="TopAndBottom"/> または <PagerSettings Position="TopAndBottom"/> を 追 加 することで Position を Top または TopAndBottom に 設 定 します コードの 場 合 以 下 の 手 順 を 実 行 します 1. AllowPaging プロパティを True にし PageSize を 5 に 設 定 して データソースがページ 移 動 で4 項 目 ずつ 表 示 され るようにします デフォルトでは Mode プロパティは Numeric に 設 定 され ページ 上 の 移 動 ボタンは 数 字 で 表 示 され ます Visual Basic コードの 書 き 方 Visual Basic C1GridView1.AllowPaging = True C1GridView1.PageSize = 4 C# コードの 書 き 方 C# C1GridView1.AllowPaging = true; C1GridView1.PageSize = 4; 2. 移 動 ボタンの 位 置 を 変 更 する 場 合 Position を Top または TopAndBottom に 設 定 します このトピックの 作 業 結 果 アプリケーションを 実 行 して グリッドの 下 部 にページングコントロールが 表 示 され 各 ページに5 項 目 が 表 示 されることを 確 認 します 現 在 のセル 位 置 の 追 跡 デフォルトでは クライアント 側 の 選 択 情 報 はサーバー 側 で 入 手 できません しかし 現 在 のセル 位 置 が 変 更 されたことを 追 跡 し この データをポストバック 時 にサーバーに 送 信 することができます たとえば 次 の 手 順 に 従 います 80 Copyright GrapeCity inc. All rights reserved.

82 1. 次 のスクリプトをアプリケーションのマークアップに 追 加 します <script type="text/javascript"> function oncurrentcellchanged(e, args) { $("#currentcellvalue").val($(e.target).c1gridview("currentcell").value()); </script> 2. C1GridView コントロールのマークアップを 次 のように 編 集 します <cc1:c1gridview ID="C1GridView1" runat="server" DataSourceID="AccessDataSource1" AutogenerateColumns="false" OnClientCurrentCellChanged="onCurrentCellChanged"> <Columns> <cc1:c1boundfield DataField="OrderID" HeaderText="OrderID" /> <cc1:c1boundfield DataField="Quantity" HeaderText="Quantity" /> </Columns> </cc1:c1gridview> 3. ウィンドウを 右 クリックし [コードの 表 示 ]を 選 択 してコードビューに 切 り 替 えます 4. 次 のコードをアプリケーションの Page_Load イベントに 追 加 します Visual Basic でコードを 書 く 場 合 Visual Basic Page.ClientScript.RegisterHiddenField("currentCellValue", Nothing) If IsPostBack Then Dim currentcellvalue As String = Page.Request("currentCellValue") End If C# でコードを 書 く 場 合 C# Page.ClientScript.RegisterHiddenField("currentCellValue", null); if (IsPostBack) { string currentcellvalue = Page.Request["currentCellValue"]; このコードを 使 用 すると 現 在 のセル 位 置 が 変 更 されたことを 追 跡 し このデータをポストバック 時 にサーバーに 送 信 することができま す セルの 値 の 取 得 NewEditIndex プロパティを 使 用 して 編 集 中 の 行 のインデックスを 取 得 することで グリッド 内 のセルの 値 を 簡 単 に 読 み 取 るこ とができます たとえば 次 のコードを 使 用 します Visual Basic でコードを 書 く 場 合 Visual Basic ' 編 集 中 の 行 のインデックスを 取 得 します Protected Sub C1GridView1_RowEditing(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewEditEventArgs) Handles C1GridView1.RowEditing Dim idx As Integer Dim id As String 81 Copyright GrapeCity inc. All rights reserved.

83 idx = e.neweditindex ' 編 集 中 の 行 内 のセルのテキストを 取 得 します id = C1GridView1.Rows(idx).Cells(0).Text End Sub C# でコードを 書 く 場 合 C# // 編 集 中 の 行 のインデックスを 取 得 します protected void C1GridView1_RowEditing(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewEditEventArgs e) { int idx = 0; string id; idx = e.neweditindex; // 編 集 中 の 行 内 のセルのテキストを 取 得 します id = C1GridView1.Rows[idx].Cells[0].Text; 上 のコードは 編 集 された 行 内 の 指 定 された 列 の 数 値 を 取 得 します AJAX によるグリッドの 更 新 以 下 のサーバー 側 タスク 別 ヘルプの 各 項 目 では C1GridView プロパティを 設 定 して AJAX を 使 ってグリッドを 更 新 する 方 法 ( 列 の 移 動 ページング ソート フィルタリングなど)について 説 明 します グリッドに 対 して 複 数 の Action を 選 択 できることに 注 意 してください また コールバック 使 用 して グリッド 上 のすべてのアク ションを 実 行 する 場 合 は Action プロパティを All に 設 定 します 列 の 移 動 実 行 時 にユーザーが 列 を 移 動 するときに AJAX を 使 用 してグリッドを 更 新 できます たとえば デザイナ ソースビュー およ びコードで 列 を 移 動 するときに AJAX を 使 用 してグリッドを 更 新 できます デザイナの 場 合 列 を 移 動 するときに AJAX を 有 効 にするには 以 下 の 手 順 を 実 行 します 1. C1GridViewコントロールを 選 択 して プロパティウィンドウで AllowColMoving プロパティを True に 設 定 します こ の 時 点 で プログラムを 実 行 すると 列 を 移 動 したときにページ 全 体 が 更 新 されることに 注 意 してください 2. プロジェクトで C1GridViewがまだ 選 択 された 状 態 で CallbackSettings ノードを 展 開 します プロパティウィンドウ のActionプロパティの 横 のドロップダウン 矢 印 をクリックして ColMove チェックボックスを ON にします ソースビューの 場 合 ソースビューに 切 り 替 え AllowColMoving="True" と CallbackOptions="ColMove" を <cc1:c1gridview> タグに 追 加 しま す 次 のような 表 示 になります ソースビュー <cc1:c1gridview ID="C1GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" VisualStylePath="~/C1WebControls/VisualStyles" AllowColMoving="True" 82 Copyright GrapeCity inc. All rights reserved.

84 CallbackOptions="ColMove"> コードの 場 合 列 の 移 動 時 に AJAX を 有 効 にするには 次 のコードを Page_Load イベントに 追 加 します Visual Basic コードの 書 き 方 Visual Basic C1GridView1.AllowColMoving = True C1GridView1.CallbackOptions = CallbackOptions.ColMove C# コードの 書 き 方 C# C1GridView1.AllowColMoving = true; C1GridView1.CallbackOptions = CallbackOptions.ColMove; このトピックの 作 業 結 果 プログラムを 実 行 して 列 を 移 動 します ページ 全 体 ではなく グリッドのみが 更 新 されることに 注 意 してください レコードの 編 集 実 行 時 にユーザーがレコードを 編 集 するときに AJAX を 使 用 してグリッドを 更 新 できます レコードの 編 集 についての 詳 細 は 行 の 編 集 トピックを 参 照 してください レコードを 編 集 するときに AJAX を 有 効 にするには 以 下 の 手 順 を 実 行 します 1. C1GridView コントロールを 選 択 し スマートタグをクリックして [C1GridView タスク]メニューを 開 きます 2. [プロパティビルダー プロパティビルダー]を 選 択 します [C1GridView のプロパティ]ダイアログボックス([プロパティビルダー プロパティビルダー])が 表 示 さ れます 3. 列 タブをクリックして [ 使 用 可 能 な 列 ]リストから コマンドフィールドノードを 拡 張 します 4. [ 編 集 更 新 キャンセル]をクリックし 矢 印 ボタンをクリックして [ 編 集 更 新 キャンセル]ボタン 列 を 選 択 した 列 のリストに 追 加 します 5. OK をクリックして [プロパティビルダー プロパティビルダー]を 閉 じます 6. C1GridViewがまだ 選 択 された 状 態 で CallbackSettings ノードを 展 開 します プロパティウィンドウの Action プロパ ティの 横 のドロップダウン 矢 印 をクリックして Editing チェックボックスを ON にします このトピックの 作 業 結 果 プログラムを 実 行 します 編 集 ボタンをクリックすると グリッドのみが 更 新 されることに 注 意 してください ページ 全 体 がリ ロードされることはありません グリッドのページング 実 行 時 にユーザーがグリッドをページングするときに AJAX を 使 用 してグリッドを 更 新 できます たとえば デザイナ ソース ビュー およびコードでグリッドをページングするときに AJAX を 使 用 してグリッドを 更 新 できます ページングについての 詳 細 は ページング と ページャブルグリッドの 作 成 を 参 照 してください デザイナの 場 合 C1GridView をページングするときに AJAX を 有 効 にするには 以 下 の 手 順 を 実 行 します 83 Copyright GrapeCity inc. All rights reserved.

85 1. C1GridView コントロールを 選 択 し スマートタグをクリックして [C1GridView タスク]メニューを 開 きます 2. [プロパティビルダー プロパティビルダー]を 選 択 します [C1GridView のプロパティ]ダイアログボックス([プロパティビルダー プロパティビルダー])が 表 示 さ れます 3. ページング タブをクリックし [ページング]セクションで [ページングを ページングを 有 効 にする]チェックボックスを ON にします 4. OK をクリックして [プロパティビルダー プロパティビルダー]を 閉 じます 5. C1GridView コントロールがまだ 選 択 された 状 態 で CallbackSettings ノードを 展 開 します プロパティウィンドウの Action プロパティの 横 のドロップダウン 矢 印 をクリックして [ページング]チェックボックスを ON にします ソースビューの 場 合 ソースビューに 切 り 替 え AllowPaging="True" と CallbackOptions="Paging" を <cc1:c1gridview> タグに 追 加 します 次 のような 表 示 になります ソースビュー <cc1:c1gridview ID="C1GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" VisualStylePath="~/C1WebControls/VisualStyles" AllowPaging="True" CallbackOptions="Paging"> コードの 場 合 列 をフィルタする 時 に AJAX を 有 効 にするには 次 のコードを Page_Load イベントに 追 加 します event: Visual Basic コードの 書 き 方 Visual Basic C1GridView1.AllowPaging = True C1GridView1.CallbackOptions = CallbackOptions.Paging C# コードの 書 き 方 C# C1GridView1.AllowPaging = true; C1GridView1.CallbackOptions = CallbackOptions.Paging; このトピックの 作 業 結 果 プログラムを 実 行 して グリッド 下 部 のページ 移 動 ボタンをクリックします ページ 間 を 移 動 すると グリッドのみが 更 新 されるこ とに 注 意 してください ページ 全 体 はリロードされません レコードの 選 択 レコードを 選 択 するときに AJAX を 有 効 にするには 以 下 の 手 順 を 実 行 します 1. C1GridView コントロールを 選 択 し スマートタグをクリックして [C1GridView タスク]メニューを 開 きます 2. [プロパティビルダー プロパティビルダー]を 選 択 します [C1GridView のプロパティ]ダイアログボックス( プロパティビルダー プロパティビルダー])が 表 示 さ れます 3. 列 タブをクリックして [ 使 用 可 能 な 列 ]リストから コマンドフィールドノードを 拡 張 します 4. [ 選 択 ]をクリックし 矢 印 ボタンをクリックして [ 選 択 ]ボタン 列 を[ 選 択 した 列 ]のリストに 追 加 します 5. 書 式 タブをクリックして [オブジェクト]のリストから[ 行 の 下 の 選 択 された 行 ]を 選 択 します 6. 背 景 色... ボタンをクリックして 色 を 選 択 します これにより グリッド 内 の 選 択 されたレコードがハイライト 表 示 され ます 7. OK をクリックして [プロパティビルダー プロパティビルダー]を 閉 じます 8. C1GridView OK をクリックして [プロパティビルダー]を 閉 じます CallbackSettings.Action プロパティの 横 のド 84 Copyright GrapeCity inc. All rights reserved.

86 ロップダウン 矢 印 をクリックして Selection チェックボックスを ON にします このトピックの 作 業 結 果 プログラムを 実 行 して グリッド 内 のレコードを 選 択 すると グリッドのみが 更 新 されることに 注 意 してください 列 のソート 実 行 時 にユーザーが 列 をソートするときに AJAX を 使 用 してグリッドを 更 新 できます たとえば デザイナ ソースビュー およ びコードで 列 をソートするときに AJAX を 使 用 してグリッドを 更 新 できます ソート 機 能 についての 詳 細 は ソート トピックを 参 照 してください デザイナの 場 合 列 をソートするときに AJAX を 有 効 にするには 以 下 の 手 順 を 実 行 します 1. C1GridView コントロールを 選 択 し スマートタグをクリックして [C1GridView タスク]メニューを 開 きます 2. [プロパティビルダー プロパティビルダー]を 選 択 します [C1GridView のプロパティ]ダイアログボックス([プロパティビルダー プロパティビルダー])が 表 示 さ れます 3. 全 般 タブで [ 動 作 ]セクションの[ソートを 有 効 にする]チェックボックスを ON にします 4. OK をクリックして [プロパティビルダー プロパティビルダー]を 閉 じます この 時 点 で プログラムを 実 行 すると 列 をソートしたときに ページ 全 体 が 更 新 されることに 注 意 してください 5. プロジェクトで C1GridView コントロールがまだ 選 択 された 状 態 で CallbackSettings ノードを 展 開 します プロパティ ウィンドウの Action プロパティの 横 のドロップダウン 矢 印 をクリックして Sorting チェックボックスを ON にします ソースビューの 場 合 ソースビューに 切 り 替 え AllowSorting="True" と CallbackOptions="Sorting" を <cc1:c1gridview> タグに 追 加 します 次 のような 表 示 になります ソースビュー <cc1:c1gridview ID="C1GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" VisualStylePath="~/C1WebControls/VisualStyles" AllowSorting="True" CallbackOptions="Sorting"> コードの 場 合 列 のフィルタリング 時 に AJAX を 有 効 にするには 次 のコードを Page_Load イベントに 追 加 します Visual Basic コードの 書 き 方 Visual Basic C1GridView1.AllowSorting = True C1GridView1.CallbackOptions = CallbackOptions.Sorting C# コードの 書 き 方 : C# C1GridView1.AllowSorting = true; C1GridView1.CallbackOptions = CallbackOptions.Sorting; このトピックの 作 業 結 果 85 Copyright GrapeCity inc. All rights reserved.

87 この 時 点 で プログラムを 実 行 して 列 をソートすると ページ 全 体 ではなく グリッドのみが 更 新 されることに 注 意 してくださ い 列 のフィルタリング 実 行 時 にユーザーが 列 をフィルタするときに AJAX を 使 用 してグリッドを 更 新 できます たとえば デザイナ ソースビュー お よびコードで 列 をフィルタするときに AJAX を 使 用 してグリッドを 更 新 できます 列 のフィルタリングについての 詳 細 は フィル タリング トピックを 参 照 してください デザイナの 場 合 列 をフィルタするときに AJAX を 有 効 にするには 以 下 の 手 順 を 実 行 します 1. C1GridView コントロールを 選 択 して プロパティウィンドウに 移 動 します 2. プロパティウィンドウで ShowFilter プロパティを True に 設 定 します 3. この 時 点 で プログラムを 実 行 すると 列 をフィルタしたときにページ 全 体 が 更 新 されることに 注 意 してください 4. プロジェクトで C1GridView コントロールがまだ 選 択 された 状 態 で CallbackSettings ノードを 展 開 します プロパ ティウィンドウの Action プロパティの 横 のドロップダウン 矢 印 をクリックして Filtering チェックボックスを ON にしま す ソースビューの 場 合 ソースビューに 切 り 替 え ShowFilter="True" と CallbackOptions="Filtering" を <cc1:c1gridview> タグに 追 加 します 次 の ような 表 示 になります ソースビュー <cc1:c1gridview ID="C1GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" VisualStylePath="~/C1WebControls/VisualStyles" ShowFilter="True" CallbackOptions="Filtering"> コードの 場 合 列 のフィルタリング 時 に AJAX を 有 効 にするには 次 のコードを Page_Load イベントに 追 加 します Visual Basic コードの 書 き 方 Visual Basic C1GridView1.ShowFilter = True C1GridView1.CallbackOptions = CallbackOptions.Filtering C# コードの 書 き 方 C# C1GridView1.ShowFilter = true; C1GridView1.CallbackOptions = CallbackOptions.Filtering; このトピックの 作 業 結 果 この 時 点 で プログラムを 実 行 して 列 をフィルタすると グリッドのみが 更 新 されることに 注 意 してください 実 行 時 のグリッドの 更 新 86 Copyright GrapeCity inc. All rights reserved.

88 RowUpdating イベントを 使 用 してグリッドの 基 底 にあるデータソースを 編 集 できる 場 合 に もう1つのオプションでクライアント 側 の Update() メソッドを 使 用 します RowUpdatingイベントは クライアント 側 の Update() メソッドが 呼 び 出 されたときに 発 生 します 状 況 によっては このメソッドを 使 用 して クライアントの 編 集 モードでユーザーによって 実 行 された 編 集 をサーバー に 送 信 する 場 合 があります この 例 では クリックするとグリッドが 更 新 されるボタンを 追 加 します 以 下 の 手 順 を 実 行 します 1. [ 表 示 ] [マークアップ]を 選 択 してソースビューに 切 り 替 えます 2. <cc1:c1gridview> タグのすぐ 上 に 以 下 のマークアップを 追 加 して アプリケーションにボタンを 追 加 します ソースビュー <asp:button ID="btn1" runat="server" Text=" 更 新 " OnClientClick="btn_ClientClick()" /> 3. アプリケーションの<head></head>タグ 内 に 以 下 のマークアップを 追 加 します ソースビュー <script type="text/javascript"> function btn_clientclick(sender, args) { var grid = $("#C1GridView1"); grid.c1gridview("endedit"); grid.c1gridview("update"); </script> このスクリプトは ボタンがクリックされたときにグリッドを 更 新 します チェックボックスフィルタを 有 効 にする このトピックでは C1GridView コントロールの CheckBox 列 でフィルタを 使 用 する 方 法 について 説 明 します メモ:C1GridView コントロールでチェックボックスフィルタを 使 用 するには C1GridView に 連 結 されているデータベース のテーブルに yes/no(checkbox)フィールドがある 必 要 があります デザイナの 場 合 次 の 手 順 を 実 行 します 1. C1GridView コントロールを Web フォームにドラッグ&ドロップします 2. C1GridView にデータを 追 加 します 詳 細 については データソースへのグリッドの 連 結 を 参 照 してください 3. C1GridView コントロールの 左 上 隅 にあるスマートタグをクリックしてフィルタを 有 効 化 し ドロップダウンメニューから[プ ロパティビルダー]を 選 択 します 4. [プロパティビルダー]ウィンドウで [フィルタの 表 示 ]オプションをオンにし [OK]をクリックします グリッド 上 部 のグ リッドの 列 ヘッダーのすぐ 下 に フィルタバーが 表 示 されます ソースビューの 場 合 チェックボックスフィールドでフィルタを 有 効 にするには <cc1:c1gridview ></cc1:c1gridview > タグを 次 のように 変 更 しま す ソースビュー <cc1:c1gridview ID="C1GridView1" runat="server" AutogenerateColumns="False" DataKeyNames="ID" DataSourceID="SqlDataSource1" ShowFilter="True"> ShowFilter を True に 設 定 します 87 Copyright GrapeCity inc. All rights reserved.

89 コードの 場 合 チェックボックスフィルタを 有 効 にするには Page_Load イベントに 次 のコードを 追 加 します Visual Basic コードの 書 き 方 Visual Basic ' ShowFilter を True に 設 定 します e C1GridView1.ShowFilter = True C# コードの 書 き 方 C# // ShowFilter を true に 設 定 します C1GridView1.ShowFilter = true; クライアント 側 での 選 択 このトピックでは クライアント 側 での 選 択 を 有 効 にする 方 法 選 択 した C1GridView の 行 列 およびセルの 背 景 色 を 変 更 す る 方 法 について 説 明 します デザイナの 場 合 連 結 グリッドを 作 成 するには 次 の 手 順 を 実 行 します 1. C1GridView コントロールを Web フォームにドラッグ&ドロップします 2. C1GridView にデータを 追 加 します 詳 細 については データソースへのグリッドの 連 結 を 参 照 してください 3. [OK]をクリックします ソースビューの 場 合 選 択 した1つの 行 の 背 景 色 を 変 更 するには 次 に 示 すようにClientSelectionMode= "SingleRow" を <c1:c1gridview> タ グに 追 加 します ソースビュー <cc1:c1gridview ID="C1GridView1" runat="server" AutogenerateColumns="False" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1" ClientSelectionMode= "SingleRow"> 背 景 色 を 定 義 するには 次 のコードを <head> </head> タグの 間 に 追 加 します ソースビュー <style type = "text/css">.wijmo-wijgrid.ui-state-highlight { background-color: Green!important; </style> 複 数 の 行 の 背 景 色 を 変 更 するには ClientSelectionMode= "MultiRow" を<c1:C1GridView>タグに 追 加 し 上 のように CSS コードをアタッチします ClientSelectionMode プロパティをセルまたは 列 に 設 定 することもできます 88 Copyright GrapeCity inc. All rights reserved.

90 ここまでの 成 果 プロジェクトを 実 行 すると 選 択 した 行 の 背 景 色 が 変 化 します 複 数 の 行 を 選 択 するには [Shift]キーまたは[Ctrl]キーを 使 用 します クライアント 側 チュートリアル 以 下 のチュートリアルでは C1GridView コントロールのクライアント 側 スクリプティングを 使 用 して より 複 雑 なアプリケーショ ンを 作 成 する 方 法 について 説 明 します クライアント 側 の 編 集 チュートリアル このチュートリアルでは データソースに 連 結 されたグリッドを 作 成 し AllowClientEditing プロパティを 使 用 してクライアント 側 での 編 集 を 可 能 にし ユーザーから 提 供 された 更 新 データがサーバーに 送 信 される 前 にデータを 検 証 します 手 順 1:コントロールへのデータの 連 結 この 手 順 では 最 初 に 新 しいプロジェクトを 作 成 し そのプロジェクトに C1GridView コントロールを 追 加 して データソースに 連 結 します この 例 では Northwind データベース(C1Nwind.mdb)を 使 用 します このデータベースは [マイドキュメント]フォルダ (Vista では[documents])にインストールされる ComponentOne Samples\Common フォルダにデフォルトでインストール されています デザイナの 場 合 1. Visual Studio の[ファイル]メニューから [ 新 規 作 成 ] [プロジェクト]を 選 択 します [ 新 しいプロジェクト]ダイアログ ボックスが 表 示 されます 2. [ 新 しいプロジェクト]ダイアログボックスの 左 ペインで 言 語 ノードを 展 開 し [Web]を 選 択 します 3. 右 ペインで [ASP.NET 空 の Web アプリケーション]を 選 択 し アプリケーションの 名 前 を 入 力 して [OK]を 選 択 しま す 新 しいアプリケーションが 作 成 されます 4. ソリューションエクスプローラで プロジェクト 名 を 右 クリックし [ 参 照 の 追 加 ]を 選 択 します 5. [ 参 照 の 追 加 ]ダイアログボックスで C1.Web.Wijmo.Controls および C1.Web.Wijmo.Controls.Design アセンブ リを 見 つけて 選 択 し [OK]をクリックします 参 照 が 追 加 されます 6. ソリューションエクスプローラで プロジェクトを 右 クリックし コンテキストメニューから[ 追 加 ] [ 新 しい 項 目 ]を 選 択 しま す 7. [ 新 しい 項 目 の 追 加 ]ダイアログボックスで テンプレートのリストから[Web フォーム]を 選 択 し 項 目 に Default.aspx という 名 前 を 付 けて [ 追 加 ]をクリックします 新 しい Web フォームが 開 きます 8. ソリューションエクスプローラで プロジェクト 名 を 右 クリックし [ 追 加 ] [ 新 しいフォルダ]を 選 択 します 新 しいフォル ダ 名 を App_Data と 指 定 します 9. Visual Studio のツールボックスに 移 動 し [C1GridView]アイコンをダブルクリックして プロジェクトにコントロールを 追 加 します 10. デザインビューで C1GridView コントロールを 選 択 します 11. ソリューションエクスプローラウィンドウで App_Data フォルダを 右 クリックし コンテキストメニューから[ 既 存 項 目 の 追 加 ]を 選 択 します 89 Copyright GrapeCity inc. All rights reserved.

91 12. [ 既 存 項 目 の 追 加 ]ダイアログボックスで Northwind データベースがある 場 所 に 移 動 し C1Nwind.mdb を 選 択 しま す デフォルトでは Northwind データベースは samples ディレクトリにあります 13. [ 追 加 ]をクリックして ダイアログボックスを 閉 じ ファイルをプロジェクトに 追 加 します ソースビューの 場 合 ソースビューに 切 り 替 えて 次 の 手 順 に 従 います 1. C1GridView コントロールをクリックして 選 択 し [プロパティ]ウィンドウに 移 動 します 次 に C1GridView コントロール のプロパティを 設 定 するか <cc1:c1gridview> タグを 次 のように 設 定 します a. HighlightCurrentCell プロパティを True に 設 定 します b. Set the AllowKeyboardNavigation プロパティを True に 設 定 します c. Set the AutogenerateColumns プロパティを False に 設 定 します d. Set the DataKeyNames プロパティを OrderID に 設 定 します 次 のようになります ソースビュー <cc1:c1gridview ID="C1GridView1" runat="server" DataKeyNames="OrderID" HighlightCurrentCell="true" AllowKeyboardNavigation="true" AutogenerateColumns="false"> 2. 次 のコードを <cc1:c1gridview> </cc1:c1gridview> タグに 挿 入 して データフィールドを 連 結 する 列 を 追 加 しま す ソースビュー <Columns> <cc1:c1boundfield DataField="OrderID" HeaderText="OrderID"></cc1:C1BoundField> <cc1:c1boundfield DataField="ShipName" HeaderText="ShipName"></cc1:C1BoundField> <cc1:c1boundfield DataField="ShipCity" HeaderText="ShipCity"></cc1:C1BoundField> <cc1:c1boundfield DataField="ShippedDate" HeaderText="ShippedDate"></cc1:C1BoundField> </Columns> 3. 次 のコードを </cc1:c1gridview> の 後 に 追 加 して クエリーを 設 定 します ソースビュー <asp:accessdatasource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/C1Nwind.mdb" SelectCommand="SELECT TOP 10 [OrderID], [ShipName], [ShipCity], [ShippedDate] FROM ORDERS WHERE [ShippedDate] IS NOT NULL"></asp:AccessDataSource> コードの 場 合 コードビハインドを 開 き 次 のコードを 追 加 します 1. 次 のコードを Page_Load イベントに 追 加 して グリッド 内 のビューを 更 新 します Visual Basic コードの 書 き 方 Visual Basic If Not IsPostBack Then UpdateView() End If C# コードの 書 き 方 90 Copyright GrapeCity inc. All rights reserved.

92 C# if (!IsPostBack) { UpdateView(); 2. 次 のコードをページの 先 頭 に 追 加 して コードに 名 前 空 間 を 追 加 します Visual Basic コードの 書 き 方 Visual Basic Imports System.Collections Imports System.Data Imports System.Data.OleDb C# コードの 書 き 方 C# using System.Collections; using System.Data; using System.Data.OleDb; 3. 次 のコードを Page_Load イベントの 後 に 追 加 して データソースをグリッドに 連 結 します Visual Basic コードの 書 き 方 Visual Basic Private Function GetDataSet() As DataTable Dim orders As DataTable = TryCast(Page.Session("ClinetOrders"), DataTable) If orders Is Nothing Then_ Using connection As New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data_ Source= DataDirectory \C1Nwind.mdb;Persist Security Info=True") Using adapter As New OleDbDataAdapter("SELECT TOP 10 [OrderID], [ShipName],_ [ShipCity], [ShippedDate] FROM ORDERS WHERE [ShippedDate] IS NOT NULL", connection) orders = New DataTable("Orders") adapter.fill(orders) orders.primarykey = New DataColumn() {orders.columns("orderid") Page.Session("ClinetOrders") = orders End Using End Using End If Return orders End Function Private Sub UpdateView() ' データを 連 結 します C1GridView1.DataSource = GetDataSet() C1GridView1.DataBind() 91 Copyright GrapeCity inc. All rights reserved.

93 End Sub C# コードの 書 き 方 C# private DataTable GetDataSet() { DataTable orders = Page.Session["ClinetOrders"] as DataTable; if (orders == null) { using (OleDbConnection connection = new OleDbConnection(@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source= DataDirectory \C1Nwind.mdb;Persist Security Info=True")) { using (OleDbDataAdapter adapter = new OleDbDataAdapter("SELECT TOP 10 [OrderID], [ShipName], [ShipCity], [ShippedDate] FROM ORDERS WHERE [ShippedDate] IS NOT NULL", connection)) { orders = new DataTable("Orders"); adapter.fill(orders); orders.primarykey = new DataColumn[] { orders.columns["orderid"] ; Page.Session["ClinetOrders"] = orders; return orders; private void UpdateView() { //データを 連 結 します C1GridView1.DataSource = GetDataSet(); C1GridView1.DataBind(); ここまでの 成 果 プロジェクトを 実 行 して すべての 機 能 を 備 えたグリッドアプリケーション(データベースの Orders テーブル)が 作 成 されたこと を 確 認 します 92 Copyright GrapeCity inc. All rights reserved.

94 このチュートリアルの 次 の 手 順 では クライアント 側 の 編 集 機 能 を 設 定 してグリッドの 機 能 をカスタマイズし グリッドの 実 行 時 の 操 作 を 確 認 します 手 順 2:クライアント 側 の 編 集 の 有 効 化 このチュートリアルの 前 の 手 順 では 単 純 なグリッドアプリケーションを 作 成 し グリッドをデータソースに 連 結 しました この 手 順 では クライアント 側 の 編 集 を 有 効 にして グリッドアプリケーションをさらにカスタマイズします 引 き 続 き 次 の 手 順 を 実 行 します ソースビューの 場 合 C1GridView コントロールをクリックして 選 択 し [プロパティ]ウィンドウに 移 動 します 次 に C1GridView コントロール の AllowClientEditing プロパティを True に 設 定 するか <cc1:c1gridview> タグに 次 のコードを 設 定 します ソースビュー AllowClientEditing="true" 次 のようになります ソースビュー <cc1:c1gridview ID="C1GridView1" runat="server" AllowClientEditing="true" DataKeyNames="OrderID" HighlightCurrentCell="true" AllowKeyboardNavigation="true" AutogenerateColumns="false"> ここまでの 成 果 プロジェクトを 実 行 し ダブルクリックでセルを 編 集 できることを 確 認 します 93 Copyright GrapeCity inc. All rights reserved.

95 このチュートリアルの 次 の 手 順 では グリッド 値 にデータ 検 証 機 能 を 追 加 します 手 順 3: : 更 新 前 のデータ 検 証 このチュートリアルの 前 の 手 順 では クライアント 側 の 編 集 を 有 効 にしました この 手 順 では グリッドアプリケーションをさらに カスタマイズして ユーザーから 提 供 された 更 新 データをサーバーに 送 信 する 前 にデータを 検 証 します 引 き 続 き 次 の 手 順 を 実 行 します ソースビューの 場 合 1. beforecellupdate 関 数 の <head>...</head> タグ 内 に 検 証 条 件 を 追 加 します この 例 では [Order ID]フィールドの 値 が 未 満 の 場 合 に メッセージを 表 示 します ソースビュー <script type="text/javascript"> function beforecellupdate(e, args) { if (args.cell.column().datafield === "OrderID") { var editor = $(args.cell.tablecell()).find("input"), value = parseint(editor.val()); if (value < 10000) { editor.addclass("invalid-value"); alert(" 無 効 な 値!"); return false; </script> 2. C1GridView コントロールをクリックして 選 択 し [プロパティ]ウィンドウに 移 動 します 次 に OnClientBeforeCellUpdate プロパティを beforecellupdate に 設 定 するか OnClientBeforeCellUpdate="beforeCellUpdate" を <cc1:c1gridview> タグに 追 加 します beforecellupdate, or add OnClientBeforeCellUpdate="beforeCellUpdate" in <cc1:c1gridview> tag. ここまでの 成 果 プロジェクトを 実 行 します Orders テーブルでデータを 編 集 したときに 変 更 した 値 が 設 定 した 条 件 に 照 らして 検 証 されるこ とを 確 認 します OrderID フィールドに 入 力 した 値 が 未 満 の 場 合 は Invalid value というメッセージが 表 示 されま す 94 Copyright GrapeCity inc. All rights reserved.

96 このチュートリアルの 次 の 手 順 では 検 証 された 更 新 データをサーバーに 送 信 します 手 順 4:サーバーへの 更 新 データの 送 信 このチュートリアルの 前 の 手 順 では ユーザーによって 入 力 されたデータを 条 件 に 照 らして 検 証 しました この 手 順 では 新 しい 更 新 データをサーバーに 送 信 します 引 き 続 き 次 の 手 順 を 実 行 します ソースビューの 場 合 1. <CallbackSettings Action="Editing" /> を <Columns>...</Columns> タグの 後 に 追 加 します 2. C1GridView コントロールをクリックして 選 択 し [プロパティ]ウィンドウに 移 動 します 次 に C1GridView コントロールの AutoGenerateDeleteButton プロパティを True に 設 定 するか <cc1:c1gridview> タグに 次 のコードを 設 定 します ソースビュー AutoGenerateDeleteButton="true" 次 のようになります ソースビュー <cc1:c1gridview ID="C1GridView1" runat="server" AutoGenerateDeleteButton="true" AllowClientEditing="true" DataKeyNames="OrderID" HighlightCurrentCell="true" AllowKeyboardNavigation="true" AutogenerateColumns="false"> コードの 場 合 1. C1GridView1_RowEditing イベントに 次 のコードを 追 加 します Visual Basic コードの 書 き 方 Visual Basic Private Sub C1GridView1_RowEditing(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewEditEventArgs) C1GridView1.EditIndex = e.neweditindex UpdateView() End Sub 95 Copyright GrapeCity inc. All rights reserved.

97 C# コードの 書 き 方 C# void C1GridView1_RowEditing(object sender, C1.Web.Wijmo.Controls.C1GridView.C1GridViewEditEventArgs e) { C1GridView1.EditIndex = e.neweditindex; UpdateView(); 2. C1GridView1_RowEditing イベントを 処 理 するには 次 のコードを Page_Init イベントに 追 加 します Visual Basic コードの 書 き 方 Visual Basic Protected Sub Page_Init(sender As Object, e As EventArgs) AddHandler C1GridView1.RowEditing, AddressOf C1GridView1_RowEditing End Sub C# コードの 書 き 方 C# protected void Page_Init(object sender, EventArgs e) { C1GridView1.RowEditing += C1GridView1_RowEditing; 3. データセットを 更 新 して ユーザーによる 変 更 を 処 理 します C1GridView1_RowUpdating イベントに 次 のコードを 追 加 します Visual Basic コードの 書 き 方 Visual Basic Dim orders As DataTable = GetDataSet() Dim row As DataRow = orders.rows.find(c1gridview1.datakeys(e.rowindex).value) If row IsNot Nothing Then For Each entry As DictionaryEntry In e.newvalues row(directcast(entry.key, String)) = entry.value Next Else Throw New RowNotInTableException() End If C# コードの 書 き 方 C# DataTable orders = GetDataSet(); DataRow row = orders.rows.find(c1gridview1.datakeys[e.rowindex].value); if (row!= null) { foreach (DictionaryEntry entry in e.newvalues) { row[(string)entry.key] = entry.value; else { 96 Copyright GrapeCity inc. All rights reserved.

98 throw new RowNotInTableException(); 4. 編 集 された 値 がサーバーに 送 信 されるように データセット 内 の 変 更 を 受 け 入 れます C1GridView1_EndRowUpdated イベン トに 次 のコードを 追 加 します Visual Basic コードの 書 き 方 Visual Basic GetDataSet().AcceptChanges() UpdateView() C# コードの 書 き 方 C# GetDataSet().AcceptChanges(); UpdateView(); 5. 対 応 する[ 削 除 ]ボタンがクリックされたら 行 を 削 除 します C1GridView1_RowDeleting イベントに 次 のコードを 追 加 します Visual Basic コードの 書 き 方 Visual Basic Dim orders As DataTable = GetDataSet() Dim row As DataRow = orders.rows.find(c1gridview1.datakeys(e.rowindex).value) If row IsNot Nothing Then orders.rows.remove(row) orders.acceptchanges() UpdateView() Else Throw New RowNotInTableException() End If C# コードの 書 き 方 C# DataTable orders = GetDataSet(); DataRow row = orders.rows.find(c1gridview1.datakeys[e.rowindex].value); if (row!= null) { orders.rows.remove(row); orders.acceptchanges(); UpdateView(); else { throw new RowNotInTableException(); 6. C1GridView1_RowDeleting イベントを 処 理 し 次 のコードを UpdateView() メソッドに 追 加 します Visual Basic コードの 書 き 方 Visual Basic AddHandler C1GridView1.RowDeleting, AddressOf C1GridView1_RowDeleting C# コードの 書 き 方 97 Copyright GrapeCity inc. All rights reserved.

99 C# C1GridView1.RowDeleting += new C1.Web.Wijmo.Controls.C1GridView.C1GridViewDeleteEventHandler(C1GridView1_RowDeleting); ソースビューの 場 合 C1GridViewコントロールをクリックして 選 択 し プロパティウィンドウに 移 動 します 次 に C1GridView コントロールのイベントを 処 理 す るか <cc1:c1gridview> タグを 次 のように 設 定 します 1. EndRowUpdated イベントを C1GridView1_EndRowUpdated に 設 定 します 2. RowDeleting イベントを C1GridView1_RowDeleting に 設 定 します 3. RowUpdating イベントを C1GridView1_RowUpdating に 設 定 します タグは 次 の 図 のようになります ソースビュー <cc1:c1gridview ID="C1GridView1" runat="server" AutoGenerateDeleteButton="true" AllowClientEditing="true" DataKeyNames="OrderID" HighlightCurrentCell="true" OnRowUpdating="C1GridView1_RowUpdating" OnEndRowUpdated="C1GridView1_EndRowUpdated" OnRowDeleting="C1GridView1_RowDeleting" AllowKeyboardNavigation="true" AutogenerateColumns="false"> ここまでの 成 果 プロジェクトを 実 行 し 編 集 されたデータ 値 がサーバーで 更 新 されることを 確 認 します 行 を 削 除 したり 変 更 内 容 に 基 づいてグリッドを 更 新 することもできます 以 下 の 図 に このチュートリアルで 追 加 されたグリッド 操 作 を 示 します 図 (i)- グリッド 内 の 列 の 値 を 編 集 する 図 (ii)- 変 更 された 値 がグリッドで 更 新 される 98 Copyright GrapeCity inc. All rights reserved.

100 図 (iii)- グリッドから 行 を 削 除 する 図 (iv)- 削 除 後 にグリッドが 更 新 される クライアント 側 からのデータベースの 更 新 C1GridViewでは AllowClientEditingをtrueに 設 定 することで テンプレート 列 を 定 義 しなくても クライアント 側 でグリッドのセルを 編 集 できるようになります メモ: OledbおよびSqlデータソースを 連 結 に 使 用 できます デザイナの 場 合 C1GridViewコントロールを 右 クリックし コンテキストメニューから[スマートタグの 表 示 ] 選 択 して コントロールをC1Nwind.mdbデー タベースに 連 結 します このデータベースは デフォルトではsamplesディレクトリに 置 かれています 詳 細 な 手 順 については 手 順 1/3:データソースへのC1GridViewの 連 結 を 参 照 してください ソースビューの 場 合 1. DataKeyNamesと 列 を 定 義 し C1GridViewで 編 集 できるようにCallbackSettingsを 設 定 するために <cc1:c1gridview ></cc1:c1gridview >タグを 次 のように 変 更 します <cc1:c1gridview ID="C1GridView1" runat="server" OnRowUpdating="C1GridView1_RowUpdating" AutogenerateColumns="false" DataKeyNames="CustomerID" ClientSelectionMode="SingleRow" AllowClientEditing="true" ShowFilter="true" OnFiltering="C1GridView1_Filtering" OnEndRowUpdated="C1GridView1_EndRowUpdated"> <CallbackSettings Action="Editing, Filtering" /> <Columns> <cc1:c1boundfield DataField="CustomerID" HeaderText="CustomerID" SortExpression="CustomerID"> </cc1:c1boundfield> <cc1:c1boundfield DataField="CompanyName" HeaderText="Company Name" 99 Copyright GrapeCity inc. All rights reserved.