FlexGrid
Excel IO RightToLeft
Features
Sample
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.
Source
ExcelImportExportRTLController.cs
using Microsoft.AspNetCore.Mvc; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { public ActionResult ExcelImportExportRTL() { return View(Models.Sale.GetData(500)); } } }
ExcelImportExportRTL.cshtml
@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> }
Documentation