jQWidgets Forums

Tagged: Button, export, Exportdata, footer, grid, jqxgrid, renderstatusbar, showStatusBar, statusbar

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years ago.

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

Author

Export button in footer Posts

March 20, 2015 at 7:24 pm Export button in footer #68920

NickBurns

Participant

I would like to put my Excel export button in the footer of the grid instead of below the grid. Is that possible?

thx!

March 21, 2015 at 7:17 am Export button in footer #68931

Dimitar

Participant

Hello NickBurns,

This is possible. Here is how to achieve it:

<!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.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.export.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var getAdapter = function () {
                // prepare the data
                var data = generatedata(15);

                var source =
                {
                    localdata: data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'available', type: 'bool' }
                    ],
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command
                        // call commit with parameter true if the synchronization with the server is successful
                        // and with parameter false if the synchronization failed.
                        commit(true);
                    }
                };

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

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: getAdapter(),
                showstatusbar: true,
                renderstatusbar: function (statusbar) {
                    // appends buttons to the status bar.
                    var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                    var exportButton = $("<button>Export</button>");
                    container.append(exportButton);
                    statusbar.append(container);
                    exportButton.jqxButton({ width: 60, height: 20 });
                    // add new row.
                    exportButton.click(function (event) {
                        $("#jqxgrid").jqxGrid('exportdata', 'xls', 'jqxGrid', false);
                    });
                },
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 120 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 120 },
                  { text: 'Product', datafield: 'productname', width: 170 },
                  { text: 'In Stock', datafield: 'available', columntype: 'checkbox', width: 125 },
                  { text: 'Quantity', datafield: 'quantity', width: 85, cellsalign: 'right', cellsformat: 'n2' },
                  { text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Dimitar

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.