Nested Grid – HTML code in cell not displaying fully

[vijaybabuParticipant]

Hi

I tried to display one HTML code (table) under sub grid cell .its not displaying fully . here with i have attached the code.

please give the solution for HTML rendering in sub grid .

//index.php

  <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'CustomerID'},
                    { name: 'CompanyName'},
                    { name: 'ContactName'},
                    { name: 'ContactTitle'},
                    { name: 'Address'},
                    { name: 'City'},
                ],
				id: 'CustomerID',
                url: 'data.php',
				root: 'Rows',
                beforeprocessing: function (data) {
                    source.totalrecords = data[0].TotalRows;
                },
				sort: function()
				{
					$("#jqxgrid").jqxGrid('updatebounddata');
				}				
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
			
			var initrowdetails = function (index, parentElement, gridElement) {      
				var row = index;
				var id = $("#jqxgrid").jqxGrid('getrowdata', row)['CustomerID'];
			    var grid = $($(parentElement).children()[0]);
            
				var source =
				{
					url: 'data.php',
					dataType: 'json',
					data: {customerid: id},
					datatype: "json",
					cache: false,
					datafields: [
						 { name: 'ShipCountry' }
					],
					root: 'Rows' 
 				};
				var adapter = new $.jqx.dataAdapter(source);
				// init Orders Grid
				grid.jqxGrid(
				{
					virtualmode: true,
					//autoheight: true,
					width:  800,
					//sortable: true,
					//pageable: true,
					//pagesize: 5,
					source: adapter,
					theme: 'classic',
					rendergridrows: function (obj) {
						return obj.data;
					},
					columns: [ 
						  { text: 'Country', datafield: 'ShipCountry', width: 800 }
					  ]
				});					
			};
			  
			// set rows details.
            $("#jqxgrid").bind('bindingcomplete', function (event) {
                if (event.target.id == "jqxgrid") {
                    $("#jqxgrid").jqxGrid('beginupdate');
                    var datainformation = $("#jqxgrid").jqxGrid('getdatainformation');
                    for (i = 0; i < datainformation.rowscount; i++) {
                        $("#jqxgrid").jqxGrid('setrowdetails', i, "<div id='grid" + i + "' style='margin: 10px;'></div>", 220, true);
                    }
                    $("#jqxgrid").jqxGrid('resumeupdate');
                }
            });
			
			$("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                theme: 'classic',
				pageable: true,
				width:  900,
				sortable: true,
				autoheight: true,
                virtualmode: true,
                rowdetails: true,
                initrowdetails: initrowdetails,
                rendergridrows: function () {
                    return dataAdapter.records;
                },				
                columns: [
                  { text: 'Company Name', datafield: 'CompanyName', width: 250},
                  { text: 'ContactName', datafield: 'ContactName', width: 150 },
                  { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                  { text: 'Address', datafield: 'Address', width: 200 },
                  { text: 'City', datafield: 'City', width: 120 }
              ]
            });        	
        });
    </script>

//data.php

<?php
#Include the connect.php file
include('connect.php');
#Connect to the database
//connection String
$connect = mysql_connect($hostname, $username, $password)
or die('Could not connect: ' . mysql_error());
//Select The database
$bool = mysql_select_db($database, $connect);
if ($bool === False){
	print "can't find $database";
}
// get data and store in a json array
$query = "SELECT * FROM customers";
if (isset($_GET['customerid']))
{
	$pagenum = $_GET['pagenum'];
	$pagesize = $_GET['pagesize'];
	$start = $pagenum * $pagesize;
	$query = "SELECT SQL_CALC_FOUND_ROWS * FROM Orders WHERE CustomerID='" .$_GET['customerid'] . "'";
	$query .= " LIMIT $start, $pagesize";
	$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
	$sql = "SELECT FOUND_ROWS() AS `found_rows`;";
	$rows = mysql_query($sql);
	$rows = mysql_fetch_assoc($rows);
	$total_rows = $rows['found_rows'];	 
	$htmlcode=" <div><table width='100%' border='1'>
  <tr>
    <td>Misc1</td>
    <td>Misc1</td>
    <td>Misc1</td>
    <td>Misc1</td>
    <td>Misc1</td>
  </tr>
  <tr>
    <td>XXXXXXXXXXXX</td>
    <td>yyyyyyyyyyyy</td>
    <td>zzzzzzzzzzzz</td>
    <td>rrrrrrrrrrrr</td>
    <td>gggggggggggg</td>
  </tr>
</table></div>
";
 		$orders[] = array(
 			'ShipCountry' => $htmlcode
		  );
     $data[] = array(
       'TotalRows' => $total_rows,
	   'Rows' => $orders
	);
	$htmlcode="";
	echo json_encode($data);    	
}
else
{
	$pagenum = $_GET['pagenum'];
	$pagesize = $_GET['pagesize'];
	$start = $pagenum * $pagesize;
	$query = "SELECT SQL_CALC_FOUND_ROWS * FROM Customers LIMIT $start, $pagesize";
	$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
	$sql = "SELECT FOUND_ROWS() AS `found_rows`;";
	$rows = mysql_query($sql);
	$rows = mysql_fetch_assoc($rows);
	$total_rows = $rows['found_rows'];
	if (isset($_GET['sortdatafield']))
	{
		$sortfield = $_GET['sortdatafield'];
		$sortorder = $_GET['sortorder'];
		
		if ($sortfield != NULL)
		{		
			if ($sortorder == "desc")
			{
				$query = "SELECT * FROM Customers ORDER BY" . " " . $sortfield . " DESC LIMIT $start, $pagesize";
			}
			else if ($sortorder == "asc")
			{
				$query = "SELECT * FROM Customers ORDER BY" . " " . $sortfield . " ASC LIMIT $start, $pagesize";
			}			
			$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
		}
	}
	while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
		$customers[] = array(
			'CustomerID' => $row['CustomerID'],
			'CompanyName' => $row['CompanyName'],
			'ContactName' => $row['ContactName'],
			'ContactTitle' => $row['ContactTitle'],
			'Address' => $row['Address'],
			'City' => $row['City'],
			'Country' => $row['Country']
		  );
	}
    $data[] = array(
       'TotalRows' => $total_rows,
	   'Rows' => $customers
	);
	echo json_encode($data);
}
?>

result

[Peter StoevKeymaster]

Hi vijaybabu,

Your Grid’s Height is 400px by default. The row detail’s height is 220px as I see in your code. That is the reason why the nested Grid is not fully displayed(its height is higher than the detail’s height). See a working example here: nestedgrids.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[vijaybabuParticipant]

Hi Peter

Thanks for your reply ,

after i un comment ‘ autoheight: true,’ its not displaying all rows. its showing only first row of html table.

you refer this screen shot

http://maniyanshaiclub.com/forum/vijay/upload/photo/Subgrid-html-rendering.jpg

How can i attach screen shot in post .

Regards
Vijay babu.K

[Peter StoevKeymaster]

Hi vijaybabu,

As far as I see, you try to put a Table tag in a Grid Cell. The Grid “rowsheight” is 25px so it will not be auto-adjusted to your table.
In case you wish to customize the cells rendering, see the Grid’s cellsrenderer callback function in the help documentation. If you wish to customize the “rowsheight”, set the “rowsheight” property to a different Number value.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[vijaybabuParticipant]

Thanks Peter

[Author]

Posts