Autocomplete any item in a grid spreadsheet

Title:

BI{code} ?

I know there is a solution to autocomplete for inline editing in a grid, but this is after clicking the edit button. I have a spreadsheet instead and tried putting the same solution to the spreadsheet and nothing happened. Was there a solution to edit a spreadsheet and it would autocomplete with expected items for that column from a database?

Save Changes Cancel

shershan

asked at 08 Apr 2016

• it can be done, autocomplete does an ajax request every time you type, maybe a combobox with client data would work better, depends how much autocomplete data you have
  at 08 Apr 2016 Omu
• A combobox with client data? Do you have an example of either solution? The data is about a 300 string list.
  at 08 Apr 2016 shershan
• yes, you can see it here: http://demo.aspnetawesome.com/AjaxRadioListDemo#Custom-rendering, the one with value = "hi there", 300 is not too much; think you can use just one combobox and on cell click hide the cell content and show the combobox and set its value
  at 08 Apr 2016 Omu
• So using a combobox for the spreadsheet rather than autocomplete?
  at 08 Apr 2016 shershan
• What would the code be for with the spreadsheet? Currently I'm trying: new Column { Bind = "Name" }.Mod(o => o.Inline(Html.Awe().AjaxRadioList("Name").Combobox().Url(Url.Action("GetItems","MealAutocomplete")).Prefix("#Prefix").Value("#Value").ToString())) This doesn't work.
  at 08 Apr 2016 shershan
• this only works together with the grid inline editing mod, I will try to create a demo for this and get back to you
  at 08 Apr 2016 Omu

Answers

• BI{code} ?

  here's a quick/lazy solution: modify the GridSpreadSheetDemo view like this: var meals = @Html.Raw(Json.Encode(Db.Meals.Select(o => new KeyContent(o.Name, o.Name)))); function txt(model, name) { var format = @Html.Raw(Json.Encode(Html.Awe().AjaxRadioList("#Name").Prefix("#Prefix").Svalue("#Value").DataFunc("utils.getItems(meals)").Combobox().ToString())); 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); } and for this line add ".awe-val" $('#Spreadsheet').on('change', 'input.awe-val' note I used KeyContent(Name, Name) instead of (Id, Name); the combobox will save the id instead of the string name when there's a match, I presumed you need only the name, but it would work with (Id,Name) as well, you can try it; you can also hide the dropdown button with css if you want

  Save Changes Cancel

  

  Omu

  answered at 09 Apr 2016

  • How would you adjust the code to get meals from a controller instead of database (using Url(Url.Action("Function", "Controller")))?
    at 11 Apr 2016 shershan
  • replace Db.Meals with a call to your service/repo/someotherclass
    at 11 Apr 2016 Omu
  • I got it to work for me. Thank you so much!
    at 11 Apr 2016 shershan

please Sign In to leave an answer