Update parent row in real-time from expansion row
Update parent row in real-time from expansion row
Hi All, new to DataTables. (But not to jQuery.)
I have implemented a function to create an expansion row using the standard fnGetData method to populate the expansion row (Actually a div). What I want to do is control a couple of values in the main row from a jqueryUI slider in the expansion row.
ALL of which comes down to the simple question: What is the best way to get a reference to the controls in the main row from javascript?
What the math will do is get a dollar figure from one cell, show the slider value as a percentage in another cell, and "OldValue X percent increase" in a third cell.
I'm putting a unique number (the database primary key) in a hidden row in the main rows and I populate a "display: none" td in the expansion row with this value. Can I use this value to find the parent row by the (hidden) unique ID?
Thanks much. Investing a lot of time in mastering DataTables! Hope it pays off. I really want to standardize my work on a single grid/table control.
Any general suggestions on this kind of functionality would be appreciated as well!
Bob
I have implemented a function to create an expansion row using the standard fnGetData method to populate the expansion row (Actually a div). What I want to do is control a couple of values in the main row from a jqueryUI slider in the expansion row.
ALL of which comes down to the simple question: What is the best way to get a reference to the controls in the main row from javascript?
What the math will do is get a dollar figure from one cell, show the slider value as a percentage in another cell, and "OldValue X percent increase" in a third cell.
I'm putting a unique number (the database primary key) in a hidden row in the main rows and I populate a "display: none" td in the expansion row with this value. Can I use this value to find the parent row by the (hidden) unique ID?
Thanks much. Investing a lot of time in mastering DataTables! Hope it pays off. I really want to standardize my work on a single grid/table control.
Any general suggestions on this kind of functionality would be appreciated as well!
Bob
This discussion has been closed.
Replies
I'll be back when I have a more "DataTable specific" question!
Thx anyway guys.
Maybe it would be great for others including me to see your result. It's always good to learn a new solution.
Regards,
Peter
Here is basically what it does:
When the expansion row is created, I plant the _DT_RowIndex in a hidden spot in the expanded row. So, when the slider is moved, it calls this function.
First, using the _DT_RowIndex, it finds that row in the whole collection of rows (main or expansion), which allows me to find the text inputs I want to modify.
Next I use fnGetData so I can access all the values I need to calculate from. After this, I do the required math and apply the values to the cells. It runs smoothly and very fluidly in all three major browsers.
Finally, I update the oData corresponding to hidden columns with the raw, unformatted data.
My slider has a value of 0 - 2000, so this lets managers play with raises up to 20%.
Some of what I'm doing here displays an initial lack of knowledge of the DataTables API, so I will come back to this function as I'm nearing project completion and 'beautify' it, probably reducing it by 10 lines at least.
I've actually omitted a lot of other cells that are updated in this function to keep it a bit less 'wordy'.
[code]
function UpdateVals(evt, ui) {
var that = $($(evt.target.parentNode.parentNode.parentNode.parentNode)[0]);
var dT_RowIdx = parseInt(that[0].rows[3].childNodes[3].innerHTML);
var rowCount = oTable[0].rows.length;
var i;
for (i = 0; i < rowCount; i++) {
if (oTable[0].rows[i]._DT_RowIndex !== undefined) {
if (oTable[0].rows[i]._DT_RowIndex === dT_RowIdx) {
var nTr = oTable[0].rows[i];
break;
}
}
}
var pctCellID = $(nTr.cells[8]).children('input[type=text]').attr('id');
var dolrCellID = $(nTr.cells[9]).children('input[type=text]').attr('id');
var oData = oTable.fnGetData(dT_RowIdx);
var stValueStr = (nTr.cells[4].childNodes[0].nodeValue).replace(/,/, '');
var stValue = parseInt(stValueStr);
var thePctInput = document.getElementById(pctCellID);
var theDlrInput = document.getElementById(dolrCellID);
$(thePctInput).val(ui.value / 100 + '%');
var multplr = ui.value / 10000;
var newSal = (stValue + (stValue * multplr)).toFixed(4);
var newSalInt = parseInt(newSal);
var newSalStrIntStr = thousandSeparator(newSalInt); //puts commas in
$(theDlrInput).val(newSalStrIntStr);
oData[34] = newSal; //hidden column where the raw new salary is stored
}
[/code]
Anyway, thanks again for sharing.
I do expose a web service that i call in some of my DataTable events, and the responsiveness is still excellent. I'm only testing from inside the LAN at company headquarters or from VPN connection at my home 30 miles away, so I can't say that i would be OK over long distances and disparate networks.
Bob
Peter