FlexGridコントロールでは、サーバー側で、FlexGridのVisibleプロパティを使用して特定のグリッド列を表示または非表示にすることができます。しかし、この操作は、クライアント側で実行することもできます。MVCアプリケーションで、グリッドの非表示の列をエンドユーザーのボタンクリックで表示できた方がよい場合もあります。
たとえば、FlexGridを使用して会社の売上データを分析する場合、最初の段階では、限られた列だけを表示し、月ごとの売上高などの追加情報は、必要なときにのみ表示するようにしたいとします。JavaScriptを使用すると、これをクライアント側で実現できます。
次の例は、このシナリオを示しています。この例では、ボタンクリックでAmount列を表示できます。
同様に、［Hide Discount］ボタンのクリックで、グリッドからDiscount列を非表示にできます。
次に示すように、MVCアプリケーションのビューでJavaScriptを使用して、ボタンクリックで任意の列を表示/非表示にできます。
以下のコードは、「クイックスタート」トピックで作成したアプリケーションを拡張しています。
| HTML |
コードのコピー
|
|---|---|
<script>
function showAmount() {
var grid = wijmo.Control.getControl("#hFlexGrid");
//列インデックスによって
grid.columns[6].visible = true;
//または、列の名によって
grid.columns.getColumn("Amount").visible = true;
}
</script>
<script>
function hideDiscount() {
var grid = wijmo.Control.getControl("#hFlexGrid");
//列インデックスによって
grid.columns[4].visible = false;
//または、列の名によって
grid.columns.getColumn("Discount").visible = false;
}
</script>
<div class="container">
<div>
<c1-flex-grid id="hFlexGrid" auto-generate-columns="false" height="700px" width="800px" allow-add-new="true" class="grid">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-flex-grid-column binding="ID" header="ID"></c1-flex-grid-column>
<c1-flex-grid-column binding="終了日" header="Date"></c1-flex-grid-column>
<c1-flex-grid-column binding="国名" header="Country"></c1-flex-grid-column>
<c1-flex-grid-column binding="製品名" header="Product"></c1-flex-grid-column>
<c1-flex-grid-column binding="割引" header="Discount" format="p0"></c1-flex-grid-column>
<c1-flex-grid-column binding="アクティブ"></c1-flex-grid-column>
<c1-flex-grid-column binding="金額" format="c" is-visible="false"></c1-flex-grid-column>
</c1-flex-grid>
</div>
</div>
<button title="SetValue" onclick="showAmount()">金額を表示</button>
<button title="SetValue" onclick="hideDiscount()">割引を隠す</button>
|
|
関連トピック