CSV Export

Similar to Excel export, FlexGrid can be exported to CSV formats. To export FlexGrid, use the following code.

<button id="export-csv">CSV</button>
<c1-flex-grid id="grid">
    <c1-items-source source-collection="Model"></c1-items-source>
</c1-flex-grid>
<script>
    //function for converting CSV string into a downloadable file
    function exportFile(csv, fileName) {
        var fileType = 'txt/csv;charset=utf-8';
        if (navigator.msSaveBlob) { // IE
            navigator.msSaveBlob(new Blob([csv], {
                type: fileType
            }), fileName);
        }
        else {
            var e = document.createElement('a');
            e.setAttribute('href', 'data:' + fileType + ',' + encodeURIComponent(csv));
            e.setAttribute('download', fileName);
            e.style.display = 'none';
            document.body.appendChild(e);
            e.click();
            document.body.removeChild(e);
        }
    }
    //export grid to CSV
    document.getElementById("export-csv").addEventListener("click", function () {
        var grid = wijmo.Control.getControl("#grid");
        var rng = new wijmo.grid.CellRange(0, 0, grid.rows.length - 1, grid.columns.length - 1),
            csv = grid.getClipString(rng, true, true);
        exportFile(csv, 'FlexGrid.csv');
    });
</script>

public IActionResult Index()
{
    return View(ProductSales.GetData());
}

The following code demonstrates a class, ProductSales, which serves as a datasource for the grid created above.

public class ProductSales
{
    public int Id { get; set; }
    public string Category { get; set; }
    public string SubCategory { get; set; }
    public string Product { get; set; }
    public double Sales { get; set; }
    public static List<ProductSales> GetData()
    {
        var categories = new string[]
        {
        "Electronics",
        "Computers & Tablets"
        };
        var subCategories = new string[][]
        {
        new string[] { "Camera", "Headphones", "Cell Phones" },
        new string[] { "Desktops", "Laptops", "Tablets" }
        };
        var products = new string[][][]
        {
        new string[][]
        {
            new string[] { "Digital", "Film", "Lenses", "Video", "Accessories" },
            new string[] { "Earbud", "Over-ear", "On-ear", "Bluetooth", "Noise-cancelling", "Audiophile headphones" },
            new string[] { "Cell Phones", "Accessories" }
        },
        new string[][]
        {
            new string[] { "All-in-ones", "Minis", "Towers" },
            new string[] { "2 in 1", "Traditional" },
            new string[] { "iOS", "Android", "Windows" }
        }
        };
        var data = new List<ProductSales>();
        var random = new Random();
        for (int i = 0; i < categories.Length; i++)
        {
            for (int j = 0; j < subCategories[i].Length; j++)
            {
                for (int k = 0; k < products[i][j].Length; k++)
                {
                    data.Add(new ProductSales
                    {
                        Id = i + j + k,
                        Category = categories[i],
                        SubCategory = subCategories[i][j],
                        Product = products[i][j][k],
                        Sales = random.NextDouble() * 100
                    });
                }
            }
        }
        return data;
    }
}