FlexGrid for MVCは、非連結モードをサポートしませんが、JavaScriptまたはTypeScriptを使用してデータを設定するコードをクライアント側に追加することでこれを実現できます。
それには、モデルに連結するCollectionViewServiceを使用します。クライアント側でCollectionViewServiceの参照を取得し、Sale.csモデル内の項目の数に合わせてFlexGridに行を追加します。最後に、3列のデータを取得し、setCellDataメソッドを使用してFlexgridに追加します。
次の画像は、CollectionViewServiceを使用してクライアント側からデータを設定する方法を示しています。この例では、「クイックスタート」セクションで追加したSale.csモデルを使用します。
次のコード例は、クライアント側にコードを追加してデータを設定する方法を示します。
App.ts（TypeScriptファイル）
| App.ts |
コードのコピー
|
|---|---|
var fg; c1.documentReady(function () { populate(); }) function populate() { var fg = <wijmo.grid.FlexGrid>wijmo.Control.getControl("#fg"); var cv = <wijmo.collections.CollectionView>c1.getService('cv'); var total = cv.items.length; for (var i = 0; i <= total - 1; i++) { var obj = [cv.items[i].Product, cv.items[i].Country, cv.items[i].Amount]; var row = new wijmo.grid.Row(); fg.rows.push(row); for (var c = 0; c <= fg.columns.length - 1; c++) { fg.setCellData(i, c, obj[c]); } } } |
|
Index.cshtml
| Razor |
コードのコピー
|
|---|---|
@using UnboundFlexGrid.Models @using C1.Web.Mvc.Grid <script src="~/Scripts/app.js"></script> @model IEnumerable<Sale><c1-items-source id="cv" source-collection="Model"></c1-items-source><c1-flex-grid id="fg" height="400px" auto-generate-columns="false" allow-add-new="false" selection-mode="@((SelectionMode.Cell))"> <c1-flex-grid-column name="Product" header="製品名"></c1-flex-grid-column> <c1-flex-grid-column name="Country" header="国名"></c1-flex-grid-column> <c1-flex-grid-column name="Amount" header="金額"></c1-flex-grid-column> </c1-flex-grid> |
|