ComponentOne
Web API Explorer ASP.NET Web API Explorer
Wijmo5FlexGrid

Wijmo5FlexGrid

Hierarchical Data

This sample demonstrates how to export and import a wijmo5 flexgrid with hierarchicalData to excel file.

Features

Overview
Paging
Grouping
Hierarchical Data
Filtering
Frozen Cells
Conditional Styling
name
length
♫ Adriane Simione
♪ Intelligible Sky
Theories
2:02
Giant Eyes
3:29
Jovian Moons
1:02
Open Minds
2:41
Spacetronic Eyes
3:41
♫ Amy Winehouse
♪ Back to Black
Addicted
1:34
He Can Only Hold Her
2:22
Some Unholy War
2:21
Wake Up Alone
3:43
Tears Dry On Their Own
1:25
♪ Live in Paradiso
You Know That I'm No Good
2:32

Settings


Export
Export Name :

Description

This sample demonstrates how to export and import a wijmo5 flexgrid with hierarchicalData to excel file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
using Microsoft.AspNetCore.Mvc;
using WebApiExplorer.Models;
  
namespace WebApiExplorer.Controllers.Wijmo5FlexGrid
{
    public partial class Wijmo5FlexGridController : Controller
    {
        private readonly GridExportImportOptions _flexGridHierarchicalDataModel = new GridExportImportOptions
        {
            NeedExport = true,
            NeedImport = false,
            IncludeColumnHeaders = true
        };
        public IActionResult HierarchicalData()
        {
            ViewBag.Options = _flexGridHierarchicalDataModel;
            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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
@{
    GridExportImportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}
  
<div id="@(optionsModel.ControlId)" style="height:300px" class="custom-flex-grid"></div>
@section Settings{
    @Html.Partial("_FlexGridOptions", optionsModel)
}
  
<script>
    // create the grid
    var grid = new wijmo.grid.FlexGrid('#@(optionsModel.ControlId)');
  
    // populate the grid and set childItemsPath to show data hierarchically
    grid.childItemsPath = 'items';
  
    // initialize the grid to show hierarchical data
    grid.initialize({
        autoGenerateColumns: false,
        columns: [
            { binding: 'name', width: '*' },
            { binding: 'length', width: 80, align: 'center' }
        ],
        itemsSource: getTreeDate(),                             // hierarchical data
        childItemsPath: 'items',                                // set hierarchy path
        allowResizing: wijmo.grid.AllowResizing.None,           // disable resizing
        headersVisibility: wijmo.grid.HeadersVisibility.None,   // hide headers
        selectionMode: wijmo.grid.SelectionMode.ListBox         // use ListBox selection
    });
  
    // create some hierarchical data
    function getTreeDate() {
        treeData = [
            {
                name: '\u266B Adriane Simione', items: [
                  {
                      name: '\u266A Intelligible Sky', items: [
                        { name: 'Theories', length: '2:02' },
                        { name: 'Giant Eyes', length: '3:29' },
                        { name: 'Jovian Moons', length: '1:02' },
                        { name: 'Open Minds', length: '2:41' },
                        { name: 'Spacetronic Eyes', length: '3:41' }]
                  }
                ]
            },
            {
                name: '\u266B Amy Winehouse', items: [
                  {
                      name: '\u266A Back to Black', items: [
                        { name: 'Addicted', length: '1:34' },
                        { name: 'He Can Only Hold Her', length: '2:22' },
                        { name: 'Some Unholy War', length: '2:21' },
                        { name: 'Wake Up Alone', length: '3:43' },
                        { name: 'Tears Dry On Their Own', length: '1:25' }]
                  },
                  {
                      name: '\u266A Live in Paradiso', items: [
                        { name: "You Know That I'm No Good", length: '2:32' },
                        { name: 'Wake Up Alone', length: '1:04' },
                        { name: 'Valerie', length: '1:22' },
                        { name: 'Tears Dry On Their Own', length: '3:15' },
                        { name: 'Rehab', length: '3:40' }]
                  }]
            },
            {
                name: '\u266B Black Sabbath', items: [
                  {
                      name: '\u266A Heaven and Hell', items: [
                        { name: 'Neon Knights', length: '3:03' },
                        { name: 'Children of the Sea', length: '2:54' },
                        { name: 'Lady Evil', length: '1:43' },
                        { name: 'Heaven and Hell', length: '2:23' },
                        { name: 'Wishing Well', length: '3:22' },
                        { name: 'Die Young', length: '2:21' }]
                  },
                  {
                      name: '\u266A Never Say Die!', items: [
                        { name: 'Swinging The Chain', length: '4:32' },
                        { name: 'Breakout', length: '3:54' },
                        { name: 'Over To You', length: '2:43' },
                        { name: 'Air Dance', length: '1:34' },
                        { name: 'Johnny Blade', length: '1:02' },
                        { name: 'Never Say Die', length: '2:11' }]
                  },
                  {
                      name: '\u266A Paranoid', items: [
                        { name: 'Rat Salad', length: '3:44' },
                        { name: 'Hand Of Doom', length: '4:21' },
                        { name: 'Electric Funeral', length: '2:12' },
                        { name: 'Iron Man', length: '3:22' },
                        { name: 'War Pigs', length: '3:13' }]
                  }]
            },
            {
                name: '\u266B Brand X', items: [
                  {
                      name: '\u266A Unorthodox Behaviour', items: [
                        { name: 'Touch Wood', length: '2:54' },
                        { name: 'Running of Three', length: '1:34' },
                        { name: 'Unorthodox Behaviour', length: '2:23' },
                        { name: 'Smacks of Euphoric Hysteria', length: '3:12' },
                        { name: 'Euthanasia Waltz', length: '2:22' },
                        { name: 'Nuclear Burn', length: '4:01' }]
                  }]
            }
        ];
        return treeData;
    }
</script>
@section Description{
    @Html.Raw(Wijmo5FlexGrid.HierarchicalData_Text0)
}