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
App_Data
C1NWind.mdf
17,825,792
C1NWind_log.ldf
2,883,584
App_GlobalResources
Barcode.designer.cs
2,882
Barcode.ja.designer.cs
0
Barcode.ja.resx
25,081
Barcode.resx
18,393
DataEngine.designer.cs
2,891
DataEngine.ja.designer.cs
0
DataEngine.ja.resx
43,145
DataEngine.resx
28,715
Excel.designer.cs
2,876
Excel.ja.designer.cs
0
Excel.ja.resx
55,409
Excel.resx
40,229
Home.designer.cs
2,873

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
22
23
24
25
26
27
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.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 ActionResult TreeView()
        {
            ViewBag.Options = _flexGridTreeViewModel;
            var list = Folder.Create(Server.MapPath("~")).Children;
            return View(list);
        }
 
    }
}
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
@using WebApiExplorer.Models
@using C1.Web.Mvc.Grid
@model IEnumerable<ITreeItem>
@{
    GridExportImportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}
 
<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(Resources.MVCFlexGrid.TreeView_Text1)</label>
 
@(Html.C1().FlexGrid().Id(optionsModel.ControlId).CssClass("custom-flex-grid").Width(500)
    .Bind(Model)
    .ChildItemsPath("Children")
    .IsReadOnly(true)
    .AutoGenerateColumns(false)
    .Columns(columns =>
    {
        columns.Add().Binding("Header").Width("*");
        columns.Add().Binding("Size").Width("80").Align("center");
    })
    .AllowResizing(AllowResizing.None)
    .HeadersVisibility(HeadersVisibility.None)
    .SelectionMode(SelectionMode.ListBox)
)
 
@section Settings{
    @Html.Partial("_FlexGridOptions", optionsModel)
}
 
<script>
    c1.documentReady(function () {
        wijmo.Control.getControl("#@optionsModel.ControlId").rows.defaultSize = 25;
    });
</script>
 
@section Description {
    @Html.Raw(Resources.MVCFlexGrid.TreeView_Text0)
}