Update parent row in real-time from expansion row

rvgraham

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

rvgraham

Well I got this done. Just a lot of jquery to navigate from the slider to the correct DataTable row and locate the controls I want to modify. Even have it working the other way around so if they type a new value in one of the DataTables cells the slider location pops to match :-)

I'll be back when I have a more "DataTable specific" question!

Thx anyway guys.

MPeter1975

Hey,

Maybe it would be great for others including me to see your result. It's always good to learn a new solution.

Regards,
Peter

rvgraham

Below is my code. The 'ui' parameter is baked into the jQuery slider.

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]

MPeter1975

Thank you for sharing. I've read it carefully and implemented in my project. Works great I think. Now I'm struggling with updating cells to which the math relies in the database. So I need to create the updated rows with some queries. It doesn't seem to be impossible just had to take care a bit more.

Anyway, thanks again for sharing.

rvgraham

The approach I've taken is to "hide" quite a bit of data in hidden columns of the DataTable. I have 44 columns of which only 11 are visible to the user. Some of these are unformatted versions of the "pretty" columns the users see so that I don't have to parse cell contents while doing math, I only have to format the final result before plugging it into the viewable cell.

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

MPeter1975

Good approach. In my case I have to use MySQL quite extensively and sometimes the small query and processing times become a relatively large sum. But the idea is similar to yours. The task requires me to update more cells in more rows also, so I might refresh the whole table and optimize the queries more. Thanks!
Peter