FlexGrid
FlexGrid
Excel IO RightToLeft
The sample demonstrates how to change the direction(RTL) of exporting or importing FlexGrid content to/from an Excel xlsx file.
HTML accommodates RTL with the 'dir' attribute.
Features
ID
Start Date
End Date
Country
Product
Color
Amount
Pending
Discount
Active
ID
Start Date
End Date
Country
Product
Color
Amount
Pending
Discount
Active
Product: Gadget (229 items)
$29,144.57
$575,576.23
11.5%
Country: Japan (29 items)
($5,018.49)
$79,054.31
11.0%
Amount: ($1,375.59) (1 items)
($1,375.59)
$4,973.59
8.0%
1
1/25/2025
1/25/2025
Japan
Gadget
Green
($1,375.59)
$4,973.59
8.0%
Amount: ($3,789.61) (1 items)
($3,789.61)
$2,702.96
9.0%
35
11/25/2025
11/25/2025
Japan
Gadget
White
($3,789.61)
$2,702.96
9.0%
Amount: $1,055.34 (1 items)
$1,055.34
$3,350.72
10.0%
53
5/25/2025
5/25/2025
Japan
Gadget
Red
$1,055.34
$3,350.72
10.0%
Amount: ($1,914.36) (1 items)
($1,914.36)
$3,717.47
3.0%
58
10/25/2025
10/25/2025
Japan
Gadget
Red
($1,914.36)
$3,717.47
3.0%
Amount: ($3,763.76) (1 items)
($3,763.76)
$426.00
5.0%
0
Description
The sample demonstrates how to change the direction(RTL) of exporting or importing FlexGrid content to/from an Excel xlsx file.
HTML accommodates RTL with the 'dir' attribute. Setting 'dir' to 'rtl' or 'ltr' on any element causes the element's content to flow from right to left or vice versa. The exported file content will change its direction based on Flexgrid control dir attribute.
1 2 3 4 5 6 7 8 9 10 11 12 | using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { public ActionResult ExcelImportExportRTL() { return View(Models.Sale.GetData(500)); } } } |
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 | @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 src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script><script> var grid, colHeaderCheckBox, importFile; c1.documentReady(function () { grid = wijmo.Control.getControl("#importExportFlexGrid"); gridContainer = document.getElementById("gridContainer"); colHeaderCheckBox = document.getElementById("colHeaderCheckBox"); importFile = document.getElementById("importFile"); isRTLCheckBox = document.getElementById("isRTLCheckBox"); }); function importGrid() { if (grid) { var isIncludeColumnHeaders = colHeaderCheckBox.checked; if (importFile.files[0]) { wijmo.grid.xlsx.FlexGridXlsxConverter.load(grid, importFile.files[0], { includeColumnHeaders: isIncludeColumnHeaders }); } } } function exportGrid() { if (grid) { var isIncludeColumnHeaders = colHeaderCheckBox.checked; wijmo.grid.xlsx.FlexGridXlsxConverter.save(grid, { includeStyles: false, includeColumnHeaders: isIncludeColumnHeaders }, 'FlexGrid.xlsx'); } } function updateImportButtonState() { var file = document.getElementById('importFile').value; document.getElementById('importBtn').disabled = !file; } function setRTL() { if (isRTLCheckBox.checked) { gridContainer.dir = "rtl"; grid.refresh(); } else { gridContainer.dir = "ltr"; grid.refresh(); } } </script>} <div id="gridContainer"> <c1-flex-grid id="importExportFlexGrid" show-groups="true" group-by="Product,Country,Amount" is-read-only="true" class="grid" auto-generate-columns="false"> <c1-items-source initial-items-count="500" source-collection="Model"></c1-items-source> <c1-flex-grid-column binding="ID"></c1-flex-grid-column> <c1-flex-grid-column binding="Start" header="Start Date" format="d"></c1-flex-grid-column> <c1-flex-grid-column binding="End" header="End Date" format="d"></c1-flex-grid-column> <c1-flex-grid-column binding="Country"></c1-flex-grid-column> <c1-flex-grid-column binding="Product"></c1-flex-grid-column> <c1-flex-grid-column binding="Color"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount" format="c" aggregate="Sum"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount2" header="Pending" format="c2" aggregate="Sum"></c1-flex-grid-column> <c1-flex-grid-column binding="Discount" format="p1" aggregate="Avg"></c1-flex-grid-column> <c1-flex-grid-column binding="Active"></c1-flex-grid-column> </c1-flex-grid> </div> @section Settings{ <div class="col-md-3 col-xs-12"> <div class="form-inline well well-lg"> <div><input type="checkbox" id="isRTLCheckBox" onclick="setRTL();" /> @Html.Raw(FlexGridRes.ExcelImportExport_RTL_Text2)</div> </div> </div> <div class="col-md-6 col-xs-12"> <div class="form-inline well well-lg"> <button class="btn btn-default" id="importBtn" disabled onclick="importGrid();">@Html.Raw(FlexGridRes.ExcelImportExport_Import)</button> <input type="file" id="importFile" class="form-control" onchange="updateImportButtonState();" /> </div> </div> <div class="col-md-3 col-xs-12"> <div class="form-inline well well-lg"> <a download="FlexGrid.xlsx" class="btn btn-default" id="exportBtn" onclick="exportGrid();">@Html.Raw(FlexGridRes.ExcelImportExport_Export)</a> </div> </div> <div class="checkbox-div"> <label> <input type="checkbox" id="colHeaderCheckBox" class="checkbox" checked="checked" /> @Html.Raw(FlexGridRes.ExcelImportExport_IncludeColumnHeaders) </label> </div> } @section Description{ <p>@Html.Raw(FlexGridRes.ExcelImportExport_RTL_Text0)</p> <p>@Html.Raw(FlexGridRes.ExcelImportExport_RTL_Text1)</p> } |