Adding row to current page of Server-Side Enabled Grid, highlight it...
Adding row to current page of Server-Side Enabled Grid, highlight it...
I've been banging my head against a desk over this issue for half the day, and I've gotten to the point where I believe this isn't possible. I am, however, needing some guidance. I'm trying to add a TR to an existing segment of data (server-side processing). I pull back the first 10 rows based on what page I'm on in the grid, it's displayed. Below the grid, we have a separate control that accepts data, then the data is inserted into the DB, then the grid is updated.
My question is... can I add a TR row to the bottom of the current page, remove the first record on the page to stay within my display limit, then highlight the row with a class? Here's what I have:
[code]
$(clientGV.oTable[0].children[1].children[0]).remove();
clientGV.oTable.fnDeleteRow(0, null, false);
// Add new row to bottom of client Grid
var values = [];
var visibleRow = '';
var tableRow = '';
for (var i = 0; i < aCols.length; i++) {
values.push(row.Fields[columnNames[i].dataField].Value);
tableRow = tableRow + '' + row.Fields[columnNames[i].dataField].Value + '';
if (row.Fields[columnNames[i].dataField].IsVisible) {
visibleRow = visibleRow + '' + row.Fields[columnNames[i].dataField].Value + '';
}
}
tableRow = tableRow + '';
clientGV.oTable.append(visibleRow);
clientGV.oTable.fnAddTr($(tableRow)[0], null, false);
clientGV.highlightRowByIndex(currentDisplayLen - 1);
[/code]
I had to set the visibleRow to only the columns I wanted to see in the table. fnAddTr didn't add the row unless I redrew the grid. The issue is that any draw function hits the fnServerData call, which I expect in a server-side mode. This works to an extent. My issue now is that I can't actually add a class to the row as it never actually renders. Is this because I MUST call fnDraw? If I do so, I lose my data. Is that scenario possible to do in Datatables? Understandably, this would only work if the user stays on the current page, but we understand that if they page or sort, their data will be resorting and filtered. That's fine. We just want the grid to stack added records at the bottom until a postback occurs.
My question is... can I add a TR row to the bottom of the current page, remove the first record on the page to stay within my display limit, then highlight the row with a class? Here's what I have:
[code]
$(clientGV.oTable[0].children[1].children[0]).remove();
clientGV.oTable.fnDeleteRow(0, null, false);
// Add new row to bottom of client Grid
var values = [];
var visibleRow = '';
var tableRow = '';
for (var i = 0; i < aCols.length; i++) {
values.push(row.Fields[columnNames[i].dataField].Value);
tableRow = tableRow + '' + row.Fields[columnNames[i].dataField].Value + '';
if (row.Fields[columnNames[i].dataField].IsVisible) {
visibleRow = visibleRow + '' + row.Fields[columnNames[i].dataField].Value + '';
}
}
tableRow = tableRow + '';
clientGV.oTable.append(visibleRow);
clientGV.oTable.fnAddTr($(tableRow)[0], null, false);
clientGV.highlightRowByIndex(currentDisplayLen - 1);
[/code]
I had to set the visibleRow to only the columns I wanted to see in the table. fnAddTr didn't add the row unless I redrew the grid. The issue is that any draw function hits the fnServerData call, which I expect in a server-side mode. This works to an extent. My issue now is that I can't actually add a class to the row as it never actually renders. Is this because I MUST call fnDraw? If I do so, I lose my data. Is that scenario possible to do in Datatables? Understandably, this would only work if the user stays on the current page, but we understand that if they page or sort, their data will be resorting and filtered. That's fine. We just want the grid to stack added records at the bottom until a postback occurs.
This discussion has been closed.
Replies
I created my own fnDraw function that is called only when an insert occurs, ridding the current fnDraw of the AjaxUpdate, but leaving all of the other functionality. Worked like a charm...