Features
- Overview
- Collapsible Column Headers
- Styling Records, Groups, and Cells
- Grouping
- Filtering
- Row and Column Freezing
- Paging
- Group Panel
- Remote Data Binding
- Custom Cells
- Custom Editors
- Editing
- Batch Editing
- Sorting
- Virtual Scrolling
- Disable Server Reading
- Data Map
- Excel Export
- PDF Export
- Unobtrusive Validation
Excel Export
Excel Export
The sample demonstrates how to export the contents of MultiRow control to an Microsoft Excel (xlsx) format.
Features
ID
Start
Country
Color
Amount
Amount2
Product: Gadget (53 items)
Country: German (8 items)
1
1/25/2025
German
581.61
-2,939.67
1/25/2025
Gadget
Green
0.14
4
4/25/2025
German
1,248.66
-2,815.93
4/25/2025
Gadget
Red
0.22
5
5/25/2025
German
4,051.76
-3,108.76
5/25/2025
Gadget
Black
0.12
13
1/25/2025
German
-2,446.92
-2,351.67
1/25/2025
Gadget
Red
0.12
28
4/25/2025
German
1,853.66
4,924.12
4/25/2025
Gadget
Green
0.18
31
7/25/2025
German
-165.64
-4,919.21
7/25/2025
Gadget
White
0.04
80
8/25/2025
German
2,342.70
-3,639.94
8/25/2025
Gadget
White
0.05
95
11/25/2025
German
-1,062.14
2,694.52
11/25/2025
Gadget
Green
0.05
Country: Canada (8 items)
2
2/25/2025
Canada
4,919.02
-4,673.75
2/25/2025
Gadget
Green
0.17
6
6/25/2025
Canada
-3,131.28
-4,314.81
6/25/2025
Gadget
Black
0.16
24
12/25/2025
Canada
4,917.55
-4,479.39
12/25/2025
Gadget
Red
0.14
30
6/25/2025
Canada
-3,447.73
3,738.87
6/25/2025
Gadget
Green
0.10
57
9/25/2025
Canada
-1,746.26
-780.98
9/25/2025
Gadget
Black
0.19
64
4/25/2025
Canada
-2,520.97
31.56
4/25/2025
Gadget
Red
0.09
76
4/25/2025
Canada
2,015.45
-1,489.64
4/25/2025
Gadget
White
0.25
93
9/25/2025
Canada
-4,707.05
-1,935.98
9/25/2025
Gadget
Black
0.19
Country: Japan (11 items)
3
3/25/2025
Japan
2,159.73
-3,810.42
3/25/2025
Gadget
Red
0.07
15
3/25/2025
Japan
1,089.32
-4,102.95
3/25/2025
Gadget
Green
0.16
23
11/25/2025
Japan
-4,146.76
853.06
11/25/2025
Gadget
White
0.01
26
2/25/2025
Japan
-4,257.83
-1,652.26
2/25/2025
Gadget
White
0.23
39
3/25/2025
Japan
1,493.10
391.20
3/25/2025
Gadget
Red
0.19
71
11/25/2025
Japan
4,676.20
-2,435.42
11/25/2025
Gadget
Green
0.04
73
1/25/2025
Japan
-4,916.10
-507.49
1/25/2025
Gadget
Red
0.19
77
5/25/2025
Japan
4,585
-2,963
5/25/2025
Gadget
White
0.16
88
4/25/2025
Japan
4,009.94
-3,149.85
4/25/2025
Gadget
White
0.11
89
5/25/2025
Japan
2,323.39
444.47
5/25/2025
Gadget
Red
0.16
99
3/25/2025
Japan
2,920.44
4,808.53
3/25/2025
Gadget
White
0
Country: Korea (8 items)
9
9/25/2025
Korea
-2,363.16
3,425.60
9/25/2025
Gadget
Black
0.14
25
1/25/2025
Korea
3,824.28
2,007.51
1/25/2025
Gadget
Black
0.08
35
11/25/2025
Korea
-4,563.28
1,361.51
11/25/2025
Gadget
Red
0.02
44
8/25/2025
Korea
2,170.82
-3,562.14
8/25/2025
Gadget
Green
0.14
45
9/25/2025
Korea
-3,000.98
-238.75
9/25/2025
Gadget
Red
0.09
54
6/25/2025
Korea
-3,422.65
2,304.34
6/25/2025
Gadget
Green
0.22
65
5/25/2025
Korea
3,017.71
2,732.26
5/25/2025
Gadget
White
0.12
67
7/25/2025
Korea
-3,256.14
-3,342.69
7/25/2025
Gadget
White
0
Country: China (4 items)
16
4/25/2025
China
1,341.85
532.34
4/25/2025
Gadget
Black
0.08
53
5/25/2025
China
-4,266.09
-4,920.97
5/25/2025
Gadget
Red
0.06
55
7/25/2025
China
-185.37
-280.05
7/25/2025
Gadget
Red
0.12
68
8/25/2025
China
4,334.98
-1,274.35
8/25/2025
Gadget
White
0.17
Country: France (3 items)
19
7/25/2025
France
-2,008.99
1,805.09
7/25/2025
Gadget
Green
0.09
20
8/25/2025
France
2,568.01
2,889.37
8/25/2025
Gadget
White
0.03
49
1/25/2025
France
-748.11
1,463.78
1/25/2025
Gadget
Green
0.14
Country: Italy (3 items)
27
3/25/2025
Italy
1,095.08
1,413.34
3/25/2025
Gadget
Black
0.20
51
3/25/2025
Italy
4,420.76
-4,654.08
3/25/2025
Gadget
White
0.01
90
6/25/2025
Italy
-1,227.88
1,787.36
6/25/2025
Gadget
Green
0.12
Country: US (6 items)
37
1/25/2025
US
544.13
-4,548.24
1/25/2025
Gadget
Red
0.10
46
10/25/2025
US
3,374.49
-4,629.37
10/25/2025
Gadget
Red
0.23
62
2/25/2025
US
4,568.40
2,813.06
2/25/2025
Gadget
White
0.21
82
10/25/2025
US
2,869.30
3,725.41
10/25/2025
Gadget
Green
0.12
83
11/25/2025
US
-2,190.02
-2,736.44
11/25/2025
Gadget
Black
0.18
97
1/25/2025
US
2,518.17
1,421.02
1/25/2025
Gadget
White
0.19
Country: UK (2 items)
41
5/25/2025
UK
-3,175.21
-2,650.41
5/25/2025
Gadget
Black
0.18
81
9/25/2025
UK
4,479.22
-842.31
9/25/2025
Gadget
Red
0.21
Product: Widget (47 items)
Country: China (6 items)
7
7/25/2025
China
698.62
-2,745.97
7/25/2025
Widget
Red
0.15
18
6/25/2025
China
3,232.11
305.20
6/25/2025
Widget
Green
0.24
32
8/25/2025
China
160.62
1,299.66
8/25/2025
Widget
White
0.08
52
4/25/2025
China
-4,161.96
272.81
4/25/2025
Widget
Red
0.07
69
9/25/2025
China
-989.05
-4,651.12
9/25/2025
Widget
Black
0.09
74
2/25/2025
China
-1,940.69
-2,854.91
2/25/2025
Widget
White
0
Country: US (10 items)
8
8/25/2025
US
3,464.15
1,131.58
8/25/2025
Widget
White
0.03
10
10/25/2025
US
-2,836.94
-4,283.10
10/25/2025
Widget
White
0.06
17
5/25/2025
US
3,596.33
623.80
5/25/2025
Widget
Black
0.18
40
4/25/2025
US
-2,838.54
4,241.04
4/25/2025
Widget
Black
0.14
56
8/25/2025
US
-4,675
4,759.93
8/25/2025
Widget
Red
0.09
61
1/25/2025
US
2,042.44
1,010.09
1/25/2025
Widget
Black
0.02
70
10/25/2025
US
2,673.11
-1,656.47
10/25/2025
Widget
Red
0.01
78
6/25/2025
US
1,986.58
606.61
6/25/2025
Widget
Red
0.06
79
7/25/2025
US
-3,469.64
-1,856.72
7/25/2025
Widget
Black
0.25
94
10/25/2025
US
2,301.03
1,134.37
10/25/2025
Widget
Green
0.24
Country: France (5 items)
11
11/25/2025
France
877.93
2,722.02
11/25/2025
Widget
Green
0.08
42
6/25/2025
France
22.88
-2,410.67
6/25/2025
Widget
Black
0.17
85
1/25/2025
France
-1,479.40
3,151.24
1/25/2025
Widget
Red
0.12
96
12/25/2025
France
-587.13
974.87
12/25/2025
Widget
Black
0.04
100
4/25/2025
France
568.63
329.90
4/25/2025
Widget
Green
0.13
Country: Korea (5 items)
12
12/25/2025
Korea
-3,788.14
-3,050.89
12/25/2025
Widget
Red
0.12
33
9/25/2025
Korea
-2,575.30
-1,036.23
9/25/2025
Widget
Red
0.17
43
7/25/2025
Korea
-4,129.88
-3,660.62
7/25/2025
Widget
Black
0.17
63
3/25/2025
Korea
595.84
-369.24
3/25/2025
Widget
White
0.04
66
6/25/2025
Korea
-3,412.10
3,802.04
6/25/2025
Widget
Red
0.22
Country: German (7 items)
14
2/25/2025
German
-4,374.97
-3,899.38
2/25/2025
Widget
Black
0.18
48
12/25/2025
German
-2,077.64
-4,678.39
12/25/2025
Widget
Red
0.06
50
2/25/2025
German
678.23
95.72
2/25/2025
Widget
Red
0.03
58
10/25/2025
German
-3,518.88
-2,779.71
10/25/2025
Widget
Green
0.05
72
12/25/2025
German
-4,427.85
-952.53
12/25/2025
Widget
Black
0.13
75
3/25/2025
German
-862.78
4,355.25
3/25/2025
Widget
White
0.10
91
7/25/2025
German
-456.57
2,388.73
7/25/2025
Widget
White
0.20
Country: UK (2 items)
21
9/25/2025
UK
-3,476.95
4,852.50
9/25/2025
Widget
Black
0.01
22
10/25/2025
UK
2,290.56
3,295.03
10/25/2025
Widget
Red
0.06
Country: Italy (6 items)
29
5/25/2025
Italy
3,708.86
-2,697.08
5/25/2025
Widget
White
0.03
34
10/25/2025
Italy
3,288.12
-2,392.41
10/25/2025
Widget
Red
0.19
60
12/25/2025
Italy
-839.21
1,002.81
12/25/2025
Widget
Red
0.21
84
12/25/2025
Italy
322.50
-3,277.44
12/25/2025
Widget
Black
0.23
86
2/25/2025
Italy
3,689.48
-1,072.41
2/25/2025
Widget
Black
0.10
92
8/25/2025
Italy
-992.57
-1,438.44
8/25/2025
Widget
Black
0.25
Country: Canada (5 items)
36
12/25/2025
Canada
-4,839.71
-1,835.02
12/25/2025
Widget
White
0.19
38
2/25/2025
Canada
538.45
1,848.22
2/25/2025
Widget
Red
0.04
47
11/25/2025
Canada
-2,103.52
-4,860.82
11/25/2025
Widget
Green
0.23
59
11/25/2025
Canada
-228.15
3,505.17
11/25/2025
Widget
Red
0.20
87
3/25/2025
Canada
-1,241.87
2,966.15
3/25/2025
Widget
Green
0.24
Country: Japan (1 items)
98
2/25/2025
Japan
4,900.51
3,229.92
2/25/2025
Widget
Red
0.16
ID
Start
Country
Amount
Amount2
Active
End
Product
Color
Discount
Settings
Description
The sample demonstrates how to export the contents of MultiRow control to an Microsoft Excel (xlsx) format.
To export MultiRow contents, pass the MultiRow instance to the FlexGridXlsxConverter.save method. This generates xlsx file content, which can be saved to a local file or sent to a server.
Note: You should add a jszip.js library to your application. Its CDN link is: http://cdnjs.cloudflare.com/ajax/libs/jszip/2.2.1/jszip.min.js
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 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | using C1.Web.Mvc.Fluent; using C1.Web.Mvc.Grid; using C1.Web.Mvc.MultiRow; using C1.Web.Mvc.MultiRow.Fluent; using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace MultiRowExplorer.Models { public class LayoutDefinitionsBuilders { public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> OneLine { get { return ld => { ld.Add().Colspan(15).Cells(cells => { cells.Add(cell => cell.Binding( "Id" ).Header( "ID" ).CssClass( "id" )) .Add(cell => cell.Binding( "Date" ).Header( "Ordered" )) .Add(cell => cell.Binding( "ShippedDate" ).Header( "Shipped" )) .Add(cell => cell.Binding( "Amount" ).Header( "Amount" ).Format( "c" ).CssClass( "amount" )) .Add(cell => cell.Binding( "Customer.Name" ).Name( "CustomerName" ).Header( "Customer" )) .Add(cell => cell.Binding( "Customer.Address" ).Name( "CustomerAddress" ).Header( "Address" )) .Add(cell => cell.Binding( "Customer.City" ).Name( "CustomerCity" ).Header( "City" ) .DataMap(dm => { dm.DisplayMemberPath( "Value" ).SelectedValuePath( "Value" ).Bind(Orders.GetCities().ToValues()); })) .Add(cell => cell.Binding( "Customer.State" ).Name( "CustomerState" ).Header( "State" )) .Add(cell => cell.Binding( "Customer.Zip" ).Name( "CustomerZip" ).Header( "Zip" )) .Add(cell => cell.Binding( "Customer.Email" ).Name( "CustomerEmail" ).Header( "Customer Email" ).CssClass( "email" )) .Add(cell => cell.Binding( "Customer.Phone" ).Name( "Customerphone" ).Header( "Customer Phone" )) .Add(cell => cell.Binding( "Shipper.Name" ).Name( "ShipperName" ).Header( "Shipper" )) .Add(cell => cell.Binding( "Shipper.Email" ).Name( "ShipperEmail" ).Header( "Shipper Email" ).CssClass( "email" )) .Add(cell => cell.Binding( "Shipper.Phone" ).Name( "ShipperPhone" ).Header( "Shipper Phone" )) .Add(cell => cell.Binding( "Shipper.Express" ).Name( "ShipperExpress" ).Header( "Express" )); }); }; } } public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> TwoLines { get { return ld => { ld.Add().Header( "Order" ).Colspan(2).Cells(cells => { cells.Add(cell => cell.Binding( "Id" ).Header( "ID" ).CssClass( "id" ).Width( "150" )) .Add(cell => cell.Binding( "Date" ).Header( "Ordered" ).Width( "150" )) .Add(cell => cell.Binding( "Amount" ).Header( "Amount" ).Format( "c" ).CssClass( "amount" )) .Add(cell => cell.Binding( "ShippedDate" ).Header( "Shipped" )); }); ld.Add().Header( "Customer" ).Colspan(3).Cells(cells => { cells.Add(cell => cell.Binding( "Customer.Name" ).Name( "CustomerName" ).Header( "Customer" ).Width( "200" )) .Add(cell => cell.Binding( "Customer.Email" ).Name( "CustomerEmail" ).Header( "Customer Email" ).Colspan(2).CssClass( "email" )) .Add(cell => cell.Binding( "Customer.Address" ).Name( "CustomerAddress" ).Header( "Address" )) .Add(cell => cell.Binding( "Customer.City" ).Name( "CustomerCity" ).Header( "City" ).ShowDropDown( true ) .DataMap(dm => { dm.DisplayMemberPath( "Value" ).SelectedValuePath( "Value" ).Bind(Orders.GetCities().ToValues()); })) .Add(cell => cell.Binding( "Customer.State" ).Name( "CustomerState" ).Header( "State" )); }); ld.Add().Header( "Shipper" ).Colspan(2).Cells(cells => { cells.Add(cell => cell.Binding( "Shipper.Name" ).Name( "ShipperName" ).Header( "Shipper" ).Colspan(2)) .Add(cell => cell.Binding( "Shipper.Email" ).Name( "ShipperEmail" ).Header( "Shipper Email" ).Width( "200" ).CssClass( "email" )) .Add(cell => cell.Binding( "Shipper.Express" ).Name( "ShipperExpress" ).Header( "Express" )); }); }; } } public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> ThreeLines { get { return ld => { ld.Add().Header( "Order" ).Colspan(2).Cells(cells => { cells.Add(cell => cell.Binding( "Id" ).Header( "ID" ).Colspan(2).CssClass( "id" )) .Add(cell => cell.Binding( "Amount" ).Header( "Amount" ).Format( "c" ).Colspan(2).CssClass( "amount" )) .Add(cell => cell.Binding( "Date" ).Header( "Ordered" )) .Add(cell => cell.Binding( "ShippedDate" ).Header( "Shipped" )); }); ld.Add().Header( "Customer" ).Colspan(3).Cells(cells => { cells.Add(cell => cell.Binding( "Customer.Name" ).Name( "CustomerName" ).Header( "Customer" )) .Add(cell => cell.Binding( "Customer.Email" ).Name( "CustomerEmail" ).Header( "Customer Email" ).Colspan(2).CssClass( "email" )) .Add(cell => cell.Binding( "Customer.Address" ).Name( "CustomerAddress" ).Header( "Address" ).Colspan(2)) .Add(cell => cell.Binding( "Customer.Phone" ).Name( "CustomerPhone" ).Header( "Phone" )) .Add(cell => cell.Binding( "Customer.City" ).Name( "CustomerCity" ).Header( "City" ) .DataMap(dm => { dm.DisplayMemberPath( "Value" ).SelectedValuePath( "Value" ).Bind(Orders.GetCities().ToValues()); })) .Add(cell => cell.Binding( "Customer.State" ).Name( "CustomerState" ).Header( "State" )) .Add(cell => cell.Binding( "Customer.Zip" ).Name( "CustomerZip" ).Header( "Zip" )); }); ld.Add().Header( "Shipper" ).Cells(cells => { cells.Add(cell => cell.Binding( "Shipper.Name" ).Name( "ShipperName" ).Header( "Shipper" ).Width( "*" )) .Add(cell => cell.Binding( "Shipper.Email" ).Name( "ShipperEmail" ).Header( "Shipper Email" ).CssClass( "email" )) .Add(cell => cell.Binding( "Shipper.Express" ).Name( "ShipperExpress" ).Header( "Express" )); }); }; } } public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> Sales { get { return ld => { ld.Add().Cells(cells => { cells.Add(cell => cell.Binding( "ID" ).Header( "ID" )); cells.Add(cell => cell.Binding( "Active" ).Header( "Active" )); }); ld.Add().Cells(cells => { cells.Add(cell => cell.Binding( "Start" ).Header( "Start" )); cells.Add(cell => cell.Binding( "End" ).Header( "End" )); }); ld.Add().Colspan(2).Cells(cells => { cells.Add(cell => cell.Binding( "Country" ).Header( "Country" ).Colspan(2)); cells.Add(cell => cell.Binding( "Product" ).Header( "Product" )); cells.Add(cell => cell.Binding( "Color" ).Header( "Color" )); }); ld.Add().Colspan(2).Cells(cells => { cells.Add(cell => cell.Binding( "Amount" ).Header( "Amount" )); cells.Add(cell => cell.Binding( "Amount2" ).Header( "Amount2" )); cells.Add(cell => cell.Binding( "Discount" ).Header( "Discount" ).Colspan(2)); }); }; } } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | using MultiRowExplorer.Models; using System; using System.Collections.Generic; using System.Linq; using System.Web.Mvc; namespace MultiRowExplorer.Controllers { public partial class MultiRowController : Controller { public ActionResult ExcelExport() { return View(Sale.GetData(100)); } } } |
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 | @model IEnumerable< Sale > @ { ViewBag.DemoSettings = true ; } @section Styles{ < style > .checkbox-div { padding-left: 15px; display: inline-block; vertical-align: middle; } .checkbox-div .checkbox { display: inline-block; vertical-align: middle; } </ style > } @section Scripts{ <script> var multiRow, colHeaderCheckBox; c1.documentReady( function () { multiRow = wijmo.Control.getControl( "#excelExportMultiRow" ); colHeaderCheckBox = document.getElementById( "colHeaderCheckBox" ); }); function exportXlsx() { if (multiRow) { wijmo.grid.xlsx.FlexGridXlsxConverter.save(multiRow, { includeCellStyles: false , includeColumnHeaders: true }, 'MultiRow.xlsx' ); } } </script> } @ (Html.C1().MultiRow< Sale >().Id( "excelExportMultiRow" ) .Bind(Model) .ShowGroups( true ) .GroupBy( "Product" , "Country" ) .IsReadOnly( true ) .CssClass( "multirow" ) .LayoutDefinition(LayoutDefinitionsBuilders.Sales) ) @section Settings{ < div class = "col-md-12 col-xs-12" > < div class = "form-inline well well-lg" > < a download = "MultiRow.xlsx" class = "btn btn-default" id = "exportBtn" onclick = "exportXlsx();" >Export</ a > </ div > </ div > } @section Description{ < p > The sample demonstrates how to export the contents of < b >MultiRow</ b > control to an Microsoft Excel (xlsx) format. </ p > < p > To export < b >MultiRow</ b > contents, pass the < b >MultiRow</ b > instance to the < b >FlexGridXlsxConverter.save</ b > method. This generates xlsx file content, which can be saved to a local file or sent to a server. </ p > < p > < b >Note:</ b > You should add a < b >jszip.js</ b > library to your application. Its CDN link is : < a href = "http://cdnjs.cloudflare.com/ajax/libs/jszip/2.2.1/jszip.min.js" >http://cdnjs.cloudflare.com/ajax/libs/jszip/2.2.1/jszip.min.js</ a > </ p > } |