ComponentOne
Web API Explorer ASP.NET Web API Explorer
MVCFlexGrid

MVCFlexGrid

Overview

This sample demonstrates how to export and import a mvc flexgrid.

Features

Overview
Paging
Virtual Scrolling
Grouping
Filtering
Frozen Cells
Remote Data Bind
Tree View
Disable Server Reading
Conditional Styling
ID
Start
End
Country
Product
Color
Amount
Amount2
Discount
Active
loading...

Settings


Export & Import
Export Name :           

Description

This sample demonstrates how to export and import a mvc flexgrid.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.AspNetCore.Http;
using WebApiExplorer.Models;
using C1.Web.Mvc;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Extensions.Primitives;
using C1.Web.Mvc.Serialization;
  
namespace WebApiExplorer.Controllers
{
    public partial class MVCFlexGridController : Controller
    {
        private readonly GridExportImportOptions _flexGridModel = new GridExportImportOptions
        {
            NeedExport = true,
            NeedImport = true,
            IncludeColumnHeaders = true
        };
  
        private readonly ControlOptions _gridDataModel = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"Items",new OptionItem{Values = new List<string> {"5", "50", "500", "5000"},CurrentValue = "500"}},
                {"Allow Sorting", new OptionItem {Values = new List<string> {"None", "SingleColumn","MultiColumn"}, CurrentValue = "None"}},
                {"Selection",new OptionItem{Values = new List<string> {"None", "Cell", "CellRange", "Row", "RowRange", "ListBox","MultiRange"},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", "250"}, CurrentValue = "100"}},
            }
        };
  
        public IActionResult Index(IFormCollection collection)
        {
            _gridDataModel.LoadPostData(collection);
            ViewBag.Options = _flexGridModel;
            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));
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
@using C1.Web.Mvc.Grid
@{
    ControlOptions optionsModel = ViewBag.DemoOptions;
    GridExportImportOptions exportOptionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}
  
<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="@exportOptionsModel.ControlId" auto-generate-columns="false" class="grid" is-read-only="true"
              sorting-type="@((AllowSorting)Enum.Parse(typeof(AllowSorting), 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" ? "MMM d yy" : "")"></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="Discount" format="p0"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Active"></c1-flex-grid-column>
    <c1-items-source initial-items-count="100" disable-server-read="true" read-action-url="@Url.Action("Index_Bind")" query-data="collectingQueryData"></c1-items-source>
</c1-flex-grid>
  
@section Settings{
    @Html.Partial("_OptionsMenu", optionsModel)
    @Html.Partial("_FlexGridOptions", exportOptionsModel)
}
@section Description{
    @Html.Raw(MVCFlexGrid.Index_Text0)
}