I have inline edit implemented on the Data Table. There is an Edit button on each row and when user clicks on it, the columns change into editable text boxes/drop downs. User enters the data and clicks on 'Update' (Edit button label changes to Update) and I make an ajax call and save the edited data.
If there is a server side error on the edit/update, I need to display the error message, right underneath the edited row in question. This is because I have 100's of rows on the datatable and if I add a row to the bottom/top of the table, then the user has to scroll all the way up/down to find his row and re-edit to fix the error and all that.
How can I add a blank row right underneath the edited row dynamically when the error happens? Obviously I don't need to add a blank row underneath each row "before" the error happens.
I tried this on "fnCreatedow". But it obviously append the div tag within the <tr></tr>. But I need a full <tr> with a colspan of 8 underneath the edited row, as the error messages could be really long in some cases.
If I have to add a new <tr> right underneath that row just to display my server side error message, which event should I use to append a tr or a div tags? fnCreatedRow seems to fire before the tr closes.
I want to add that row preferably on ajax:error but I don't know how to go about finding that row and so, I would somehow want a placeholder in place underneath each row, so that I can just get a handle of that element on my ajax:error and just do 'that element',text('error message');
Please ignore the console.log and commented lines from the below code.
"initComplete": InitComplete,
"fnCreatedRow": function (row, data, dataIndex) {
var br = document.createElement("br");
var div = document.createElement("div");
div.setAttribute("id", "error_" + data['ID']);
div.setAttribute("class", "text-danger");
console.log($(row).children("td").eq(9));
//$(row).children("td").eq(9).append(div);
$(row).append(br);
$(row).append(div);
}
Thanks