Autocomplete Cells Spreadsheet Demo

Try and edit some cells, after switch pages/refresh broswer. Note you have to exit the cell or hit enter in order for the change to be persisted.

Adding autocomplete behaviour for each cell by using the combobox instead of a textbox.
The comboboxes use remote search and a shared cache for the search results ( by setting the same cache key "m1" )

GridSpreadsheetAutocomplete.aspx

<% 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>
    <% 
        var helperStr = Page.Awe().AjaxRadioList("#Name")
            .Prefix("#Prefix")
            .DataFunc("aweUtils.getEmpty")
            .Svalue("#Value")
            .SyncScript()
            .Combobox(o =>
                o.SearchFunc("aweUtils.osearch", Page.Url().Action("SearchMeals", "Data"), "m1")
                 .UseConVal()
                 .ClearCacheOnLoad(false))
            .ToString();
     %>

    function txt(model, name) {
        var format = <%=DemoUtils.Encode(helperStr) %>;
        var val = model[name];
        if (!val) val = ""; // replace null with ""'
        return format.split("#Name").join(name).split("#Value").join(val).split("#Prefix").join("c" + model.Id);
    }

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

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

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

            var val = input.val();
            if (model[prop] != val) {
                model[prop] = val;
                awe.ajx('<%=Page.Url().Action("Save", "GridSpreadsheetDemo") %>', awe.srl({ id: model.Id, name: prop, value: val }))
                    .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');
                });
            }
        });

        $('#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>

Demos/Grid/GridSpreadsheetDemoController.cs

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);
}

Comments