ComponentOne ASP.NET MVC Controls
JSON Loading and Saving on Client-side
Working with Controls > FlexSheet > Work with FlexSheet > JSON Loading and Saving on Client-side

FlexSheet supports Json loading and saving on the client side. You can easily load data from a json string in FlexSheet control, and even save the FlexSheet data in Json string. The control uses Workbook object model to accomplish this.

The below code examples demonstrate how to use workbook object model to load Json string into FlexSheet control.

In Code

JsonLoadController.cs 

C#
Copy Code
public class JsonLoadController : Controller
{
    public static List<Sale> SALES = Sale.GetData(15).ToList();
    // GET: Json
    public ActionResult JsonIndex()
    {
        return View(SALES);
    }
}


JsonLoading.cshtml

Razor
Copy Code
<script>
    var flex, jsonString;
    c1.mvc.Utils.documentReady(function () {
        flex = wijmo.Control.getControl('#jsonLoadSheet');
    });

    function SaveToJson() {
        var workBook = flex.saveToWorkbookOM();
        jsonString = JSON.stringify(workBook);

    }

    function loadJSON() {
        var workBook = JSON.parse(jsonString);
        flex.loadFromWorkbookOM(workBook);
    }
</script>

<div>
    <button class="btn btn-default" onclick="SaveToJson()">Save to Json</button>
    <button class="btn btn-default" onclick="loadJSON()">Load Json</button>
    <br /><br />
    @(Html.C1().FlexSheet().Id("jsonLoadSheet").CssClass("flexSheet").Width(700).Height(700)
        .AddBoundSheet(sheet =>
            sheet.Bind(cv =>
                            cv.Bind(Model).DisableServerRead(true)))
    )
</div>

Back to Top

See Also

wijmo.grid.sheet

Reference