jQWidgets Forums

Forum Replies Created

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

Author

Posts

April 23, 2014 at 11:45 am in reply to: Export giving error 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 10:51 am in reply to: Export giving error 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 5:34 am in reply to: Create jqGrid Column Dynamically Create jqGrid Column Dynamically #53454

N_Cool

Participant

Hello anandbabu,

Thank you for reply it’s help me understanding solution for my problem.

Author

Posts

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