Clip String

FlexGrid provides the getClipString method to retrieve the content of a CellRange object as a formatted string. This method is commonly used for:

Clipboard operations, such as handling Ctrl+C
Data export scenarios, such as generating CSV (comma-separated values) content

When getClipString processes cell data, FlexGrid raises the gettingCellClipString event for each cell in the selected range. This event enables applications to inspect, modify, or sanitize cell values before they are added to the output string.

This functionality is particularly useful for preventing CSV injection by sanitizing exported values.

This example demonstrates how to prevent CSV injection during CSV export using the gettingCellClipString event.

Controller

public ActionResult GettingClipString()
{
    return View(Sale.GetData(25));
}

View

@model IEnumerable<Sale>

<c1-flex-grid id="theFlexGrid"
              auto-generate-columns="false"
              getting-cell-clip-string="handleCsvInjection">

    <c1-items-source source-collection="Model"></c1-items-source>

    <c1-flex-grid-column binding="ID"></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="Amount"></c1-flex-grid-column>

</c1-flex-grid>

<button id="exportCsv">Export CSV</button>

@section Scripts{
<script>

    function escapeCSVInjection(content) {

        const dangerousChars = ["=", "+", "-", "@"];

        if (dangerousChars.some(char => content.indexOf(char) === 0)) {
            return "'" + content;
        }

        return content;
    }

    function handleCsvInjection(sender, e) {
        e.data = escapeCSVInjection(e.data);
    }

    document.getElementById("exportCsv").addEventListener("click", function () {

        var grid = wijmo.Control.getControl('#theFlexGrid');

        var rng = new wijmo.grid.CellRange(
            0,
            0,
            grid.rows.length - 1,
            grid.columns.length - 1
        );

        var csv = grid.getClipString(rng, true, true);

        console.log(csv);
    });

</script>
}