Re-Expand rows after a page refresh

Re-Expand rows after a page refresh

EldoradoEldorado Posts: 1Questions: 1Answers: 0

Hey guys, looking for some help with making my rows auto-expand to the same state they were in after a page refresh is done

I'm using datatables to display data from a number of SharePoint lists using the rest api to pull the data, when a row is expanded then more data is pulled and displayed for the detail, as part of this detail is a Status field which I am allowing the user to click on which opens a SharePoint model dialog edit form where they can edit the value as well as enter a couple other pieces of information

My issue is that when the form is then closed the data showing does not reflect any updates that were made to that Status field, I have considered inline editing but then the user would not have the ability to enter/edit the other fields that are only shown in the dialog box, displaying them inline is not an option as it would clutter the screen, so I am now trying to do a page refresh and automatically re-open any rows that were already open..

Maybe this is too much trouble? Is it possible to automatically close/re-open a row?

Below is my code (hopefully I'm formatting this post correctly for it to display), I am attempting to use the html5 localStorage functionality to save data between page refreshes, my issue comes when I retrieve the data I stored in anOpen after the refresh in the "fnDrawCallback" function... which I'm not sure is proper either

var anOpen = [];

$(document).ready(function() {

   
    var call = $.ajax({
        url: "/_vti_bin/ListData.svc/TestRuns?$expand=TestCases,TestSuites",
        type: "GET",
        dataType: "json",
        headers: {
            Accept: "application/json;odata=verbose"
        }
   
    });

    call.done(function (data,textStatus, jqXHR){

        var trData = data.d.results;
        var oTable = $('#trTable').dataTable({
            "bDestroy": true,
            "iDisplayLength": 25,
            "deferRender": true,
            "bStateSave": true,
            "fnDrawCallback": function( oSettings ) {
                var retrievedObject = localStorage.getItem('anOpenObject');
                if (retrievedObject != null)
                {
                    openObject = retrievedObject.split(",");
                    localStorage.clear('anOpenObject');                
                    
                    $.each( openObject, function ( i, id ) {
                        $('#'+id+' td:first-child').trigger( 'click' );
                    } );   
                }
            },            
            "bJQueryUI": true,            
            "bProcessing": true,
            "aaData": trData,
            "aaSorting": [[ 1, "asc" ]],
            "aoColumns": [
                {
                   "mData": null,
                   "sWidth": "15px",
                   "sClass": "control center",
                   "sDefaultContent": '<img src="' + sImageUrl + 'details_open.png">'
                },
                    { "mData": "Id",
                      "sWidth": "15px"},
                    { "mData": "Title",
                      "sWidth": "50%"},
                    { "mData": "Build"},
                    { "mData": "Environment"},
                    //{ "mData": "RunDate"},
                    { "mData": "StatusValue"}
            ],
            "aoColumnDefs" : [ 
                { 'bSortable': false, 'aTargets': [ 0 ] },
                {
                    "fnRender": function ( oObj ) {
                        return '<a href="#" onclick="openForm(\'EditForm_New\', \'Test Runs\', \'' + oObj.aData["Id"] + '\',  \'' + oObj.aData["Title"] + '\');">' + oObj.aData["Title"] + '</a>';
                    },
                    "aTargets": [ 2 ]
                }
                //{
                //    "fnRender": function ( oObj ) {
                //        var date = new Date(parseInt(oObj.aData["RunDate"].substr(6)));
                //        return $.datepicker.formatDate('dd/mm/yy', date);
                //    },
                //    "aTargets": [ 5 ]                
                //}                
            ]

        });
       
        //On click to highlight selected row
        $("#trTable tbody tr").click( function( e ) {
            if ( $(this).hasClass('row_selected') ) {
                $(this).removeClass('row_selected');
            }
            else {
                oTable.$('tr.row_selected').removeClass('row_selected');
                $(this).addClass('row_selected');
            }
        });
        
        //On click control for each Test Run row, expand to show details
        $('#trTable').on('click','td.control', function () {
            var nTr = this.parentNode;
            var i = $.inArray( nTr, anOpen );
            var nTr = $(this).parents('tr')[0];
            var nTds = this;            
           
            if ( i === -1 ) {
                $('img', this).attr( 'src', sImageUrl + "details_close.png" );

                //Grab current row data
                var rowIndex = oTable.fnGetPosition( $(nTds).closest('tr')[0] );
                var tcData = trData[rowIndex].TestCases.results;
                var tsData = trData[rowIndex].TestSuites.results;
                
                var oData = oTable.fnGetData( nTr );
                var currentTestRunID = oData.Id;

                var nDetailsRow = oTable.fnOpen(nTr, fnFormatResults(currentTestRunID, oData), 'details');
                $('div.innerDetails', nDetailsRow).slideDown();
                anOpen.push( nTr );
                $('#tabs_' + currentTestRunID).tabs();            

                //Get details for sub-tables
                fnGetRunDetails(currentTestRunID, tcData, tsData);
            }
          
            else {
                $('img', this).attr( 'src', sImageUrl + "details_open.png" );
                $('div.innerDetails', $(nTr).next()[0]).slideUp( function () {
                    oTable.fnClose( nTr );
                    anOpen.splice( i, 1 );
                });
            }
        } );        
    });
        
    call.fail(function (jqXHR,textStatus,errorThrown){
        alert("Error retrieving Test Runs: " + jqXHR.responseText);
    });

});
This discussion has been closed.