Grid Spreadsheet Demo

<% Spreadsheet.Grid()
    .Groupable(false)
    .Sortable(false)
    .Url(Page.Url().Action("GridGetItems", "GridSpreadsheetDemo"))
    .CssClass("spreadsh")
    .Columns(
        new Column { Bind = "Name", ClientFormatFunc = "txt" },
        new Column { Bind = "Location", ClientFormatFunc = "txt" },
        new Column { Bind = "Meal", ClientFormatFunc = "txt" }); %>
<awe:Ocon runat="server" ID="Spreadsheet" />
<textarea id="log" class="log"></textarea>
<script>
    function txt(model, name) {
        var val = model[name];
        if (!val) val = ""; // replace null with ""
        return "<input type='text' name='" + name + "' value='" + awef.encode(val) + "'/>";
    }

    $(function () {
        var g = $('#<%=Spreadsheet.ClientID %>');
        var api = g.data('api');
        function add() {
            var xhr = api.load({ oparams: { page: 1 } }); // first go to page 1

            $.when(xhr).done(function () {
                var row = $(api.renderRow({ Id: 0 }));
                g.find('.awe-row:first').before(row); // insert the row
                row.find('input:first').focus();
            });
        }

        g.on('change', 'input', function () {
            var input = $(this);
            var model = aweUtils.model(input.closest('.awe-row'));
            var prop = input.attr("name");
            model[prop] = input.val();

            awe.ajx('<%=Page.Url().Action("Save", "GridSpreadsheetDemo") %>', awe.srl({ id: model.Id, name: prop, value: model[prop] }))
                .done(function (res) {
                    if (model.Id == 0) {
                        model.Id = res.Id;
                        $('#log').prepend('new record added id = ' + res.Id + ' \n');
                    }

                    $('#log').prepend(model[prop] + ' saved \n');
                }).fail(function (xhr) { awem.notif(xhr.responseText, 0, 'err'); });
        });

        $('#addrow').on('click', add);
    });
</script>

<style>
    .spreadsh .awe-row td {
        background: white;
        padding: 0;
        text-align: center;
    }

    .spreadsh input[type="text"] {
        width: 100%;
        margin: auto;
        border: none;
        padding: .5em .7em;
    }
</style>

public ActionResult GridGetItems(GridParams g)
{
    var query = Db.Spreadsheets.OrderByDescending(o => o.Id).AsQueryable();

    var gmb = new GridModelBuilder<Spreadsheet>(query, g);
    gmb.KeyProp = o => o.Id;

    return this.AweJson(gmb.Build());
}

public ActionResult Add()
{
    return Json(new Spreadsheet());
}

public ActionResult Save(int id, string name, string value)
{
    Spreadsheet row;

    // create
    if (id == 0)
    {
        row = new Spreadsheet();
        Db.Add(row);
    }
    else
    {
        row = Db.Find<Spreadsheet>(id);
    }

    typeof(Spreadsheet).GetProperty(name)?.SetValue(row, value, null);



    return Json(row);
}

<div class="bar">
    <button type="button" class="awe-btn" id="btnArrAddRow">add row</button>
    <button type="button" class="awe-btn" onclick="awe.oc('addCol')">add column</button>
</div>
<% 
    var gridId = SpreadArrGrid.ClientID;
%>
<% SpreadArrGrid.Grid()
      .Mod(o => o.ColumnsSelector())
      .Url(Page.Url().Action("MultiColGrid", "GridSpreadsheetDemo"))
      .CssClass("spreadsh")
      .SendColumns(true); %>
<awe:Ocon runat="server" ID="SpreadArrGrid" />

<%=Page.Awe().InitCall("addCol").Url(Page.Url().Action("AddColumn", "GridSpreadsheetDemo")).Success("aweUtils.refreshGrid('"+ gridId + "')") %>

<script>
    function txtVal(i) {
        return function (model, name) {
            var val = model.Values[i];
            if (!val) val = ""; //replace null with ""
            return "<input type='text' name='" + name + "' value='" + awef.encode(val) + "'/>";
        };
    }

    $(function () {
        var g = $('#<%=gridId %>');

        $('#btnArrAddRow').click(function () {
            var row = $(g.data('api').renderRow({ Id: 0, Values: [] }));
            g.find('.awe-row:last').after(row); // insert the row
            g.data('o').lrso = 1; // flag last result not matching the rendered rows
            row.find('input:first').focus();
        });

        g.find('.awe-content').on('change', 'input', function () {
            var model = aweUtils.model($(this).closest('.awe-row'));
            var col = parseInt($(this).attr("name"));
            var val = $(this).val();
            model.Values[col] = val;

            awe.ajx('<%=Page.Url().Action("SaveArr", "GridSpreadsheetDemo") %>', awe.srl({ id: model.Id, col: col, value: val }))
                .done(function (res) {
                    if (!model.Values[0]) {
                        model.Id = res.Id;
                        $('#log').prepend('new record added id = ' + res.Id + ' \n');
                    }

                    $('#log').prepend(val + ' saved \n');
                }).fail(function (xhr) { awem.notif(xhr.responseText, 0, 'err'); });
        });
    });
</script>

private static IList<List<string>> data = new List<List<string>>{
            new List<string> { "Id", "Name", "Meal" },
            new List<string> { "1", "Vincenzo", "Pizza" },
            new List<string> { "2", "Ella", "French toast" },
            new List<string> { "3", "Zazzles", "Pizza" },
            new List<string> { "4", "Evan", "Banana" }
        };

private static int nextid = 5;

public ActionResult AddColumn()
{
    var header = data.First();
    var name = "col" + header.Count;
    header.Add(name);

    for (var i = 1; i < data.Count; i++)
    {
        data[i].Add(string.Empty);
    }

    return Json(new { });
}

public ActionResult SaveArr(int id, int col, string value)
{
    if (id == 0)
    {
        id = nextid;
        nextid++;

        var newRow = new List<string> { id.ToString() };
        for (var i = 1; i < data.Last().Count; i++)
        {
            newRow.Add(i == col ? value : string.Empty);
        }

        data.Add(newRow);
        return Json(new { Id = id });
    }

    var exRow = data.SingleOrDefault(o => o[0] == id.ToString());

    if (exRow == null) throw new Exception("edited row doesn't exist anymore");

    exRow[col] = value;
    return Json(new { Id = id });
}

public ActionResult MultiColGrid(GridParams g)
{
    Check.NotNull(g.Columns, "g.Columns");

    g.Paging = false;

    var items = new List<GridArrayRow>();
    for (var i = 1; i < data.Count; i++)
    {
        items.Add(new GridArrayRow { Id = data[i][0], Values = data[i].ToArray() });
    }

    // reinit columns at start or when new column has been added
    if (g.Columns.Length == 0 || g.Columns.Length != data[0].Count - 1)
    {
        var columns = new List<Column>();

        for (var i = 1; i < data[0].Count; i++)
        {
            columns.Add(new Column { Header = data[0][i], Bind = i.ToString(), ClientFormatFunc = "txtVal(" + i + ")", Resizable = true });
        }

        g.Columns = columns.ToArray();
    }

    var model = new GridModelBuilder<GridArrayRow>(items.AsQueryable(), g) {
        Map = o => o
    }
    .Build();

    return Json(model);
}