Ask Question

Control to Select Multiple items and being able to do CRUD while selecting

Stephan

asked at 04 May 2017

try this: http://prodinner.aspnetawesome.com/ click "host a dinner" or edit one and try using the Country Lookup

at 04 May 2017 Omu

Answers

to use CRUD inside MultiLookup, in the main demo code, change the lines in `LookupCrudDemoInput` [UIHint("MultiLookup")] public int[] Dinner { get; set; } add this controller: public class DinnerMultiLookupController : Controller { // used for custom search when .CustomSearch(true) public ActionResult SearchForm() { return PartialView(); } public ActionResult Search(string search, int page, bool isTheadEmpty, int[] selected) { var pageSize = 10; selected = selected ?? new int[] { }; search = (search ?? "").ToLower().Trim(); var list = Db.Dinners.Where(o => o.Name.ToLower().Contains(search) && !selected.Contains(o.Id)) .OrderByDescending(o => o.Id); var result = new AjaxListResult { Content = this.RenderPartialView("ListItems/Dinner", list.Skip((page - 1) * pageSize).Take(pageSize)), More = list.Count() > page * pageSize }; if (isTheadEmpty) result.Thead = this.RenderPartialView("ListItems/DinnerThead"); return Json(result); } public ActionResult GetItems(int[] v) { v = v ?? new int[] {}; return Json(Db.Dinners.Where(o => v.Contains(o.Id)) .Select(o => new KeyContent(o.Id, o.Name))); } public ActionResult Selected(int[] selected, bool isTheadEmpty) { selected = selected ?? new int[] {}; var items = Db.Dinners.Where(o => selected.Contains(o.Id)); var result = new AjaxListResult { Content = this.RenderPartialView("ListItems/Dinner", items), }; if (isTheadEmpty) result.Thead = this.RenderPartialView("ListItems/DinnerThead"); return Json(result); } } in `Shared\ListItems\Dinner.cshtml` add the move button like this: <td><button type="button" class="awe-movebtn awe-btn" ><i class="awe-icon"></i></button> @o.Name </td> rebuild all, and open CrudInLookup page
Omu

answered at 12 May 2017
- The edit isn't working for Countries when editing a dinner. Give it a try ... it only works correctly when creating a dinner.
  
  at 23 May 2017 Stephan
thnx for noticing the problem with the lookup crud functionality; in `SearchForm.cshtml` add this at the top: @{ var id = Guid.NewGuid(); change the `.Success` for the edit popup to this: .Success("utils.lookupEdited('" + id + "')") and add this input <input id='@id' type="hidden" /> in `utils.js` change the lookupEdited function to this: lookupEdited: function (pid) { return function (o) { $('#' + pid).closest('.awe-popup').find('[data-val="' + id(o) + '"]').fadeOut(300, function () { $(this).after(content(o)).remove(); }); }; }, you'll need to do the same for create
Omu

answered at 24 May 2017
- to select an item you need to give it the `awe-selected` class using jquery; the .Success extension expects a function, you're passing the result of a function, so you need .Success("myfunc") or you could do .Success("myfunc2('#GridId')") , but my func2 needs to return function, kinda like: `function myfunc2(sel){ return function(){ $(sel).data('api').load(); } }`
  
  at 31 May 2017 Omu
- Ok got that, however the SearchForm doesn't close... actually will work better in terms of UX if the grid reload is triggered by the OK button on the Search Form. Had a quick look at the Event Listeners for the opbtns in awem.js , but that looked too generic to help for a one off. Is there a way to attach the grid reload to the OK button for the custom search form? Maybe is there something like $("#myModal").on("hidden.bs.modal", function () { // put your default event here }); event I can put on the Index page to modify the behavior for this specific custom search form?
  
  at 01 Jun 2017 Stephan
- the search form can't close it is a partial view, part of the lookup popup, the search form "Search" button is in the search form partial view so you have full control over it, however I don't see the point of reloading the main grid when you search, since searching isn't modifying anything
  
  at 02 Jun 2017 Omu
- Is there any way to send a parameter to SearchForm()? I need the Create button on my custom form to pass on an Id to Create() and want that to be set through a view model. Parameters I tried are v, the input name, my .parameter() name. I see pars:{ keys:['ownerId'], vals:["889f9340-c0e9-4daa-a730-c9153d37bd9e"]} in the jQ injected I need access to the parameters. Thanks.
  
  at 02 Jun 2017 Stephan
- the SearchForm action is not receiving any parameters in the current version, next version will receive, but there will be other things as well so you might not even need the SearchForm
  
  at 02 Jun 2017 Omu
- when will that be released?
  
  at 02 Jun 2017 Stephan
- could be this summer it would be good if would give us a good explanation of what you're trying to build, from the user point of view, what you have on the page, what you show in the popup, etc. step by step
  
  at 02 Jun 2017 Omu

please Sign In to leave an answer