Row.Child.Show not working after applying dropdown filter

carlosgc81

Hi guys,

I have a website that is using Datatables to show data from Sharepoint lists.

Everything is working and I am able to show children from each of the rows of the table after clicking on them. The problem is that if I apply a filter first to the table (by selecting a value out of a list of values from a dropdown field) the list of elements is shown but when I try to show the child of any of the rows it does not work and I don't understand why

I am sharing my code just in case you can help me. Thanks a lot in advance

            <table id="tproducts" class="cell-border hover" style="width:100%">
                <thead>
                    <tr>
                        <th></th>
                        <th title="Click on a product to see details">Product Name</th>
                        <th>Category</th>
                        <th>Status</th>
                        <th>Product Owner</th>
        </tr>
                </thead>
            </table>


    <!-- Scripts -->
    <script type="text/javascript">

$(document).ready(function() {
var products = $('#tproducts').DataTable();
var releases = $('#treleases').DataTable();

if (products != 'undefined') {  
     products.destroy();  
}  

if (releases != 'undefined') {  
    releases.destroy();  
} 

getCategories();

getListItemsByListName({
    listName: 'Products',
    select: 'PID, Title, Category, Description, Domain, Status, GeneralAvailability,ProductOwner/Title,ExecutiveSponsor/Title,ProductDevelopmentSPOC/Title&$expand=ProductOwner,ExecutiveSponsor,ProductDevelopmentSPOC',
    order: 'Id asc'
}).done( function (data){
    products = $('#tproducts').DataTable({
        paging:true,
        bFilter:false,
        bInfo: false,
        data: data.d.results,
        order: [[1,'desc']],
        columns: [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            {
                "className": 'details-title',
                data: 'Title'
            },
            {
                data: 'Category'
            },
            {
                data: 'Status'
            },
            {
                "defaultContent": 'Not assigned',
                "data": 'ProductOwner.Title'
            },
        ]
    });
});


$('#tproducts tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = products.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        getListItemsByListName({
            listName: 'ProductReleases',
            select: 'RID, PID/PID, Scope, RAG, Status,Description, PRTargetDate, BRTargetDate, RolloutStartsDate, RolloutCompletionDate,PR_x0020_Status,BR_x0020_Status,Rollout_x0020_Status, PM/Title, Title&$expand=PID,PM',
            filter: 'PID eq ' + row.data().PID,
            order: 'Id asc'
            }).done( function (data){
                var d = data.d.results[0];
                releases = $('#treleases').DataTable({
                    "bFilter": false,
                    "bInfo": false,
                    "bPaginate": false,
                    data: data.d.results,
                    order: [[1,'desc']],
                    columns: [
                        {
                            "className": 'releases-title',
                            data: 'Title'
                        },
                        {
                            "visible": false,
                            "data": 'PID.PID'
                        },
                    ]
                });
                row.child( format(data.d.results) ).show();
                tr.addClass('shown');   
            });
    }
});



    $('#tproducts').on('click', 'td.details-title', function () {
        var tr = $(this).closest('tr');
        var row = products.row( tr );
        //window.open("https://www.youraddress.com","_self")
        window.open('http://teamsites.adpcorp.com/Sites/GlobalViewReleases/Documents/Version%201.0/one_product.html?PID=' + row.data().PID,"_self");
    });



    function getListItemsByListName(arg) { // function tol get SharePoint list loaded for use. Can be used without selction, filter, expansion.
        var listName = arg.listName;
        var selection = arg.select;
        var filter = arg.filter;
        var expansion = arg.expansion;
        var order = arg.order;

        if (selection) { selection='?$select='+selection; } else selection = '?$select=*';
        if (filter) { filter='&$filter='+filter; } else filter = '';
        if (expansion) { expansion='&$expand='+expansion; } else expansion = '';
        if (order) { order='&$orderby='+order; } else order = '';
        return $.ajax({
            url: "http://teamsites.adpcorp.com/Sites/GlobalViewReleases/_api/web/lists/GetByTitle(%27"+listName+"%27)/items"+selection+filter+expansion+order+"&$top=100000",
            method: "GET",
            headers: { "Accept": "application/json; odata=verbose" },
        });
    }


    function body(d){
        var l = d.length;
        var code = '';

        for(var i = 0; i < l; i++){
            code = code + '<tr>'+

                                '<td>'+d[i].Title+'</th>'+
                                '<td>'+d[i].Description+'</th>'+
                                '<td>'+d[i].Status+'</th>'+
                                '<td>'+d[i].RAG+'</th>'+
                                '<td>'+d[i].PRTargetDate+'</th>'+
                                '<td>'+d[i].PR_x0020_Status+'</th>'+
                                '<td>'+d[i].BRTargetDate+'</th>'+
                                '<td>'+d[i].BR_x0020_Status+'</th>'+
                                '<td>'+d[i].RolloutStartsDate+'</th>'+
                                '<td>'+d[i].Title+'</th>'+
                                '<td>'+d[i].Rollout_x0020_Status+'</th>'+
                                '<td>'+d[i].PM.Title+'</th>'+
                            '</tr>' 
        }
        return code;
    }


    function format ( d ) {
        return '<div class="table-wrapper">'+
                    '<table class="cell-border hover" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
                        '<thead>'+
                            '<tr>'+

                                '<th>Release Name</th>'+
                                '<th>Description</th>'+
                                '<th>Status</th>'+
                                '<th>RAG</th>'+
                                '<th>Product Ready by</th>'+
                                '<th>Product Status</th>'+
                                '<th>Business Ready by</th>'+
                                '<th>BR Status</th>'+
                                '<th>Rollout Starts</th>'+
                                '<th>Product Ends</th>'+
                                '<th>Rollout Status</th>'+
                                '<th>Release Manager</th>'+
                            '</tr>'+
                        '</thead>'+    
                        '<tbody>' +       
                            body(d) + 
                        '</tbody>'+    
                    '</table>'+
            '</div>';
    }

        </script>
</body>

</html>

colin

Hi @carlosgc81 ,

That's a lot of code - hard to debug for an edge case like this. It would be better if you could link to your page or create a simplified example on the live site.

Cheers,

Colin