ComponentOne
Web API Explorer ASP.NET Web API Explorer
MVCFlexGrid

MVCFlexGrid

Grouping

This sample demonstrates how to export a grouping mvc flexgrid to excel file.

Features

Overview
Paging
Virtual Scrolling
Grouping
Filtering
Frozen Cells
Remote Data Bind
Tree View
Disable Server Reading
Conditional Styling
Id
Ship Country
Ship City
Shipped Date
Ship Address
Freight
loading...

Settings


Export
Export Name :

Description

This sample demonstrates how to export a grouping mvc flexgrid to excel file.

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
using System.Collections.Generic;
using System.Linq;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using Microsoft.AspNetCore.Mvc;
using WebApiExplorer.Models;
  
namespace WebApiExplorer.Controllers
{
    public partial class MVCFlexGridController : Controller
    {
        private readonly GridExportImportOptions _flexGridGroupModel = new GridExportImportOptions
        {
            NeedExport = true,
            NeedImport = false,
            OnlyCurrentPage = false,
            IncludeColumnHeaders = true
        };
  
        public IActionResult Grouping()
        {
            ViewBag.DemoSettingsModel = new ClientSettingsModel
            {
                Settings = new Dictionary<string, object[]>
                {
                    {"GroupBy", new object[]{"ShipCountry", "ShipCity", "ShipCountry and ShipCity", "Freight", "ShippedDate","None"}}
                }
            };
            ViewBag.Options = _flexGridGroupModel;
            return View();
        }
  
        public IActionResult Grouping_Bind([C1JsonRequest] CollectionViewRequest<Order> requestData)
        {
            return this.C1Json(CollectionViewHelper.Read(requestData, _db.Orders.ToList()));
        }
    }
}
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
@{
    GridExportImportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
    var controlId = (ViewBag.DemoSettingsModel as ClientSettingsModel).ControlId;
}
  
<c1-flex-grid id="@controlId" height="350px" is-read-only="true" show-groups="true"
              auto-generate-columns="false" group-by="ShipCountry">
    <c1-items-source read-action-url="@Url.Action("Grouping_Bind")" page-size="50"></c1-items-source>
    <c1-flex-grid-column binding="OrderID" header="Id"></c1-flex-grid-column>
    <c1-flex-grid-column binding="ShipCountry" header="Ship Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="ShipCity" header="Ship City"></c1-flex-grid-column>
    <c1-flex-grid-column binding="ShippedDate" header="Shipped Date"></c1-flex-grid-column>
    <c1-flex-grid-column binding="ShipAddress" header="Ship Address" width="*"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Freight" header="Freight" format="c2" aggregate="Sum"></c1-flex-grid-column>
</c1-flex-grid>
  
<c1-pager owner="@controlId"></c1-pager>
  
@section Settings{
    <script>
        function customChangeGroupBy(grid, name) {
            var groupDescriptions = grid.collectionView.groupDescriptions;
            grid.beginUpdate();
            groupDescriptions.clear();
  
            if (name.indexOf("ShipCountry") > -1) {
                groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("ShipCountry"));
            }
  
            if (name.indexOf("ShipCity") > -1) {
                groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("ShipCity"));
            }
  
            if (name.indexOf("ShippedDate") > -1) {
                groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("ShippedDate", function (item, prop) {
                    var value = item[prop];
                    if (!value) {
                        return "";
                    } else {
                        return value.getFullYear() + "/" + (value.getMonth() + 1);
                    }
                }));
            }
  
            if (name.indexOf("Freight") > -1) {
                groupDescriptions.push(new wijmo.collections.PropertyGroupDescription("Freight", function (item, prop) {
                    var value = item[prop];
                    if (value <= 50) {
                        return "0 to 50";
                    }
  
                    if (value > 50 && value <= 100) {
                        return "50 to 100";
                    }
  
                    if (value > 100 && value <= 150) {
                        return "100 to 150";
                    }
  
                    return "More than 150";
                }));
            }
  
            grid.endUpdate();
        }
    </script>
    @Html.Partial("_FlexGridOptions", optionsModel)
}
  
@section Description{
    <p>@Html.Raw(MVCFlexGrid.Grouping_Text0)</p>
}