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" )
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().AjaxRadioList("#Name")
.Prefix("#Prefix")
.DataFunc("utils.getEmpty")
.Svalue("#Value")
.SyncScript()
.Combobox(o =>
o.SearchFunc("utils.osearch", Url.Action("SearchMeals", "Data"), "m1")
.UseConVal()
.ClearCacheOnLoad(false))
.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 row = g.data('api').renderRow({ Id: 0 });
var xhr = g.data('api').load({ oparams: { page: 1 } }); // first go to page 1

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

g.on('change', 'input.awe-val', function() {
var inp = $(this);
var model = inp.closest('.awe-row').data('model');
var prop = inp.attr("name");
var val = inp.val();
if (model[prop] != val) {
model[prop] = val;
$.post('@(Url.Action("Save"))', { id: model.Id, name: prop, value: val }, 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: 5px;
height: 27px;
}
</style>
Demos/Grid/GridSpreadsheetDemoController.cs
public ActionResult GridGetItems(GridParams g)
{
return Json(new GridModelBuilder<Spreadsheet>(Db.Spreadsheets.OrderByDescending(o => o.Id).AsQueryable(), g).Build());
}

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

public ActionResult Save(int id, string name, string value)
{
var row = id == 0 ? Db.Insert(new Spreadsheet()) : Db.Get<Spreadsheet>(id);

// this is an inmemory object with a real Db you would use UPDATE Spreadsheets SET {name}={val} where id={id}
typeof(Spreadsheet).GetProperty(name)?.SetValue(row, value, null);

return Json(row);
}



Comments