jQWidgets Forums

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts
  • June 5, 2015 at 10:12 am in reply to: Export jqxgrid to excel Export jqxgrid to excel #72076

    manojjoon
    Participant

    hii Dimitar,

    i tried to generate export to excel but shows error on click as save-file.php
    if i will took as local variable it will return data in xml format and could not able to save it also.

    Please help my code is below

    @{
    ViewBag.Title = "Export";
}

<html lang="en">
<head>
    <title id='Description'>With jqxGrid, you can export your data to Excel, XML, CSV, TSV, JSON, PDF and HTML.</title>
    <link href="../../Content/jqwidgets/styles/jqx.base.css" rel="stylesheet" type="text/css" />
    <script src="../../Content/js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="../../Content/jqwidgets/jqxcore.js" type="text/javascript"></script>
    <script src="../../Content/jqwidgets/jqxbuttons.js" type="text/javascript"></script>
    <script src="../../Content/jqwidgets/jqxscrollbar.js" type="text/javascript"></script>
    <script src="../../Content/jqwidgets/jqxmenu.js" type="text/javascript"></script>
    <script src="../../Content/jqwidgets/jqxcheckbox.js" type="text/javascript"></script>
    <script src="../../Content/jqwidgets/jqxgrid.js" type="text/javascript"></script>
    <script src="../../Content/jqwidgets/jqxgrid.selection.js" type="text/javascript"></script>
    <script src="../../Content/jqwidgets/jqxgrid.columnsresize.js" type="text/javascript"></script>
    <script src="../../Content/jqwidgets/jqxdata.js" type="text/javascript"></script>
    <script src="../../Content/jqwidgets/jqxdata.export.js" type="text/javascript"></script>
    <script src="../../Content/jqwidgets/jqxgrid.export.js" type="text/javascript"></script>
    <script src="../../Content/jqwidgets/jqxgrid.sort.js" type="text/javascript"></script>
    <script src="../../Scripts/tableExport.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.base64.js" type="text/javascript"></script>
    <script src="../../Scripts/html2canvas.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
					 { name: 'regid', type: 'int' },
					 { name: 'fname', type: 'string' },
					 { name: 'lname', type: 'string' },
					 { name: 'sex', type: 'string' },
					 { name: 'profession', type: 'string' },
                     { name: 'dob', type: 'date' },
                     { name: 'emailid', type: 'string' },
                     { name: 'contactno', type: 'string' },
                     { name: 'username', type: 'string' },
                     { name: 'address', type: 'string' },
                     { name: 'state', type: 'string' },
                     { name: 'city', type: 'string' },
                     { name: 'pincode', type: 'string' },
                ],
                url: 'Employee/GetEmployees'
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#grid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                columns: [
                    { text: "regid", datafield: "regid" },
                    { text: "fname", datafield: "fname" },
                    { text: "lname", datafield: "lname" },
                    { text: "sex", datafield: "sex" },
                    { text: "profession", datafield: "profession" },
                    { text: "dob", datafield: "dob" },
                    { text: "emailid", datafield: "emailid" },
                    { text: "contactno", datafield: "contactno" },
                    { text: "username", datafield: "username" },
                    { text: "address", datafield: "address" },
                    { text: "state", datafield: "state" },
                    { text: "city", datafield: "city" },
                    { text: "pincode", datafield: "pincode" }
                ]
            });
            $("#excelExport").jqxButton({ theme: 'energyblue' });
            $("#xmlExport").jqxButton();
            $("#csvExport").jqxButton();
            $("#tsvExport").jqxButton();
            $("#htmlExport").jqxButton();
            $("#jsonExport").jqxButton();
            $("#pdfExport").jqxButton();

           
            var exportInfo;
            $("#excelExport").click(function () {
                exportInfo = $("#grid").jqxGrid('exportdata', 'xls');
            });

            $("#xmlExport").click(function () {
                $("#grid").jqxGrid('exportdata', 'xml', 'grid');
            });
            $("#csvExport").click(function () {
                $("#grid").jqxGrid('exportdata', 'csv', 'grid');
            });
            $("#tsvExport").click(function () {
                $("#grid").jqxGrid('exportdata', 'tsv', 'grid');
            });
            $("#htmlExport").click(function () {
                $("#grid").jqxGrid('exportdata', 'html', 'grid');
            });
            $("#jsonExport").click(function () {
                $("#grid").jqxGrid('exportdata', 'json', 'grid');
            });
            $("#pdfExport").click(function () {
                $("#grid").jqxGrid('exportdata', 'pdf', 'grid');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="grid"></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 style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to PDF" id='pdfExport' />
            </div>
        </div>
    </div>
</body>
</html>
  • Author
    Posts
Viewing 1 post (of 1 total)