Save grid draggable rows, Drag and drop order, on form post

Title:

BI{code} ?

I've got two data entry controls I want to create that both need a similar feature: binding/saving the entire grid at once. I'm sure I can do this with javascript, but I was wondering if there is a way to have Razor Pages simply bind if I post the form instead. First control: Planned vaccine categories in priority order. This consists of two grids. The bottom grid is a list of all unselected categories, and is not saved. The top grid is an ordered list of categories. The user drags categories from the bottom grid to the top grid and arranges them in order. On form post the top grid's contents should be part of the data. I can see that I can get the ids following this demo: https://demo.aspnetawesome.com/DragAndDropDemo#Simple-drag-and-drop-demo and then manually attach them to my ajax data. Is there a better way to just have them be part of the form? Second control: Vaccine availability. This is a single grid with fixed order (from the previous control) with a checkbox and dropdown for each row. When the entire form is saved, the grid's contents (ID, available, cost) should be posted. Again, I can use JS as this demo suggests to get the values: https://demo.aspnetawesome.com/GridCheckboxesDemo#Grid-with-checkboxes. However, I would much rather have something closer to the inline edit where I get posted my model itself without having to manually manipulate. I saw you mention iterating over inline edit save calls elsewhere, but the ideal would be for the entire grid to simply bind to an array on my Razor Page. Is anything closer to that possible? This library has saved me a lot of time, thanks for you hard work!

Save Changes Cancel

tboby

asked at 13 Feb 2021

Answers

• BI{code} ?

  each time the user makes a change, drags a row, reorders, in our demo we do `$('#log').prepend(msg)` to show that the change occurred, what you need to do instead is have a `div` inside the html `form` and generate hidden inputs inside that form with name and value so when the form will be posted the hidden inputs will also be posted (name=value),

  Save Changes Cancel

  

  Omu

  answered at 13 Feb 2021

  • Generating inputs seems to be a good approach and works well, thanks. Being able to render a different row from the same model when I drag and drop between grids is pretty magical. I'm having one problem though. I'm using ClientFormat and the templating seems to be too keen `new Column {Bind = "Key", Width = 100, ClientFormat = "<input type='hidden' name='Input.VaccinePlan[.(Key)].Key' value='.(Key)'/>"},` results in `<input type="hidden" name="Input.VaccinePlan[1]1" value="1">` where the name should be Input.VaccinePlan[1].Key. Is there a way to escape that?
    at 13 Feb 2021 tboby
  • you can use `ClientFormatFunc` instead https://demo.aspnetawesome.com/GridDemo/CustomFormat
    at 13 Feb 2021 Omu

please Sign In to leave an answer