データの並べ替え
DataGridでは、標準で行の並べ替え（ソート）がサポートされています。各カラムのヘッダをクリックすると、そのカラムのデータで昇順、降順での並べ替えを指定できます。次の図は、メールアドレスのカラムでソートした結果です。
DataGridのカラムをエンド ユーザーの好みに応じて並べ替えられるようにするには、DataGridにcolumnReordering="true"属性を指定します。これによって、ドラッグ＆ドロップでカラムの並び順を変更できるようになります。例えば、下の図では、生年月日のカラムをドラッグ＆ドロップして、メールアドレスのカラムと順番を入れ替えています。
また、カラムの表示、非表示を切り替えるためのポップアップ メニューの作成もサポートされていますので、さまざまなエンド ユーザーによるカスタマイズ機能を実現することができます。
データの編集
ここまでDataGridの表示のカスタマイズに関する機能を紹介してきましたが、DataGridではデータの編集機能もサポートされています。ビュー定義のeditableプロパティにtrueを指定することで、カラム単位のテキストボックスによる編集が可能になります。また、defaultCellプロパティにeditableを指定して、すべてのカラムを編集可能にすることもできます。通常はセルをダブルクリックするなどして、特定のセルが編集状態になりますが、DataGridにsingleClickEdit="true"属性を指定すれば、シングル クリックで編集状態にする動作が実現できます。
特に指定しない場合は、編集状態になるとテキストボックスがセル上に表示されますが、typeプロパティで、チェック ボックス、コンボボックス、さらには、カレンダー入力（DateTextBox）などの編集用コンポーネントを指定できます。以下の例では、birthDate用にDateTextBox、group用にコンボボックスを指定しています。なお、DateTextBoxなどのウィジェットを利用した編集用コンポーネントを使用するには、"dojox.grid.cells.dijit"モジュールを読み込む必要があります（太字部分参照）。
dojo.require("dojox.grid.cells.dijit");
var myDataGridStructure = [
{defaultCell: {editable: true}, cells: [
{name: "画像", field: "photo", width: "40px",
formatter: myImageFormatter},
{name: "名前", field: "name", width: "auto"},
{name: "メールアドレス", field: "email", width: "auto"},
{name: "生年月日", field: "birthDate", width: "auto",
formatter: myDateFormatter,
type: dojox.grid.cells.DateTextBox},
{name: "グループ", field: "group", width: "50px",
formatter: myGroupFormatter,
type: dojox.grid.cells.Select,
options: ["", "家族", "友人", "会社"],
values: [0, 1, 2, 3], returnIndex: 1}
]}
];
生年月日のセルをクリックすると、カレンダー入力が、グループのセルをクリックすると、コンボボックスからの選択による編集ができるようになります。
編集用コンポーネントには、あらかじめ提供されているもの以外にも、formatter同様、アプリケーション独自の編集用コンポーネントを実装して、指定することができます。
