Dynamic row selector based on row values
Dynamic row selector based on row values
Hi All,
I've managed to successfully create a dynamic row selector using the rowCallback function
rowCallback: function ( row, data, index ) {
var SelectVal = "";
SelectVal = data["SELECT_STATUS"];
if(SelectVal == null){SelectVal = "";}
if(SelectVal == "N") {
$("td:first-child", row).toggleClass('select-checkbox cls_noselect');
}
},
I had to remove the select all button from my table as I couldn't get it to select only rows with a certain class but it serves it's purpose and seems to be working well.
However, as soon as I enter a value on any row, via inline or row editor, the whole selector column classes get reset. My investigation has lead me to believe this is data table standard behaviour. I could write a function to iterate through the rows and change the class again but I was wondering if I could instead set the data table to set the class using a function in the same way as I've set another column to dynamically show an image:
{ data: "z", render: function (data,type,row) {
var w = '<img src="/html/images/icon_dummy.png">';
if (row.MyIconValColumn == 'A' ) {w = '<img src="/html/images/icon_a.png">';}
if (row.MyIconValColumn == 'B' ) {w = '<img src="/html/images/icon_b.png">';}
if (row.MyIconValColumn == 'C' ) {w = '<img src="/html/images/icon_c.png">';}
var x = row.MyIconDescColumn;
var y = row.MyIconSubDescColumn;
var z = '';
if (x == y) {z = w + '&|ensp;' + x;} else {z = w + '&|ensp;' + x + ' - ' + y;}
return z
},
Any idea how to stop the returning row data from resetting the selector column class or failing that any idea how to set the field class using a function?
Thanks for you help
This question has an accepted answers - jump to answer
Answers
The
columns.renderoption really deals with the contents of the cell. Currently it doesn't offer an option to return a cell itself, and since you want to set the class name of the cell, therowCallbackoption is the way to do that.However, the class names would only be reset if you are using server-side processing (since each draw is effectively a new node). Is that the case here?
Allan
Hi Allan
I had a feeling that the render option was not the correct method but was the best way of explaining the concept.
By my understanding we're not using sever side processing.
We have a sever side process that builds the page but once complete the page has everything.
On update, the page runs an AJAX call which returns the updated row values in JSON format. At this point it resets the class names set by the rowCallback.
It seems like as part of updating the row it redraws the selector column or perhaps just sets the class for the whole column. If that is the case I'll need to create a function to iterate through the rows setting the class names again which I was hoping to avoid.
Thanks
Pete
Can you give me a link to the page or show me the whole code for the DataTable and any relevant API calls please?
Thanks,
Allan
Hi Allan,
Something I noticed today the unwanted behavior also occurs when we toggle between 'Show All' and 'Show 5' etc
I had to anonymise the data/code so hopefully I haven't broken anything in the process.
I'll need to post this over several posts due to the size
post 3
Post 4
Post 5
I may be misunderstanding what you are trying to do but have a question regarding your
rowCallback:It looks to me like every time the table is drawn the select checkbox for rows where
LockVal == "L"are going to toggle between showing the checkbox and not due to usingtoggleClass().Is this what's happening and what you want to happen?
Kevin
Hi kthorngren
I think I understand what you mean and you may be onto something there.
What I want to do is make the change the class to a specific class based on a value. I don't really want it to toggle back and I think that is what it's doing.
Thanks I'll investigate this further.
That sorted it out. I'll try to remember not to use toggle inappropriately from now on.
I've updated the code to:
Allan, you may want to move the full page code off to a help section on getting DataTables to work with WebFOCUS. It's a bit hard to understand being disjointed on a discussion page.