jQWidgets Forums

jQuery UI Widgets › Forums › Grid › Grid Table Headers and autoRowHeight

Tagged: , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Grid Table Headers and autoRowHeight Posts
  • September 3, 2013 at 5:35 pm Grid Table Headers and autoRowHeight #28254

    adamsada
    Member

    Hi,

    I have an issue whenever I set the grid autorowheight to true that my exported grid to both XLS and HTML will not include the table column headers.

    September 4, 2013 at 9:18 am Grid Table Headers and autoRowHeight #28290

    Peter Stoev
    Keymaster

    Hi adamsada,

    If you experience some kind of issue, then provide a sample which demonstrates it. Also make sure that you report an issue only for the latest version.

    We have tested for the reported issue with the following example (based on the demo Export Data) with jQWidgets version 3.0.2:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/gettheme.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var theme = "";
                // prepare the data
                var data = generatedata(100);
                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: 670,
                    source: dataAdapter,
                    theme: theme,
                    altrows: true,
                    sortable: true,
                    autoheight: true,
                    autorowheight: true,
                    selectionmode: 'multiplecellsextended',
                    columns: [
                      { text: 'First Name', datafield: 'firstname', width: 90 },
                      { text: 'Last Name', datafield: 'lastname', width: 90 },
                      { text: 'Product', datafield: 'productname', width: 177 },
                      { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67, cellsalign: 'center', align: 'center' },
                      { text: 'Ship Date', datafield: 'date', width: 90, align: 'right', cellsalign: 'right', cellsformat: 'd' },
                      { text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right' },
                      { text: 'Price', datafield: 'price', width: 65, cellsalign: 'right', align: 'right', cellsformat: 'c2' }
                    ]
                });
                $("#excelExport").jqxButton({ theme: theme });
                $("#xmlExport").jqxButton({ theme: theme });
                $("#csvExport").jqxButton({ theme: theme });
                $("#tsvExport").jqxButton({ theme: theme });
                $("#htmlExport").jqxButton({ theme: theme });
                $("#jsonExport").jqxButton({ theme: theme });
                $("#excelExport").click(function () {
                    $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid');
                });
                $("#xmlExport").click(function () {
                    $("#jqxgrid").jqxGrid('exportdata', 'xml', 'jqxGrid');
                });
                $("#csvExport").click(function () {
                    $("#jqxgrid").jqxGrid('exportdata', 'csv', 'jqxGrid');
                });
                $("#tsvExport").click(function () {
                    $("#jqxgrid").jqxGrid('exportdata', 'tsv', 'jqxGrid');
                });
                $("#htmlExport").click(function () {
                    $("#jqxgrid").jqxGrid('exportdata', 'html', 'jqxGrid');
                });
                $("#jsonExport").click(function () {
                    $("#jqxgrid").jqxGrid('exportdata', 'json', '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='float: left;'>
                    <input type="button" value="Export to Excel" id='excelExport' />
                    <br />
                    <br />
                    <input type="button" value="Export to XML" id='xmlExport' />
                </div>
                <div style='margin-left: 10px; float: left;'>
                    <input type="button" value="Export to CSV" id='csvExport' />
                    <br />
                    <br />
                    <input type="button" value="Export to TSV" id='tsvExport' />
                </div>
                <div style='margin-left: 10px; float: left;'>
                    <input type="button" value="Export to HTML" id='htmlExport' />
                    <br />
                    <br />
                    <input type="button" value="Export to JSON" id='jsonExport' />
                </div>
            </div>
        </div>
    </body>
    </html>

    Column headers are exported correctly. Note, however, that column header groups are not exported.

    Best Regards,
    Peter Stoev

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

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.