グリッド：列の設定

デフォルトでは、FlexGridはitemsSourceに基づいて列を自動的に生成します。

FlexGridグリッドのコンストラクタのオプションパラメータを使用するか、任意の時点でグリッドの列コレクションに項目を追加することで、列を定義できます。

columnsを指定すると、どの列を選択してどのような順序で表示するかを決めることができます。また、これにより、各列の幅、見出し、書式設定、配置などのプロパティを制御できます。

この例では、スターサイズを使用して「国」列の幅を設定します。これは、余白が残らないようにグリッドの有効な幅に合わせて列を引き伸ばすように指示します。「利益」列は、formatプロパティを「n0」に設定した結果、桁区切りありで小数点以下の桁がない数字になります。

コンストラクタでの列の定義

ここでは、FlexGridを初期化するときにオプションのオブジェクトで列を定義します。

// 「options」オブジェクトを使用してグリッドを初期化します
new wijmo.grid.FlexGrid('#cdInitMethod', {
    autoGenerateColumns: false,
    columns: [
        { header: '国', binding: 'country', width: '*' },
        { header: '日付', binding: 'date' },
        { header: '利益', binding: 'amount', format: 'n0' },
        { header: '有効', binding: 'active' },
    ],
    itemsSource: data.getData(100)
});

列コレクションへの列の追加

ここでは、同じ列を別の方法で定義します。列を1つずつ初期化し、プロパティを設定し、列コレクションに追加します。

// プロパティを設定して2番目のグリッドを初期化します
var fgColsCollection = new wijmo.grid.FlexGrid('#cdColsCollection');
fgColsCollection.autoGenerateColumns = false;
fgColsCollection.itemsSource = data.getData(100);

// 列を1つずつ追加します
var c = new wijmo.grid.Column();
c.binding = 'country';
c.header = '国';
c.width = '*';
fgColsCollection.columns.push(c);

c = new wijmo.grid.Column();
c.binding = 'date';
c.header = '日付';
fgColsCollection.columns.push(c);

c = new wijmo.grid.Column();
c.binding = 'amount';
c.header = '利益';
c.format = 'n0';
fgColsCollection.columns.push(c);

c = new wijmo.grid.Column();
c.binding = 'active';
c.header = '有効';
fgColsCollection.columns.push(c);