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 System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { // GET: ExcelImportExportDirection public ActionResult ExcelImportExportRTL() { return View(Sale.GetData(500)); } } }
ExcelImportExportRTL.cshtml
@using C1.Web.Mvc.Grid @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"); isRTLCheckBox = document.getElementById("isRTLCheckBox"); importFile = document.getElementById("importFile"); }); function importGrid() { if (grid) { var isIncludeColumnHeaders = colHeaderCheckBox.checked; 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"> @(Html.C1().FlexGrid<Sale>().Id("importExportFlexGrid") .Bind(Model) .ShowGroups(true) .GroupBy("Product", "Country", "Amount") .IsReadOnly(true) .CssClass("grid") .AutoGenerateColumns(false) .Columns(bl => { bl.Add(cb => cb.Binding("ID")); bl.Add(cb => cb.Binding("Start").Header("Start Date").Format("d")); bl.Add(cb => cb.Binding("End").Header("End Date").Format("d")); bl.Add(cb => cb.Binding("Country")); bl.Add(cb => cb.Binding("Product")); bl.Add(cb => cb.Binding("Color")); bl.Add(cb => cb.Binding("Amount").Format("c").Aggregate(Aggregate.Sum)); bl.Add(cb => cb.Binding("Amount2").Header("Pending").Format("c2").Aggregate(Aggregate.Sum)); bl.Add(cb => cb.Binding("Discount").Format("p1").Aggregate(Aggregate.Avg)); bl.Add(cb => cb.Binding("Active")); }) ) </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(Resources.FlexGrid.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(Resources.FlexGrid.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(Resources.FlexGrid.ExcelImportExport_Export)</a> </div> </div> <div class="checkbox-div "> <label> <input type="checkbox" id="colHeaderCheckBox" class="checkbox" checked="checked" /> @Html.Raw(Resources.FlexGrid.ExcelImportExport_IncludeColumnHeaders) </label> </div> } @section Description{ <p>@Html.Raw(Resources.FlexGrid.ExcelImportExport_RTL_Text0)</p> <p>@Html.Raw(Resources.FlexGrid.ExcelImportExport_RTL_Text1)</p> }
Documentation