Child rows (show extra / detailed information)--Not able to show the child row in table

Question

I am using Datatables.js (using JSNI) for showing and hiding the row information for my table (which is created using Google web toolkit-gwt celltable). My requirement is on click of Button I need to iterate the table and show /hide the information but it's not working.

Below is my code:

function format(d) {
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'
                    + '<tr>'
                    + '<td>Full name:</td>'
                    + '</tr>' + '</table>'
;}


$wnd.$(function() {
    var table = $wnd.$('#example').DataTable({
        "columns" : [
            {
                "orderable" : false,
                "data" : null,
                "defaultContent" : ''
            },
            {
                "data" : "firstName"
            },
            {
                "data" : "middleName"
            },
            {
                "data" : "lastName"
            },
            {
                "data" : "age"
            },
            {
                "data" : "empId"
            },
            {
                "data" : "address"
            }
        ],
        "order" : [ [ 1, 'asc' ] ]
    });

    $wnd.jQuery('#btnId').click(function() {
        $wnd.$("#example tbody tr").each(function(i) {                  
            var rowNo = table.row(i);

            if (rowNo.child.isShown()) {
                // This row is already open - close it
                console.log("hide-->");
                rowNo.child.hide();
            }
            else {
                console.log(rowNo.data());
                rowNo.child( format(rowNo.data()) ).show();
            }
        });
    });
});

and finally I saw one difference is that the table which is created using GWT generates the table structure in this format.

<tr __gwt_row="0" __gwt_subrow="0" class="GEUXRR0CPC">
    <td class="GEUXRR0COC GEUXRR0CAD GEUXRR0CBD">
        <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-16" tabindex="0">
            xxx
        </div>
    </td>
    <td class="GEUXRR0COC GEUXRR0CAD">
        <div style="outline-style:none;" __gwt_cell="cell-gwt-uid-17">
            yyy
        </div>
    </td>
</tr>

since text will be there inside <div> which is inside <td>. How to solve this issue? How to show/hide the row inside the table? Any help?

Note: 1)Created GWT CellTable 2)Injecting JS(Datatables.js) into CellTable through JSNI to expand or collapse the row like(https://www.datatables.net/examples/api/row_details.html)

I can't understand your question. You're using Datatables.js or you're using a GWT Widget? What exactly happens? — André, Jun 22 '15 at 14:41
created GWT celltable and injecting datatables.js to show/hide row,row.data() method is giving undefined exception. — moh, Jun 23 '15 at 04:59

score 0 · Answer 1 · edited May 23 '17 at 11:43

0

They weren't designed to work together, either you build a widget that uses the Datatables.js or you use only the GWT widgets, I'd suggest as a starting point, to look at the example at GWT Showcase, it uses the CellTableBuilder.

For reference this questions was already answered here.

_{You might make them play nicely, but I doubt someone tried to do, you can try debug the GWT code with the SuperDev mode to see what is really happening.}

edited May 23 '17 at 11:43

Community

1
1

answered Jun 23 '15 at 13:10

André

2,184
1
22
30

Thanks Andre for your reply..I can't use cellTablebuilder i tried this as well...i need a flexibility to add different container(Horizontalpanel,verticalpanel,Table,row) as new row.. – moh Jun 24 '15 at 05:23

Child rows (show extra / detailed information)--Not able to show the child row in table

1 Answers1