Adding/removing a single child row without destroying the others

Crlotron

My web application builds a table using API data and populates child rows based on the results of another API call. The user will be able to edit the contents of both the parent and child rows and save it via another API call. This much is working properly so far. What I now need to do is add functionality to add a new child row or remove an existing child without losing any edits already made but not yet committed. My code includes a check that stops the user from hiding child rows if edits were made to avoid losing the data; I haven't replicated it here in an effort to keep the code relatively simple. I can add it if deemed pertinent.

My initial thought was to reperform the child API call with the new list of children (either one less or one more), however this means any changes made to the existing children are lost, which makes for a terrible user experience. I believe the answer probably lies with row().child().remove() but I haven't been able to work out the syntax after a few hours of beating my head against it. My focus to this point has been removing the row; I'm sure I'll get stuck on nondestructively adding a new row once this is worked out

The link below is a simplified example showing what the form could look like - functionality to add/remove rows would trigger on the circle icons that appear when expanding a row. Any help would be greatly appreciated.

http://live.datatables.net/nugudefa/8/edit

colin

It would be worth looking at this Editor example here as it is doing that. It allows a child table to be fully editable.

Colin

Crlotron

Thanks for the input Colin. While I love Editor's ease of use, it's currently out of my price range. That example is also populating a child table based on the selection in a main table. In my application, the rows are added to the main table as child rows, instead of as a separate table. All the new/delete functionality is handled in a black box by Editor.

I'm making a budgeting app for personal use, partly because I can't find one that fully meets my needs but mainly for the learning experience. The additional rows are for split transactions, so it doesn't make sense to have them separate as in the example. I believe the biggest difference is the data source, as it has all data available and filters based on the site selected in the top table. I may be able to build something similar, but I'm using server-side processing so it's not feasible to have all data loading into a table.

kthorngren

The Child row details is under your control with the format function. Datatables doesn't know about the contents. There is nothing specific to Datatables to allow for editing of the child rows. Unless of course you make it a Datatable as well

Maybe this ajax loaded child rows blog will give you some ideas. When opening the row an ajax request is sent with info of what data to fetch for the specific row. As you edit the child row data use Ajax to update the server. One option to update is to close then reopen the row, in the success function, to refresh the child via ajax. Or you can create a behavior like the Editor where it waits for the ajax response in the success function and updates the table accordingly.

Also see this child row with editor example. Maybe it will help with ideas of how you can handle the editing portion.

Kevin

Crlotron

Loading my child rows with the appropriate data (using the equivalent of the Format function) works well. I can edit the child rows as desired. My roadblock is adding/removing a single child instead of treating them all as a group. Looking back on my question, I think I was unclear. Maybe I can phrase it more simply:

Is there a way to selectively remove a single child row from a parent?

Let's say a parent row (transaction) has three displayed children. I want to remove one of those children, but leave the other two in place with their current data. Can I pass an argument to row().child([argument here?]).remove() to remove only that row? I'd try a normal row().remove() but that requires redrawing the table, which would clear values.

kthorngren

In the background Detatables inserts a tr element that is used to display the child row data. Datatables knows about and controls that tr element. The content of the tr is up to you.

Let's say a parent row (transaction) has three displayed children.

The three children you are referring to is displayed by your equivalent format function. Here is a very hardcoded example of what you will need to do. You will need to code the mechanism to remove the correct row. I just simply remove the first element from childData.data. I also updated the format function to pass in the data to display.
http://live.datatables.net/nugudefa/9/edit

I'm not sure, based on your example, where this data is coming from but hopefully this example will give you na idea of what you need to do.

Kevin

Crlotron

Definitely a step in the right direction and a working example of what needs to be done. The posted example loses any updates, so I'll need to build an array of current values rather than the originals. I'll see what I can do and will post a fiddle when I get it working, so anyone else who runs into this can at least get a jump start.

Thanks Kevin.