jQWidgets Forums

Tagged: #jqwidgets-grid, grid, javascript grid, jquery grid, jqxgrid print

This topic contains 3 replies, has 2 voices, and was last updated by Hristo 8 years, 2 months ago.

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

Author

grid print converting integer to decimal Posts

February 24, 2017 at 9:49 pm grid print converting integer to decimal #91869

Participant

Hi,

When we print a grid having a column with interger values, in the print window its showing those numbers as decimals.
You can see this issue even in the jqxgrid print demo where the quantity column values are integer in the grid but show as decimals in the print window,

Thanks,
Shakeel

February 24, 2017 at 10:59 pm grid print converting integer to decimal #91871

shakeel

Participant

I found that having the cellsformat atrribute set to ‘n’ in the grid layout for that particular column will render it in integer both in th grid as well as the print window.

February 24, 2017 at 11:30 pm grid print converting integer to decimal #91872

shakeel

Participant

However, if we think about it I still see the issue. Why is it displaying as an integer in the grid and as a decimal in the print window. Shouldn’t it be the same? Not sure why the link isn’t showing up in my first post.

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/printing.htm

March 1, 2017 at 11:05 am grid print converting integer to decimal #92003

Hristo

Participant

Hello shakeel,

Thank you for the interest to our widget.
You could add cellsformat: 'n' member to this particular column.
Please, take a look at this example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>The following example shows how to get the Grid's HTML, add it to a new browser window and trigger printing.</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(10);

            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,
                autoheight: true,
                source: dataAdapter,                
                altrows: true,
                sortable: true,
                selectionmode: 'multiplecellsextended',
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 120 },
                  { text: 'Last Name', datafield: 'lastname', width: 120 },
                  { text: 'Product', datafield: 'productname', width: 177 },
                  { 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', cellsformat: 'n', cellsalign: 'right' },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', align: 'right', cellsformat: 'c2' }
                ]
            });

           $("#print").jqxButton();
         
            $("#print").click(function () {
                var gridContent = $("#jqxgrid").jqxGrid('exportdata', 'html');
                console.log(gridContent);
                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" id='print' />
            </div>
        </div>
    </div>
</body>
</html>

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.