Autocomplete Cells Spreadsheet Grid

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" )

GridSpreadsheetDemo/Autocomplete.cshtml

@(Html.Awe().Grid("Spreadsheet")
    .Groupable(false)
    .Sortable(false)
    .Url(Url.Action("GridGetItems"))
    .CssClass("spreadsh")
    .Columns(
        new Column { Bind = "Name", ClientFormatFunc = "txt" },
        new Column { Bind = "Location", ClientFormatFunc = "txt" },
        new Column { Bind = "Meal", ClientFormatFunc = "txt" }))

<textarea id="log" class="log"></textarea>
<script>
    @{
        var helperStr = Html.Awe().Combobox(new ComboboxOpt
            {
                Name = "#Name",
                Prefix = "#Prefix",
                Svalue = "#Value",
                DataFunc = "aweUtils.getEmpty",
                SyncScript = true,
                UseContentValue = true                
            }
        .RemoteSearch(Url.Action("SearchMeals", "Data"), "m1")
        ).ToString();
    }

    function txt(model, name) {
        var format = @Html.Raw(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');
        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').trigger('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('@(Url.Action("Save"))', 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 async Task<IActionResult> GridGetItems(GridParams g)
{
    var query = mcx.Spreadsheets.OrderByDescending(o => o.Id);

    var gmb = new GridModelBuilder<Spreadsheet>(query, g);

    return Json(await gmb.EFBuildAsync());
}

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

public async Task<IActionResult> Save(int id, string name, string value)
{
    Spreadsheet row;
    
    // create
    if (id == 0)
    {
        row = new Spreadsheet();
        mcx.Add(row);
    }
    else
    {
        row = await mcx.FindAsync<Spreadsheet>(id);
    }

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

    await mcx.SaveChangesAsync();

    return Json(row);
}

Comments