createdRow Issue
createdRow Issue
zgoforth
Posts: 493Questions: 98Answers: 2
Hello,
I am having trouble using the createdRow option.
I created three conditionsla in the createdRow function, and they are not coloring the <td> like intended. I have created the proper classes in my CSS (green, yellow, red). I have just have one Department in currently, "IT", and it has two current employees in the department.
I want to do a day by day color code based on attendance, so if data[5] == any of the following conditional formats, then $(td).addClass( 'corresponding class' ); to the data[4] cell. Data[5] is a hidden column with the field MondayStatus and data[4] cell is the visible Monday column. So on and so forth for the rest of the days of the week.
Towards the bottom of the JS, where the category name is added to the <tr>, I used seperated conditionals to make the whole parent row green, now I want to use the child rows to determine the color of the parent. if Monday - Friday is green then to make the parent row green. If 50-75% of the cells are green, make the parent row yellow, and if <50% of the cells are green, then make the parent row red.
$(document).ready(function() {
var collapsedGroups = {};
var top = '';
var parent = '';
var table = $('#myTable').DataTable({
"createdRow": function( row, data, dataIndex ) {
if ( data[5] == "P" || data[5] == "TRNG") {
$(row).addClass( 'green' );
}
if (data[5] == "O" || data[5] == "H" || data[5] == "LA" || data[5] == "JD" || data[5] == "ML" || data[5] == "TLV" || data[5] == "LO") {
$(row).addClass( 'red' );
}
if ( data[5] == "NR" || data[5] == "TAD" || data[5] == "LS" ) {
$(row).addClass( 'yellow' );
}
},
"pageLength" : 10,
"columns": [
{"data": "Department",
visible: false},
{ "data": "User.Title",
visible: false },
{ "data": "Locations"},
{ "data": "Sunday",
render: function(data, type, row){
if(type === "sort" || type === "type"){
return data;
}
return moment(data).format("MM/DD/YYYY");
}
},
{ "data": "Monday",
render: function(data, type, row){
if(type === "sort" || type === "type"){
return data;
}
return moment(data).format("MM/DD/YYYY");
}
},
{"data": "MondayStatus",
visible: false},
{ "data": "Tuesday",
render: function(data, type, row){
if(type === "sort" || type === "type"){
return data;
}
return moment(data).format("MM/DD/YYYY");
}
},
{"data": "TuesdayStatus",
visible: false},
{ "data": "Wednesday",
render: function(data, type, row){
if(type === "sort" || type === "type"){
return data;
}
return moment(data).format("MM/DD/YYYY");
}
},
{"data": "WednesdayStatus",
visible: false},
{ "data": "Thursday",
render: function(data, type, row){
if(type === "sort" || type === "type"){
return data;
}
return moment(data).format("MM/DD/YYYY");
}
},
{"data": "ThursdayStatus",
visible: false},
{ "data": "Friday",
render: function(data, type, row){
if(type === "sort" || type === "type"){
return data;
}
return moment(data).format("MM/DD/YYYY");
}
},
{"data": "FridayStatus",
visible: false}
],
dom: "<'row'<'col-sm-12 col-md-10'f><'col-sm-12 col-md-2'B>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
buttons: [{
extend: 'collection',
className: "btn-dark",
text: 'Export/Update Table',
buttons: [{
extend: "excel",
className: "btn-dark"
},
{
extend: "print",
className: "btn-dark"
},
{
text: 'User Guide',
action: function (e, dt, node, config){
$('#ugModal').modal('show');
}
},
],
}],
order: [
[0, 'asc'],
[1, 'asc']
],
rowGroup: {
dataSrc: [
'Department',
'User.Title'
],
startRender: function(rows, group, level) {
var all;
if (level === 0) {
top = group;
all = group;
} else if (level === 1) {
parent = top + group;
all = parent;
// if parent collapsed, nothing to do
if (!collapsedGroups[top]) {
return;
}
} else {
// if parent collapsed, nothing to do
if (!collapsedGroups[parent]) {
return;
}
all = top + parent + group;
}
var collapsed = !collapsedGroups[all];
console.log('collapsed:', collapsed);
rows.nodes().each(function(r) {
r.style.display = collapsed ? 'none' : '';
});
//Add category name to the <tr>.
if ( group == "IT" && rows.count() == 2 ){
return $('<tr/>')
.append('<td class="green" colspan="8">' + group + ' (' + rows.count() + ')</td>')
.attr('data-name', all)
.toggleClass('collapsed', collapsed);
}else {
return $('<tr/>')
.append('<td colspan="8">' + group + ' (' + rows.count() + ')</td>')
.attr('data-name', all)
.toggleClass('collapsed', collapsed);
}
}
}
});
loadData();
$('#myTable tbody').on('click', 'tr.dtrg-start', function() {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
table.draw(false);
});
});
Answers
So. I realized it wasn't posting the class to the cell/row because I was calling the Data wrong. It should be data.MondayStatus instead of data[5].
With that being said, I am now still struggling with only coloring the 4th data column of the row (Monday).
$(td).addClass( 'green' );does not work as it is not defined.You don't have a variable
tdin that function so its not defined. Take a look at the createdRow example for how to do this.Kevin
That is what I came across, I was first thrown off by the cells value and tried to use that. I was able to fix it with the example shown on the createdRow link you shared.
In regards to my second part of the question coloring the main parent row based off the class of the child rows, is that possible to execute? I have created a JSFiddle of a Static Example https://jsfiddle.net/3bmragtu/2/ where it colors the Day Column based off of that days status.
So where I add the category name to the <tr>, is it possible for me to color the entire parent row off of my description based on the sub cells and their color code?
I need to create a conditional checking those column cells and appending either
based on the corresponding % of green columns (< 50% = red, 50%-75% = yellow, > 75% = green)
Is this same question as discussed in your other thread: https://datatables.net/forums/discussion/67751/color-a-collapsible-not-visible-data-column-row#latest ?
Colin