Enabling bubble editor on multiple rows

ctran2

Hi, I’m looking for advice on editing multiple rows using the Bubble editor. We have the following tables in SQL Server:

Question Table:

QuestionId  QuestionText                                                                                            ParentQuestionId
1                   Did you eat lunch yesterday?                                                                    1
2                   If yes, what time?                                                                                  1
3                   If yes, what did you eat?                                                                           1
4                   Did you have dinner yesterday?                                                          4
5                   If yes, list the items you ate.                                                                 4

QuestionId is the primary key (PK).
ParentQuestionId is a self-referencing foreign key (FK) to QuestionId.

Response Table:

ResponseId  QuestionId  ResponseText    CustomerId
1                   1                   Yes                 1
2                   2                   12pm            1
3                   3                   Salmon          1
4                   4                   Yes                 1
5                   5                   Eggs, Spinach   1
6                   1                   Yes                 2
7                   2                   11pm            2
8                   3                   Hotpot          2
9                   4                   Yes                 2
10                  5                   Taco            2

ResponseId is the primary key (PK).
QuestionId is a foreign key (FK) to the QuestionId field in the Question table.
I’m seeking advice on how to enable multiple records that share the same ParentQuestionId to be editable in the same bubble editor window. For example:

If a user clicks on the record with QuestionId 1, the bubble editor should be enabled for QuestionId 1, 2, and 3.
If a user clicks on the record with QuestionId 4, the bubble editor should be enabled for QuestionId 4 and 5.
Additionally, if a user enters a response for QuestionId 1, they should be required to enter responses for its sub-questions (QuestionId 2 and 3).

I found some similar examples to implement parent/child edit like https://editor.datatables.net/examples/datatables/parentChild.html and https://editor.datatables.net/examples/advanced/parentChild.html

However, I'm wondering if there's a simple way to display a bubble popup with onClick event where labels are QuestionText and names/ editable fields are ResponseText.

Any suggestions on how to achieve this?

allan

The bubble() method will accept an array of nodes for the first parameter (or more generally a cell selector), so if you spin over the table collecting the cell nodes that you want to edit into an array and then call bubble() it will show a bubble editor for those cells.

However Editor is a row based editor - it assumes that each row can be uniquely addressed. You might be able to trick it by making QuestionId the primary key for this table, but that is not something I've ever tried or tested. All the tests and development assume that (in this case) ResponseId would be used. Although delete wouldn't work - it would delete all matching questions.

So it might be possible, but you'd have to be very careful, or write your own server-side methods to handle this submission.

Allan

ctran2

To your point, in this use case, ResponseId should be the primary key representing each row to be uniquely addressed. My goal is to be able to update (this table will be update only, no create or delete) multiple rows at the same time.

If I can have a popup that allows me to edit multiple records at the same time, this should afford me the ability to prevent an update from happening to one record if a corresponding update does not meet certain criteria.

Maybe I'm going about this wrong. In short, I want to be able to prevent the submission of data on row 1 if row 2 has not been addressed. And row 2 will not be addressed until row 1 is updated. To accomplish this, I assumed the best way would be a bubble editor to force submission of both row 1 and 2 simultaneously. At this point I could prevent row 1 from updating if row 2 was blank, and vice versa.

Let me know if this clarifies things.

allan

Kind of . You can certainly multi-row edit for a bubble edit, as I mentioned. You just need to pass in the list of cells you want to trigger editing on.

I'm not sure if a bubble edit will be the best UI option here - perhaps the standard modal will work for multi-row editing. Again, it is just a case of passing in the rows you want to edit.

How are you wanting the user to select what row(s) are to be edited?

Then, it sounds like you want to do some validation on the data - preSubmit can be used for that on the client-side, although you might want to just focus on server-side validation (since client-side validation is trivial to bypass). I would always recommend having server-side validation, and client-side if you have enough time to add another layer.

Allan

ctran2

To your question "How are you wanting the user to select what row(s) are to be edited?", I want to select those that share the same ParentQuestionId.

For instance, with this table

QuestionId  |  QuestionText  |  ParentQuestionId                                                                                    
1  |  Did you eat lunch yesterday?   |   1
2  | If yes, what time?   |   1
3  | If yes, what did you eat?   |  1
4  | Did you have dinner yesterday?  |   4
5  |   If yes, list the items you ate.  |   4

Any question that is clicked, it will bring up any record with the same ParentQuestionId. For instance, Question 1, 2, and 3 share ParentQuestionId 1. Therefore, if any of the Questions 1, 2, and 3 is clicked, then all 1, 2, and 3 will pop up.

allan

Perfect - do you have a click event handler for that already? It would need to spin over the rows in the table, adding each to an array if it meets the condition needed:

let parentId = table.row(this).data().ParentQuestionId;
let rows = [];

table.rows().every(function () {
  if (this.data().ParentQuestionId === parentId) {
    rows.push(this.id(true));
  }
});

Then you can do: editor.edit( rows )....

Allan

ctran2

Thank you for your response, Allan. I saw that this multi-row editing approach will update all the records with the same response. However, that's not what I'm looking for. Is there a way that I can have a different input box for each response so that I can edit them separately and then submit them all at the same time in one form?

allan

I'm with you now - I'd assumed they'd all be edited to the same value.

Editor's UI does not have a way to set a value per row when multi-row editing I'm afraid. It can retain an existing value, but if you change the value, they will all need to match. Its API however does have per row options for setting values.

So, the way I would approach this myself, would be to dynamically create a new Editor instance for the rows to be edited - one field for each cell to edit, then on submit, write those values to the main Editor instance using the multi-row editing API, and finally submit that to the server.

Not trivial I'm afraid, but possible.

Allan