jQuery UI Widgets Forums Grid Export to XML

Tagged: , , ,

This topic contains 5 replies, has 2 voices, and was last updated by  Nadezhda 9 years, 7 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Export to XML #62817

    Huseyn
    Participant

    How can i change <table> to <Product> when i export to xml from jqxgrid?

    Export to XML #62843

    Nadezhda
    Participant

    Hello Huseyn,

    Please, find the following example which contains possible solution for changing <table> to <Product>:

    <!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(2);
    
                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,
                    height:200,
                    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' }
                    ]
                });
    
                $("#xmlExport").jqxButton({ });
                $("#xmlExport").click(function () {
                    var gridXMLContent = $("#jqxgrid").jqxGrid('exportdata', 'xml');             
                    gridXMLContent = gridXMLContent.replace('<table>', '<Product>');
                    gridXMLContent = gridXMLContent.replace('</table>', '</Product>');
                    alert(gridXMLContent);                              
                });
            });
        </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 XML" id='xmlExport' />
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    Export to XML #62916

    Huseyn
    Participant

    But this code doesn`t export and I want delete <row> word. Please help

    • This reply was modified 9 years, 7 months ago by  Huseyn.
    Export to XML #62939

    Nadezhda
    Participant

    Hi Huseyn,

    Here is an example which shows how to change ‘<table>’ to ‘<Product>’ and how to delete ‘<row>’ and ‘</row>’ from the string. You can see the result in alert when you click the export button. If you want to export grid’s data with these changes you should find a your own way for exporting.

    <!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(2);
    
                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,
                    height: 200,
                    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' }
                    ]
                });
                $("#xmlExport").jqxButton({});
    
                $("#xmlExport").click(function () {
                    var gridXMLContent = $("#jqxgrid").jqxGrid('exportdata', 'xml');
                    gridXMLContent = gridXMLContent.replace('<table>', '<Product>');
                    gridXMLContent = gridXMLContent.replace('</table>', '</Product>');              
                    var removeRows = '<row>|</row>';
                    var re = new RegExp(removeRows, 'gi');
                    gridXMLContent = gridXMLContent.replace(re, '');             
                    alert(gridXMLContent);                           
                });
            });
        </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 XML" id='xmlExport' />
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Nadezhda

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

    Export to XML #62946

    Huseyn
    Participant

    I need export. It doesn`t export

    Export to XML #62956

    Nadezhda
    Participant

    Hi Huseyn,

    If you want to use the above changes you should find your own way for exporting. Otherwise you can find the following demo which shows how to export data to XML: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/dataexport.htm?arctic.

    Best Regards,
    Nadezhda

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

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

You must be logged in to reply to this topic.