CollectionViewServiceを使用した非連結のFlexGrid

FlexGrid for MVCは、非連結モードをサポートしませんが、JavaScriptまたはTypeScriptを使用してデータを設定するコードをクライアント側に追加することでこれを実現できます。

それには、モデルに連結するCollectionViewServiceを使用します。クライアント側でCollectionViewServiceの参照を取得し、Sale.csモデル内の項目の数に合わせてFlexGridに行を追加します。最後に、3列のデータを取得し、setCellDataメソッドを使用してFlexgridに追加します。

次の画像は、CollectionViewServiceを使用してクライアント側からデータを設定する方法を示しています。この例では、「クイックスタート」セクションで追加したSale.csモデルを使用します。

次のコード例は、クライアント側にコードを追加してデータを設定する方法を示します。

JavaScript File (App.js)

app.js	コードのコピー
var fg; c1.documentReady(function () { populate(); }) function populate() { var fg = wijmo.Control.getControl("#fg"); var cv = 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]); } } }

app.js

コードのコピー

var fg;
c1.documentReady(function () {
    populate();
})
function populate() {
    var fg = wijmo.Control.getControl("#fg");
    var cv = 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]);
        }
    }
}

Controller Code

HomeController.cs	コードのコピー
public ActionResult Index() { return View(Sale.GetData(15)); }

View Code

Index.cshtml	コードのコピー
<script src="~/Scripts/app.js"></script> @model IEnumerable<Sale> @(Html.C1().CollectionViewService().Id("cv").Bind(Model)) @(Html.C1().FlexGrid().Id("fg").Height(400).AutoGenerateColumns(false).AllowAddNew(false) .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell) .Columns( col => { col.Add(cb => cb.Name("Product").Header("Product")); col.Add(cb => cb.Name("Country").Header("Country")); col.Add(cb => cb.Name("Amount").Header("Amount")); }))

Index.cshtml

コードのコピー

<script src="~/Scripts/app.js"></script>
@model IEnumerable<Sale>

@(Html.C1().CollectionViewService().Id("cv").Bind(Model))
@(Html.C1().FlexGrid().Id("fg").Height(400).AutoGenerateColumns(false).AllowAddNew(false)
    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Cell)
    .Columns( col => {
        col.Add(cb => cb.Name("Product").Header("Product"));
        col.Add(cb => cb.Name("Country").Header("Country"));
        col.Add(cb => cb.Name("Amount").Header("Amount"));
        }))