I try to add a print button for the data grid. I get some code by googling and after some modification it's working. But the problem is some cells are shifted and I don't find any way to fix it. Please help.

Result:


print.js

Code:

// StrPrintName print task name
// PrintDatagrid will print DataGrid
function CreateFormPage(strPrintName, printDatagrid) {
    var tableString = '<table cellspacing="0" class="pb">';
    var frozenColumns = printDatagrid.datagrid("options").frozenColumns;  // Get the frozenColumns object
    var columns = printDatagrid.datagrid("options").columns;    // Get the columns object
    var nameList = '';

    // Load title
    if (typeof columns != 'undefined' && columns != '') {
        $(columns).each(function (index) {
            tableString += '\n<tr>';
            if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') {
                for (var i = 0; i <frozenColumns[index].length; ++i) {
                    if (!frozenColumns[index][i].hidden) {
                        tableString += '\n<th width="' + frozenColumns[index][i].width + '"';
                        if (typeof frozenColumns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) {
                            tableString += ' rowspan="' + frozenColumns[index][i].rowspan + '"';
                        }
                        if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) {
                            tableString += ' colspan="' + frozenColumns[index][i].colspan + '"';
                        }
                        if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') {
                            nameList += ',{"f":"' + frozenColumns[index][i].field + '", "a":"' + frozenColumns[index][i].align + '"}';
                        }
                        tableString += '>' + frozenColumns[0][i].title + '</th>';
                    }
                }
            }
            for (var i = 0; i <columns[index].length; ++i) {
                if (!columns[index][i].hidden) {
                    tableString += '\n<th width="' + columns[index][i].width + '"';
                    if (typeof columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) {
                        tableString += ' rowspan="' + columns[index][i].rowspan + '"';
                    }
                    if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) {
                        tableString += ' colspan="' + columns[index][i].colspan + '"';
                    }
                    if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') {
                        nameList += ',{"f":"' + columns[index][i].field + '", "a":"' + columns[index][i].align + '"}';
                    }
                    tableString += '>' + columns[index][i].title + '</th>';
                }
            }
            tableString += '\n</tr>';
        });
    }
    // Load content
	
    var rows = printDatagrid.datagrid("getRows"); // This code is all for access to the current page
    var nl = eval('([' + nameList.substring(1) + '])');
    for (var i = 0; i <rows.length; ++i) {
        tableString += '\n<tr>';
        $(nl).each(function (j) {
            var e = nl[j].f.lastIndexOf('_0');

            tableString += '\n<td';
            if (nl[j].a != 'undefined' && nl[j].a != '') {
                tableString += ' style="text-align:' + nl[j].a + ';"';
            }
            tableString += '>';
            if (e + 2 == nl[j].f.length) {
                tableString += rows[i][nl[j].f.substring(0, e)];
            }
            else
                tableString += rows[i][nl[j].f];
            tableString += '</td>';
        });
        tableString += '\n</tr>';
    }
    tableString += '\n</table>';
   
	var modal = window.open ("print.html", null, "width=800,height=600,left=300,modal=yes,alwaysRaised=yes", null);
    modal.dialogArguments = tableString;
}

print.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Data printing</title>
    <style type="text/css">
body{background:white;margin:0px;padding:0px;font-size:13px;text-align:left;}
.pb{font-size:13px;border-collapse:collapse;}
.pb th{font-weight:bold;text-align:center;border:1px solid #333333;padding:2px;}
.pb td{border:1px solid #333333;padding:2px;}
　　</style>
</head>
<body>
    <script type="text/javascript">
        document.write(window.dialogArguments);
        window.print();
    </script>
</body>
</html>

Link:

Code:

<a href="javascript:void(0);" onclick="CreateFormPage('Print test', $('#dg'));">Print</a>

Table:

Code:

<table id="dg" title="My Users" style="width:700px;height:250px"
			toolbar="#toolbar" pagination="true" idField="id"
			rownumbers="true" fitColumns="true" singleSelect="true" >
		<thead>
			<tr>
				<th rowspan="2" field="firstname" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th>
				<th colspan="3">Calculations</th>			
				<th rowspan="2" field="phone" width="50" editor="{type:'checkbox',options:{on: '&#10004',off: ''}}">Phone</th>
				<th rowspan="2" field="email" width="50" editor="{type:'combobox',options:{url:'get_names.php', method:'get',valueField:'name',textField:'name',}}">Email</th>
			</tr>
			<tr>	
				<th field="lastname" width="50" editor="{type:'numberbox',options:{precision:3}}">Last Name</th>
				<th field="b" width="50" editor="{type:'numberbox',options:{precision:3}}">B</th>
				<th field="c" width="50" editor="{type:'numberbox',options:{precision:3}}" formatter="formatPrice">C</th>	
			</tr>
		</thead>
	</table>

I have two MySQL table.
The first table has four column Date, Product, EX, Quantity. EX have three options RB,RC,RT
In the second table there are five columns - Date, Product, RB,RC,RT
RB, RC and RT are the SUM(MySQL) of the Quantity of a particular Product and Date getting from the first table.

For example if first table is follows:

Date	Product	EX	Quantity
02.02.16	P-1	RB	100
02.02.16	P-1	RB	50
02.02.16	P-1	RC	200

Then the second table will be like:

Date	Product	RB	RC	RT
02.02.16	P-1	150	200	0

So I want to run MySQL query and load the result instantly in the RB,RC and RT columns of the second table depending on the value enter in the Date and Product columns of the second table. How could I do that?  Please Help!