ComponentOne
Web API Explorer ASP.NET Web API Explorer
MVCFlexGrid

MVCFlexGrid

Tree View

This sample demonstrates how to export a mvc flexgrid bound with hierarchical data to excel file.

Features

Overview
Paging
Virtual Scrolling
Grouping
Filtering
Frozen Cells
Remote Data Bind
Tree View
Disable Server Reading
Conditional Styling
Header
Size
de
Microsoft.Data.Edm.resources.dll
75,488
Microsoft.Data.OData.resources.dll
292,064
System.Spatial.resources.dll
26,848
es
Microsoft.Data.Edm.resources.dll
74,976
Microsoft.Data.OData.resources.dll
286,944
System.Spatial.resources.dll
26,848
fr
Microsoft.Data.Edm.resources.dll
76,512
Microsoft.Data.OData.resources.dll
300,768
System.Spatial.resources.dll
27,360
it
Microsoft.Data.Edm.resources.dll
74,976
Microsoft.Data.OData.resources.dll
285,408
System.Spatial.resources.dll
26,848
ja

Settings


Export
Export Name :

Description

This sample demonstrates how to export a mvc flexgrid bound with hierarchical data to excel file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
using Microsoft.AspNetCore.Mvc;
using WebApiExplorer.Models;
  
namespace WebApiExplorer.Controllers
{
    public partial class MVCFlexGridController : Controller
    {
        private readonly GridExportImportOptions _flexGridTreeViewModel = new GridExportImportOptions
        {
            NeedExport = true,
            NeedImport = false,
            IncludeColumnHeaders = true
        };
  
        public IActionResult TreeView()
        {
            ViewBag.Options = _flexGridTreeViewModel;
            return View();
        }
    }
}
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
@{
    GridExportImportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
    var list = Folder.Create(Startup.Environment.ContentRootPath).Children;
}
  
@section Styles{
    <style>
        .custom-flex-grid {
            height: 400px;
            background-color: white;
            box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
            margin-bottom: 12px;
        }
  
        .custom-flex-grid .wj-cell {
            background-color: #fff;
            border: none;
            font-size: 10pt;
        }
  
        .custom-flex-grid .wj-state-selected {
            background: #000;
            color: #fff;
        }
  
        .custom-flex-grid .wj-state-multi-selected {
            background: #222;
            color: #fff;
        }
    </style>
}
  
<label>@Html.Raw(MVCFlexGrid.TreeView_Text1)</label>
  
<c1-flex-grid id="@optionsModel.ControlId" class="custom-flex-grid" width="500px"
              child-items-path="Children" is-read-only="true" auto-generate-columns="false"
              allow-resizing="None" headers-visibility="None" selection-mode="ListBox">
    <c1-items-source source-collection="list"></c1-items-source>
    <c1-flex-grid-column binding="Header" width="*"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Size" width="80" align="center"></c1-flex-grid-column>
</c1-flex-grid>
  
  
@section Settings{
    @Html.Partial("_FlexGridOptions", optionsModel)
}
  
<script>
    c1.documentReady(function () {
        wijmo.Control.getControl("#@optionsModel.ControlId").rows.defaultSize = 25;
    });
</script>
  
@section Description {
    @Html.Raw(MVCFlexGrid.TreeView_Text0)
}