Columns matching but still get "cannot read property 'style' of undefined
Columns matching but still get "cannot read property 'style' of undefined
zgoforth
Posts: 493Questions: 98Answers: 2
Link to test case: https://jsfiddle.net/BeerusDev/5nLg4bt0/178/
There is my working example with JS sourced data, the issue is when I try to add the code to my dynamic example, (AJAX sourced Data), it gives me the error:
jQuery.Deferred exception: Cannot read property 'style' of undefined TypeError: Cannot read property 'style' of undefined
Here is my code with AJAX:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.1/css/buttons.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.1.0/css/dataTables.dateTime.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap5.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.3/css/rowGroup.bootstrap5.min.css"/>
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.bootstrap4.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.bootstrap5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/datetime/1.1.0/js/dataTables.dateTime.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap5.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.3/js/dataTables.rowGroup.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
</head>
<body>
<div class="container">
<button id="button">Mark Task as Complete</button>
<table id="taskTable" class="table table-bordered" cellspacing="0" style="width:100%">
<thead>
<tr>
<th>Assigned To</th>
<th>Task Status</th>
<th>Priority</th>
<th>Task</th>
<th>End Date</th>
<th>Percentage Complete</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
<script>
function loadTasks(){
var uri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('TestDynamicTaskList')/items?$select=AssignedTo,Priority,Title,Status,StartDate,DueDate,PercentComplete"
$.ajax({
url: uri,
method: "GET",
headers: {
"Accept": "application/json; odata=verbose"
},
success: function(data) {
if (data.d != null && data.d != undefined && data.d.results.length > 0) {
console.log(data);
var table = $('#taskTable').DataTable();
table.rows.add( data.d.results ).draw();
}
},
error: function(error) {
alert("Status: " + textStatus);
alert("Error: " + errorThrown);
}
});
}
$(document).ready(function (){
function filterGlobal () {
$('#taskTable').DataTable().search(
$('#global_filter').val()
).draw();
}
var collapsedGroups = {};
var top = '';
var parent = '';
var table = $('#taskTable').DataTable({
columns: [
{"data": "AssignedTo", visible: false },
{"data": "Priority", visible: false},
{"data": "Title"},
{"data": "Status"},
{"data": "StartDate"},
{"data": "DueDate"},
{"data": "PercentComplete"}
],
dom: 'frt',
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: true,
order: [[2, 'asc']],
rowGroup: {
dataSrc: [
'AssignedTo',
'Priority'
],
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' : '';
});
var priorityClass = '';
rows.every(function (rowIdx, tableLoop, rowLoop, data){
var data = this.data();
var api = $.fn.dataTable.Api('#taskTable');
//console.log(api);
//console.log(data.Priority)
switch(data.Priority){
case '(1) High':
priorityClass = 'red';
break;
case '(2) Normal':
priorityClass = 'orange';
break;
case '(3) Low':
priorityClass = 'yellow';
break;
}
});
//Add category name to the <tr>.
if(level === 0){
return $('<tr/>')
.append('<td colspan="8" style="text-align: left;">' + group + ' (' + rows.count() + ')</td>')
.attr('data-name', all)
.toggleClass('collapsed', collapsed);
} else if (level === 1) {
return $('<tr/>').addClass(priorityClass)
.append('<td colspan="8" style="text-align: left;">' + group + '</td>')
.attr('data-name', all)
.toggleClass('collapsed', collapsed);
}
}
}
});
try {
loadTasks();
} catch (err) {
alert(err.message);
}
$('#taskTable tbody').on('click', 'tr.dtrg-start', function() {
var name = $(this).data('name');
collapsedGroups[name] = !collapsedGroups[name];
table.draw(false);
});
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
} );
});
</script>
</html>
This question has an accepted answers - jump to answer
Answers
Seven DT columns. Six HTML columns.