FlexGrid

FlexGrid

はじめに

サンプル

設定

説明

ASP.NET MVC向けグリッドは、これまでよりも柔軟で強力な新しいバージョンのFlexGridコントロールです。 このグリッドでは、データの選択、編集、ソート、グループ化、フィルタ処理、およびページングが可能です。 さらに、この多用途のFlexGridでは、データの書式を設定したり、階層化データをより簡単に視覚化することができます。 FlexGridにとってパフォーマンスは重要な属性なので、中核となるコントロールは軽量かつ高速なままに保ち、複雑な機能の場合には拡張機能を使用します。
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using Microsoft.AspNetCore.Http.Internal;
using Microsoft.Extensions.Primitives;
using Microsoft.AspNetCore.Http;

namespace MvcExplorer.Controllers
{
    public partial class FlexGridController : Controller
    {
        private readonly ControlOptions _gridDataModel = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"Items",new OptionItem{Values = new List<string> {"5", "50", "500", "5000", "50000", "100000", "500000", "1000000"},CurrentValue = "500"}},
                {"Allow Sorting", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "False"}},
                {"Selection",new OptionItem{Values = new List<string> {"None", "Cell", "CellRange", "Row", "RowRange", "ListBox"},CurrentValue = "Cell"}},
                {"Formatting", new OptionItem {Values = new List<string> {"On", "Off"}, CurrentValue = "Off"}},
                {"Column Visibility",new OptionItem {Values = new List<string> {"Show", "Hide"}, CurrentValue = "Show"}},
                {"Column Resize", new OptionItem {Values = new List<string> {"100", "150"}, CurrentValue = "100"}}
            }
        };

        public ActionResult Index(IFormCollection collection)
        {
            _gridDataModel.LoadPostData(collection);
            ViewBag.DemoOptions = _gridDataModel;
            return View();
        }

        public ActionResult Index_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData)
        {            
            var extraData = requestData.ExtraRequestData
                 .ToDictionary(kvp => kvp.Key, kvp => new StringValues(kvp.Value.ToString()));
            var data = new FormCollection(extraData);
            _gridDataModel.LoadPostData(data);
            var model = Sale.GetData(Convert.ToInt32(_gridDataModel.Options["items"].CurrentValue));
            return this.C1Json(CollectionViewHelper.Read(requestData, model));
        }
    }
}
@using C1.Web.Mvc.Grid
@model IEnumerable<Sale>
@{
    ControlOptions optionsModel = ViewBag.DemoOptions;
    ViewBag.DemoSettings = true;
}

@section Scripts{
<script>
    function collectingQueryData(sender, e) {
        if (e.extraRequestData == null) {
            e.extraRequestData = {};
        }

        @foreach (var menuName in optionsModel.Options.Keys.Select(ControlOptions.ToOptionName))
        {
        <text>
        e.extraRequestData["@(menuName)"] = '@(optionsModel.Options[menuName].CurrentValue)';
        </text>
        }
    }
</script>
}

<c1-flex-grid id="ovFlexGrid" auto-generate-columns="false" class="grid" is-read-only="true" 
              allow-sorting="@Convert.ToBoolean(optionsModel.Options["Allow Sorting"].CurrentValue)" 
              selection-mode="@((SelectionMode)Enum.Parse(typeof(SelectionMode), optionsModel.Options["Selection"].CurrentValue))">
    <c1-flex-grid-column binding="ID" 
                         is-visible="@(string.Compare(optionsModel.Options["Column Visibility"].CurrentValue, "show", true) == 0)"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Start"
                         format="@(optionsModel.Options["Formatting"].CurrentValue == "On" ? "d" : "")"></c1-flex-grid-column>
    <c1-flex-grid-column binding="End"
                         format="@(optionsModel.Options["Formatting"].CurrentValue == "On" ? "HH:mm" : "")"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country"
                         width="@optionsModel.Options["Column Resize"].CurrentValue"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Color"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Active"></c1-flex-grid-column>
    <c1-items-source initial-items-count="100" read-action-url="@Url.Action("Index_Bind")" query-data="collectingQueryData"></c1-items-source>
</c1-flex-grid>

@section Settings{
    @Html.Partial("_OptionsMenu", optionsModel)
}

@section Summary{
    <p>This view shows FlexGrid's basic features.</p>
}

@section Description{
    ASP.NET MVC向けグリッドは、これまでよりも柔軟で強力な新しいバージョンのFlexGridコントロールです。
    このグリッドでは、データの選択、編集、ソート、グループ化、フィルタ処理、およびページングが可能です。 さらに、この多用途のFlexGridでは、データの書式を設定したり、階層化データをより簡単に視覚化することができます。 FlexGridにとってパフォーマンスは重要な属性なので、中核となるコントロールは軽量かつ高速なままに保ち、複雑な機能の場合には拡張機能を使用します。
}