jQWidgets Forums

Tagged: export, grid, html, jqxgrid, one row

This topic contains 5 replies, has 2 voices, and was last updated by sainish 10 years, 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Issue in exporting grid as html Posts

September 23, 2014 at 8:09 am Issue in exporting grid as html #59893

Participant

i am trying to export jqxgrid using below code
var gridContent = $(“#jqxgrid”).jqxGrid(‘exportdata’, ‘html’);

it’s working perfect if rows in grid are more then one but issue is when there is only one row
below error comes when there is only one row
Uncaught TypeError: Cannot read property ‘css’ of undefined

this is urgent please help me asap

September 23, 2014 at 8:42 am Issue in exporting grid as html #59896

Nadezhda

Participant

Hello sainish,

Please, find below an example which shows how to export grid with one row as html.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(1);

            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                altrows: true,
                sortable: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 130 },
                  { text: 'Last Name', datafield: 'lastname', width: 130 },
                  { text: 'Product', datafield: 'productname', width: 200 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellsalign: 'center', align: 'center' },
                  { text: 'Ship Date', datafield: 'date', width: 120, align: 'right', cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', align: 'right', cellsformat: 'c2' }
                ]
            });
           
            $("#htmlExport").jqxButton({ theme: theme });            
           
            $("#htmlExport").click(function () {
                $("#jqxgrid").jqxGrid('exportdata', 'html', 'jqxGrid');
            });            
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
        <div style='margin-top: 20px;'>                
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to HTML" id='htmlExport' />               
            </div>
        </div> 
    </div>
</body>
</html>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

September 23, 2014 at 9:32 am Issue in exporting grid as html #59905

sainish

Participant

it is still giving same .

i want to take html data in one variable and print that.

September 23, 2014 at 10:51 am Issue in exporting grid as html #59913

Nadezhda

Participant

Hi sainish,

Here is an example which shows how to take html data in one variable and print the grid:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = generatedata(1);

            var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'date', type: 'date' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' }
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                altrows: true,
                sortable: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 130 },
                  { text: 'Last Name', datafield: 'lastname', width: 130 },
                  { text: 'Product', datafield: 'productname', width: 200 },
                  { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellsalign: 'center', align: 'center' },
                  { text: 'Ship Date', datafield: 'date', width: 120, align: 'right', cellsalign: 'right', cellsformat: 'd' },
                  { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', align: 'right', cellsformat: 'c2' }
                ]
            });

            $("#Print").jqxButton({ theme: theme });
 

            $("#Print").click(function () {
                var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
                var newWindow = window.open('', '', 'width=800, height=500'),
                document = newWindow.document.open(),
                pageContent =
                    '<!DOCTYPE html>\n' +
                    '<html>\n' +
                    '<head>\n' +
                    '<meta charset="utf-8" />\n' +
                    '<title>jQWidgets Grid</title>\n' +
                    '</head>\n' +
                    '<body>\n' + gridContent + '\n</body>\n</html>';
                document.write(pageContent);
                document.close();
                newWindow.print();
            });       

        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
        <div style='margin-top: 20px;'>           
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Print to HTML" id='Print' />               
            </div>
        </div> 
    </div>
</body>
</html>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

September 23, 2014 at 10:55 am Issue in exporting grid as html #59914

sainish

Participant

var test=$(“#jqxgrid”).jqxGrid(‘exportdata’, ‘json’);

this is working json for one row also

only export html is giving error when there is only one row in grid otherwise it is fine

Uncaught TypeError: Cannot read property ‘css’ of undefined
below lines in widget causing issues

if (q == “html” || q == “xls” || q == “pdf”) {
var i = function(O, W, V, P, U, R, Q, S, T) {
n[O] = {};
n[O][“font-size”] = W.css(“font-size”);
n[O][“font-weight”] = W.css(“font-weight”);
n[O][“font-style”] = W.css(“font-style”);
n[O][“background-color”] = R._getexportcolor(W.css(“background-color”));
n[O][“color”] = R._getexportcolor(W.css(“color”));
n[O][“border-color”] = R._getexportcolor(W.css(“border-top-color”));
if (V) {
n[O][“text-align”] = U.align
} else {
n[O][“text-align”] = U.cellsalign;
n[O][“formatString”] = U.cellsformat;
n[O][“dataType”] = L
} if (q == “html” || q == “pdf”) {
n[O][“border-top-width”] = W.css(“border-top-width”);
n[O][“border-left-width”] = W.css(“border-left-width”);
n[O][“border-right-width”] = W.css(“border-right-width”);
n[O][“border-bottom-width”] = W.css(“border-bottom-width”);
n[O][“border-top-style”] = W.css(“border-top-style”);
n[O][“border-left-style”] = W.css(“border-left-style”);
n[O][“border-right-style”] = W.css(“border-right-style”);
n[O][“border-bottom-style”] = W.css(“border-bottom-style”);
if (V) {
if (Q == 0) {
n[O][“border-left-width”] = W.css(“border-right-width”)
}
n[O][“border-top-width”] = W.css(“border-right-width”);
n[O][“border-bottom-width”] = W.css(“border-bottom-width”)
} else {
if (Q == 0) {
n[O][“border-left-width”] = W.css(“border-right-width”)
}
}
n[O][“height”] = W.css(“height”)
}

September 23, 2014 at 11:02 am Issue in exporting grid as html #59915

sainish

Participant

temporary i solved it by modifying plugin js if(W==undefined)return;

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.