Columns matching but still get "cannot read property 'style' of undefined

Columns matching but still get "cannot read property 'style' of undefined

zgoforthzgoforth Posts: 473Questions: 87Answers: 2
edited August 23 in DataTables 1.10

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

  • tangerinetangerine Posts: 3,115Questions: 25Answers: 365
    Answer ✓

    Seven DT columns. Six HTML columns.

Sign In or Register to comment.