mescius
ComponentOne Web API Explorer ComponentOne ASP.NET Web API Explorer
MVCFlexGrid

Tree View

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
ja
WebApiExplorer.resources.dll
152,576
runtimes
alpine-x64
native
libe_sqlite3.so
1,134,320
linux-arm
native
libe_sqlite3.so
768,648
linux-arm64
native
libe_sqlite3.so
1,063,280
linux-armel
native
libe_sqlite3.so
1,088,368
linux-mips64

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{
    @await Html.PartialAsync("_FlexGridOptions", optionsModel)
}
  
<script>
    c1.documentReady(function () {
        wijmo.Control.getControl("#@optionsModel.ControlId").rows.defaultSize = 25;
    });
</script>
  
@section Description {
    @Html.Raw(MVCFlexGrid.TreeView_Text0)
}