Editor and child-row - Where to begin

rbyrns

I have joined tables in a one to many relationship. I want to put the many occurrence in a child row like in the custom display controller example, I started on the dataTables example first and it looks simple, but I cannot for the life of me figure out how to do that with Editor in the mix. Due to the size of my tables, I have to be server side. Can someone point me in the right direction? I would even be happy to have a link that creates a separate table in the table and make a separate editor for that instance.

rbyrns

I have the data coming over in an array called notes. I have the empty column but the words [object Object] are in front of the image. It even adds a child row when clicked but says unset in the fields I want to show. I did a DataTables debug at http://debug.datatables.net/iqixon .
I think I can lick this thing, but several hours later and multiple attempts. I can't seem to get hold of the data. How do I get it into a child row?

rbyrns

this function is where the problem is

function format ( notes ){
            return '<table><tr><td>'+notes.type+'</td><td>'+notes.phase+'</td></tr>'+
            '<tr><td colspan=2'+notes.note+'</td></tr></table>'

      }

I can see the array called notes with the proper data in firebug. All I get is undefined. Everything is there but the data. The table layout and everything else shows up in the child row.

allan

Hi,

Thanks for the link to the debug trace. I see that your JSON data for each row is passing through a notes array of objects. That is the data you want in your format() function presumably.

So when you call format() how are you doing that? format( row.data().notes ) or something like that?

Looking at your format() function above you are treating it as an object, rather than as an array. You'll need to loop over the array to get all of the notes from it (so you would use notes[i].type for example (where i is the loop counter).

Regards,
Allan

rbyrns

Thanks again for the response.

I was using the same method as in your examples. Once I figured out how to grab some of it, I was going to start the process of trying to process the array. (no real idea on that either)

function format ( notes ){
            return '<table width=100%><tr><th>Type</th><th>Note</th></tr><tr><td>'+notes.type+'</td><td colspan=45'+notes.note+'</td></tr></table>'
   }

/////other code here

    var detailRows = []; //sub row stuff
    $('#main tbody').on('click','td.details-control', function(){
    var tr = $(this).closest('tr');
    var row = table.row( tr );
    var idx = $.inArray(tr.attr('id'), detailRows ); //??
     
    if (row.child.isShown()){
    tr.removeClass('details');
    row.child.hide();
    
    // remove from the 'open' array
    detailRows.splice(idx,1); //??
    }
    else {
    tr.addClass('details');
    row.child(format(row.data())).show();
    
    //add to the open array
    if (idx=== -1){
        detailRows.push(tr.attr('id'));
    }
    }
    });

    // on each draw loop oner the detailsRows and show any children
    editor.on('draw', function (){
        $('#'+id+'td:first-child').trigger('click');
    });

rbyrns

A newer debug - http://debug.datatables.net/ecavaj
I tried the notes[i].type before with no luck. Actually it threw errors saying undefined, while neither is it the way it is now. I could tell it was an object even though I thought the array join instructions said it would be an array.
The way I am getting the array is here:

    ->leftJoin('notes','notes.uid','=','main.uid')
   ->join(
        Join::inst('notes', 'array')
        ->join('uid','uid') 
       ->fields( 
        Field::inst('uid'),
        Field::inst('note')
            ->validator('Validate::required')
            ->set(false),
        Field::inst('type')
            ->validator('Validate::required')
           ->set(false),
            Field::inst('phase')
            ->validator('Validate::required')
           ->set(false)
        )
    ) 
    ->process( $_POST )
    ->json();
}

allan

Okay - good. So you are using format(row.data()) to pass in the either row of data into the format() function.

So if you were to add console.log( notes ) in that function, on the console you would see the data object for that row. It has a notes array - so you access the notes you would use:

 var noteArray = notes.notes;

(you might want to change the notes variable name to make things easier!).

Then you can loop over that making the HTML required.

Regards,
Allan

rbyrns

Thanks - getting closer. Figured out where to put the console.log and it is working. Notes is defined! Woo hoo. Just have to figure out how to loop over it now.

allan

for ( var i=0, ien=noteArray.length ; i<ien ; i++ ) { ... } :-)

Allan

rbyrns

The dance of joy is about to be performed around my desk! Thank you sir!
Great piece of software you have here.

Now to make the contents editable...