jQWidgets Forums

This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 11 years, 2 months ago.

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

Author

Export giving error Posts

April 23, 2014 at 10:10 am Export giving error #53470

N_Cool

Participant

Hello Everyone,

when i try to export data from my grid it’s giving me java script error “Uncaught TypeError: object is not a function ” on jqx-all.js file.
but the same line of code work well on demo which i am created for testing.
where i am doing wrong.

$("#xls").click(function () {        
        $("#tableContainer").jqxGrid('exportdata', 'xls', 'Demo Report');        
    });

Please help me out.

April 23, 2014 at 10:31 am Export giving error #53472

Peter Stoev

Keymaster

Hi N_Cool,

Would you be able to send a small sample which reproduces the behavior?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 23, 2014 at 10:51 am Export giving error #53475

N_Cool

Participant

Hi Peter Stove,

As i mention above post that in my demo code is working well and export data.

I am posting my code at here which giving me error.
In demo data comes from xml file here my column list and data comes from server through ajax call.
Grid is render in proper way but exporting is not working.

<script type="text/javascript" src="~/Scripts/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="~/Scripts/jqwidgets/styles/jqx.summer.css" type="text/css" />

<div style="overflow:scroll;width:100%;">

    <input type="button" value="Export to Excel" id="XLS" />
    <input type="button" value="Print" id="print" />
    <div id="tableContainer" > </div>  
</div>

<script>
    var columnList;
    var DataFieldList;
    var GridData;

    $(document).ready(function () {
        $.ajax({
            url: '@Url.Action("GetColName", "Home")',
             type: "POST",
             dataType: "json",
             success: function (data) {
                 columnList = data;
                 derf();                 
             }
        });

    });

   
    function derf() {       
        var coll= new Array();
        var dataFieldColumns = [];        
        coll = columnList;

        for (var i = 0; i < coll.length; i++)
        {
            var colStr = $.trim(coll[i].datafield);
            var dtype = $.trim(coll[i].datatype);
            dataFieldColumns.push({ name: colStr, type: dtype });

        }
        var url= '@Url.Action("GetData", "Home")';
        var source =
        {  
            datatype: "json",
            datafields: dataFieldColumns
            cache: false,
            url: url
        };

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

        $("#tableContainer").jqxGrid(
             {
                 source: dataAdapter,
                 width:900,
                 sortable: true,
                 altrows: true,
                 showaggregates: true,
                 theme: 'summer',
                 showstatusbar: true,
                 statusbarheight: 50,
                 filterable: true,
                 showfilterrow: true,
                 columnsresize: true,
                 columns: coll,
                 groupable: true,
             });
    }
    $("#print").click(function () {
        var gridContent = $("#tableContainer").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>Demo</title>\n' +
            '</head>\n' +
            '<body>\n' + gridContent + '\n</body>\n</html>';
        document.write(pageContent);
        document.close();
        newWindow.print();
    });

    $("#XLS").click(function () {       
        $("#tableContainer").jqxGrid('exportdata', 'xls', 'Report')
       
    });

</script>

April 23, 2014 at 11:13 am Export giving error #53476

Peter Stoev

Keymaster

Hi N_Cool,

I noticed 2 problems in this jQuery Grid initialization code.

1. The following should be defined within your derf function, not outside.

  $("#print").click(function () {
        var gridContent = $("#tableContainer").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>Demo</title>\n' +
            '</head>\n' +
            '<body>\n' + gridContent + '\n</body>\n</html>';
        document.write(pageContent);
        document.close();
        newWindow.print();
    });

    $("#XLS").click(function () {       
        $("#tableContainer").jqxGrid('exportdata', 'xls', 'Report')
       
    });

2. Syntax Error: groupable: true, – remove the ,

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

April 23, 2014 at 11:45 am Export giving error #53480

N_Cool

Participant

Hi Peter Stove,

Now my derf() function has following definition but the problem is remain same. When i click export buttons, java script error Uncaught TypeError: object is not a function thrown at jqx-all.js.

function derf() {       
        var coll= new Array();

        var dataFieldColumns = [];
        data = JSON.parse( GridData );
        coll = columnList;

        for (var i = 0; i < coll.length; i++)
        {
            var colStr = $.trim(coll[i].datafield);
            var dtype = $.trim(coll[i].datatype);
            dataFieldColumns.push({ name: colStr, type: dtype });
        }
        var url= '@Url.Action("GetData", "Home")';
        var source =
        {                       
            datatype: "json",
            datafields: dataFieldColumns,           
            cache: false,
            url: url
        };
        var dataAdapter = new $.jqx.dataAdapter(source);

        $("#tableContainer").jqxGrid(
             {
                 source: dataAdapter,
                 width:900,
                 sortable: true,
                 altrows: true,
                 showaggregates: true,
                 theme: 'summer',
                 showstatusbar: true,
                 statusbarheight: 50,
                 filterable: true,
                 //showfilterrow: true,
                 columnsresize: true,
                 columns: coll,
                 groupable: true,

                 showtoolbar: true,
                rendertoolbar: function (toolbar) {
                    var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                    var clearFilter = $("<div style='float: left; margin-right: 5px;'>Clear Filter</div>");
                    var exptPrint = $("<div style='float: right; margin-right: 5px;'>Print</div>");
                    var exptHTML = $("<div style='float: right; margin-right: 5px;'>HTML</div>");
                    var exptCSV = $("<div style='float: right; margin-right: 5px;'>CSV</div>");
                    var exptXML = $("<div style='float: right; margin-right: 5px;'>XML</div>");
                    var exptXLS = $("<div style='float: right; margin-right: 5px;'>XLS</div>");

                    //container.append(clearFilter);
                    container.append(exptPrint);
                    container.append(exptXLS);
                    container.append(exptHTML);
                    container.append(exptCSV);
                    container.append(exptXML);

                    toolbar.append(container);

                    clearFilter.jqxButton({ width: 70, height: 15, theme: 'ui-start', });
                    exptPrint.jqxButton({ width: 50, height: 15, theme: 'ui-start', });
                    exptHTML.jqxButton({ width: 55, height: 15, theme: 'ui-start', });
                    exptCSV.jqxButton({ width: 50, height: 15, theme: 'ui-start', });
                    exptXML.jqxButton({ width: 50, height: 15, theme: 'ui-start', });
                    exptXLS.jqxButton({ width: 50, height: 15, theme: 'ui-start', });

                    clearFilter.click(function () {
                        $("#tableContainer").jqxGrid('clearfilters');
                    });
                    exptXLS.click(function () { $("#tableContainer").jqxGrid('exportdata', 'xls', 'Report'); });
                    exptHTML.click(function () { $("#tableContainer").jqxGrid('exportdata', 'html', 'Report'); });
                    exptPrint.click(function () {
                        var gridContent = $("#tableContainer").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>Demo Grid</title>\n' +
                            '</head>\n' +
                            '<body>\n' + gridContent + '\n</body>\n</html>';
                        document.write(pageContent);
                        document.close();
                        newWindow.print();
                    });
                    exptCSV.click(function () { $("#tableContainer").jqxGrid('exportdata', 'csv', 'Report'); });
                    exptXML.click(function () { $("#tableContainer").jqxGrid('exportdata', 'xml', 'Report'); });
                }
             });
    }

April 23, 2014 at 12:15 pm Export giving error #53484

Peter Stoev

Keymaster

Hi N_Cool,

Sorry, but I can’t reproduce such error by testing this latest code locally.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example illustrates the Grid filtering feature. Enter some data into the Filter Row.</title>
    <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="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            derf();
        });
        function derf() {
            var coll = new Array();

            coll = [{ text: "Column 1", datafield: "datafield1" }];

            var source =
            {
                datatype: "json",
                datafields: [{ name: "datafield1", type: "string" }],
                cache: false,
                localdata: [{"datafield1": "123"}]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#tableContainer").jqxGrid(
               {
                   source: dataAdapter,
                   width: 900,
                   sortable: true,
                   altrows: true,
                   showaggregates: true,
                   theme: 'summer',
                   showstatusbar: true,
                   statusbarheight: 50,
                   filterable: true,
                   columnsresize: true,
                   columns: coll,
                   groupable: true,
                   showtoolbar: true,
                   rendertoolbar: function (toolbar) {
                       var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
                       var clearFilter = $("<div style='float: left; margin-right: 5px;'>Clear Filter</div>");
                       var exptPrint = $("<div style='float: right; margin-right: 5px;'>Print</div>");
                       var exptHTML = $("<div style='float: right; margin-right: 5px;'>HTML</div>");
                       var exptCSV = $("<div style='float: right; margin-right: 5px;'>CSV</div>");
                       var exptXML = $("<div style='float: right; margin-right: 5px;'>XML</div>");
                       var exptXLS = $("<div style='float: right; margin-right: 5px;'>XLS</div>");

                       //container.append(clearFilter);
                       container.append(exptPrint);
                       container.append(exptXLS);
                       container.append(exptHTML);
                       container.append(exptCSV);
                       container.append(exptXML);

                       toolbar.append(container);

                       clearFilter.jqxButton({ width: 70, height: 15, theme: 'ui-start', });
                       exptPrint.jqxButton({ width: 50, height: 15, theme: 'ui-start', });
                       exptHTML.jqxButton({ width: 55, height: 15, theme: 'ui-start', });
                       exptCSV.jqxButton({ width: 50, height: 15, theme: 'ui-start', });
                       exptXML.jqxButton({ width: 50, height: 15, theme: 'ui-start', });
                       exptXLS.jqxButton({ width: 50, height: 15, theme: 'ui-start', });

                       clearFilter.click(function () {
                           $("#tableContainer").jqxGrid('clearfilters');
                       });
                       exptXLS.click(function () { $("#tableContainer").jqxGrid('exportdata', 'xls', 'Report'); });
                       exptHTML.click(function () { $("#tableContainer").jqxGrid('exportdata', 'html', 'Report'); });
                       exptPrint.click(function () {
                           var gridContent = $("#tableContainer").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>Demo Grid</title>\n' +
                               '</head>\n' +
                               '<body>\n' + gridContent + '\n</body>\n</html>';
                           document.write(pageContent);
                           document.close();
                           newWindow.print();
                       });
                       exptCSV.click(function () { $("#tableContainer").jqxGrid('exportdata', 'csv', 'Report'); });
                       exptXML.click(function () { $("#tableContainer").jqxGrid('exportdata', 'xml', 'Report'); });
                   }
               });
        }
    </script>
</head>
<body class='default'>
    <div id="tableContainer">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.