Monday, June 22, 2015

Injecting JSNI(Datatables.net) to GWT CellTable to hide/show rows

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) link(https://www.datatables.net/examples/api/row_details.html).My requirement is on click of Button i need to iterate the table and show /hide the information but its not working See 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>

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?

or Any other way to develop this feature using GWT(https://www.datatables.net/examples/api/row_details.html)?

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/d/optout.

No comments:

Post a Comment