How to Display a server side error right underneath the row?

rprahalad

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

rprahalad

I was able to add a row and show the error message by doing this in the else condition.

I pass the rowErrorID in question to the controller when I call the ajax method and pass the same number back in the JSON response from the controller and grab it back here in the else condition below and use jquery to show the server side error.

success: function (data) {                  
                    if (data.status) {
                        dataTable.ajax.reload(InitComplete);
                        $('.update').removeClass('update').addClass('edit').html('Edit');
                        $('.cancel').removeClass('cancel').addClass('delete').html('Delete');                       
                    }
                    else {                        
                        var html = "<td colspan=9 class='text-danger'>" + data.ErrorMessage + "</td>";                        
                        $('table > tbody > tr').eq(data.rowErrorID).after(html);                       
                    }

                },  

Code to pass the rowErrorID to the controller is this:

 $('#dtMyDataTable').on('click', '.update', function (e) {

var clickedRow = $(this).closest('tr'); //the tr where the update button was clicked.
var rowErrorID= clickedRow.index(); //Pass this in the ajax call and pass it right back if there is a server side error from the controller and use it in the else condition that I have typed above to display a new row with the error message.

})