Datagrid n++ does not display data [Resolved]

[dies_felices]

Hi,

In the main page there is a datagrid which uses sub-grids.  This works fine.

When the user clicks on a link associated with a sub-grid entry, a new jeasyui window is spawned.  In this new window I try to draw a new datagrid to display some additional data.  I have found that there are two ways which nearly work.

The first datagrid follows the form laid down in the tutorials.  Because the windows don't exist until the link is clicked, the form of the code to render the datagrid is only loosely based on the tutorial code.

The below code has been abbreviated for the sake of brevity, the main functional code has been broken up to highlight that the "//create datagrid" sections are interchangeable.  To create a working example may require a little extrapolation from the below.
For example the virtual window is anchored to a <div id="w"></div> block in the main page.  The variables taken by the addDiv() function are there as a key to the table being examined, window title etc. and not needed in a functional sense.

Calling the function is done by adding an attribute to a link of my choosing.  As each link is associated with a sub-grid element it is able to be given a unique id at run time.

This code lives part of a form initialisation.

Code:

var myLink = document.getElementById("Link");
myLink.setAttribute("onclick", "javascript:addDiv(" +val1 + ", '" + val2 + "', '" + val3 + "');$('#" + val1 + "').window('open');$('#" + val1 + "').window('center')");

The Window and Datagrid generation code.

Code:

function addDiv(md_id, m_title, volume){

    //Check if the window has been opened before.
    if (document.getElementById(md_id)!=null){
      console.log("Window already exists");
    } else {

      //Set up HTML elements to frame window
      var myDiv = document.getElementById("w");
      var winDiv = document.createElement('DIV');
      winDiv.setAttribute("id", md_id);
      myDiv.appendChild(winDiv);
    }

  //Decorate window
  $('#'+ md_id).window({
    width:500,
    height:200,
    title:m_title
  });

//Build the table
Buildt(md_id, volume);

Code:

  //create datagrid
  $('#sha-view_'+md_id).datagrid({ url:"fetch_S1s.php?="+md_id });

}

Code:

  //create datagrid
  $('#sha-view_'+md_id).datagrid({
    view: detailview,
    detailFormatter:function(index,row){
    return '<div id="ddv-' + index + '" style="padding:2px"><table class="ddv"></table></div>';
    }
  });

}

Code:

function Buildt(md, vl){

  //Where to put the table
  var myTableDiv = document.getElementById(md);

  // Check if the table has already be created
  if (document.getElementById("sha-view_" + md)!=null){
    console.log("Table already exists");
  } else {

  //Set the table up for the datagrid
  var table = document.createElement('table');
    table.setAttribute("id", "sha-view_" + md);
    table.setAttribute("url", "fetch_S1s.php?="+md);
    table.setAttribute("class", "easyui-datagrid");
    table.setAttribute("title", "SHA1 "+vl);
    table.setAttribute("rownumbers", "false");

  //Table structure
  var tableHead = document.createElement('thead');
    table.appendChild(tableHead);

  //Table fields
  var fid = document.createElement('th');
      fid.appendChild(document.createTextNode("ID"));
      fid.setAttribute("field", "file_id");
    tableHead.appendChild(fid);

  //Table fields
  var fn = document.createElement('th');
    [... createTextNode, field etc.]
    tableHead.appendChild(fn);

  //Table fields
  var sa1 = document.createElement('th');
    [... code]
    tableHead.appendChild(sa1);

  //Deliver Table to customer
  myTableDiv.appendChild(table);

  }


 
}

All feedback is welcome!

[jarry]

In your 'Buildt' function, you must call .datagrid() or $.parser.parse() to create the datagrid component.

Code:

function Buildt(md, vl){
	//...
	$(table).datagrid(...);  // create the datagrid component
}

[dies_felices]

Hi Jarry,

Thank you for your fast response.  Unfortunately, this isn't working for me.  I've tried the following:

Code:

function Buildt(md, vl){
	//...
        myTableDiv.appendChild(table);
	$(table).datagrid();  // create the datagrid component
}

Code:

function Buildt(md, vl){
	//...
        myTableDiv.appendChild(table);
	$(table).datagrid("sha-view_" + md);  // create the datagrid component
}

Code:

function Buildt(md, vl){
	//...
        myTableDiv.appendChild(table);
	$.parser.parse("sha-view_" + md);  // create the datagrid component
}

Code:

function Buildt(md, vl){
	//...
        myTableDiv.appendChild(table);
	$.parser.parse();  // create the datagrid component
}

And...

Code:

function Buildt(md, vl){
	//...
        myTableDiv.appendChild(table);
        $(table).datagrid();
	$.parser.parse();  // create the datagrid component
}

Each without success.  Placing either of those functions before the .appendChild statement breaks the datagrid even more.

[jarry]

What errors happen? Please describe your issue in more detail.

[dies_felices]

Unfortunately, there aren't any error messages.  There's nothing logged to the javascript console either.

There are two outcomes, one with no data and one with four rows of test data.

In each of these the title and border of the datagrid are rendered.  In the case of the no data outcome the title bar is drawn with the boarder giving an area approximately 5 pixels deep.  In the case of the test data the title bar is drawn and the area of the depth of the boarder looks appropriate to accept four rows of data.

The only difference between the use of the view: detailview, detailFormatter:function(...  and the simple url fetching data is that in the former case, it tries to present expandable rows (when it has data).

At no time are the column headers drawn.

The browser does show that the test data is returned from the database.  I'm sorry that I don't have anything more substantial to offer.

[dies_felices]

Hi thanks for your help.  I have now resolved this.

There were two distinct problems above.  The second isn't covered in the question above because it was not apparent at the time of writing.

The first problem.

The <th></th> needed to be child elements of a <tr></tr>

Code:

    <tr>
      <th>
      </th>
    </tr>

Thus the following code was added

Code:

      var tableRow = document.createElement('tr');
    		tableHead.appendChild(tableRow);

And then the <th> elements were added to that row.

Code:

    //Table fields
      var sa1 = document.createElement('th');
        [... code]
        tableRow.appendChild(sa1);

This mean that the cell boarders began to be drawn.


The next problem was that the data remained invisible.  This turned out to be an issue in my PHP code which was returning data in the following form.

Code:

    [[val11,val12,val13],[val21,val22,val23],[val31,val32,val33]]

It should have been like this:

Code:

    [{val11,val12,val13},{val21,val22,val23},{val31,val32,val33}]

The PHP (mysqli) code to retrieve the former is:

Code:

    $items = array();
        if ($result = $coni->store_result()) {
            while ($row = $result->fetch_row()) {
                array_push($items, $row);
            }
        echo json_encode($items);
        }

The code to fetch the later and correct form of data is:

Code:

    $items = array();
        if ($result = $coni->store_result()) {
            while ($row = $result->fetch_object()) {
                array_push($items, $row);
            }
        echo json_encode($items);
        }