ナレッジベース

[FlexGrid for ASP.NET MVC] 列全体の配置をコードで変更する方法

作成日: 2019/09/25 最終更新日: 2019/09/25

文書種別

使用方法

詳細

グリッド全体の列に対して希望の並び順に変更するための直接的なメソッドは用意されておりませんが、下記の2通りの方法で対応できます。

1.columnLayoutプロパティを使用する方法
下記のように、予め定義したレイアウトをcolumnLayoutプロパティに設定します。
◎サンプルコード(View)

<script>
　　var colLayout = '{"columns":[{"name":"Active","dataType":3,"binding":"Active","header":"Active"},
　　　　{"name":"First","dataType":1,"binding":"First","header":"First"},
　　　　{"name":"Last","dataType":1,"binding":"Last","header":"Last"},
　　　　{"name":"Name","dataType":1,"binding":"Name","header":"Name"},
　　　　{"name":"Sales","dataType":2,"binding":"Sales","width":80,"header":"Sales"},
　　　　{"name":"Hired","dataType":4,"binding":"Hired","header":"Hired"},
　　　　{"name":"ID","dataType":2,"binding":"ID","width":80,"header":"ID"},
　　　　{"name":"CountryID","dataType":2,"binding":"CountryID","width":80,"header":"Country ID","visible":false}]}';

　　function setColumnLayout() {
　　　　var grid = wijmo.Control.getControl("#flexGrid");
　　　　grid.columnLayout = colLayout;
　　}
</script>

<button class="btn btn-primary" onclick="setColumnLayout()">ColumnLayout</button>
@(Html.C1().FlexGrid().Id("flexGrid")
　　・・・
)

2.列定義の配列を作成する方法
下記のように、列定義の配列を作成して既存の列をクリアし1つずつpushメソッドで追加します。
◎サンプルコード(View)

<script>
　　var columns = [
　　　　{ binding: "ID", header: "ID" },
　　　　{ binding: "Name", header: 'Name' },
　　　　{ binding: "First", header: 'First' },
　　　　{ binding: "Last", header: 'Last' },
　　　　{ binding: "Hired", header: 'Hired' },
　　　　{ binding: "Sales", header: 'Sales' }
　　]

　　function setColumnDef() {
　　　　var grid = wijmo.Control.getControl("#flexGrid");
　　　　grid.autoGenerateColumns = false;
　　　　grid.columns.clear();
　　　　columns.forEach(function (item) {
　　　　　　grid.columns.push(new wijmo.grid.Column(item));
　　　　})
　　}
</script>

<button class="btn btn-primary" onclick="setColumnDef()">Column Definition</button>
@(Html.C1().FlexGrid().Id("flexGrid")
　　・・・
)

旧文書番号

84507