Awesome ASP.net Core and MVC Controls

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 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 = utils.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 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

We use cookies to improve your online experience. By accessing this site, you agree to the use of cookies and other technologies to process your personal data (e.g. IP address) to enhance and personalise your experience across our websites. Additionally, third-party companies, may store cookies on your device and use similar technologies to collect and use certain information. For more information, refer to our privacy policy and cookie policy.