Search code examples
asp.netasp.net-mvcjqgrid-asp.net

when exporting to excel JqGrid,I Get error "TypeError: b.url is null "


I use jqGrid v5.3 in my asp.net MVC Project(Guriddo jqGrid JS - v5.3.0 - 2018-02- 01) grid work in a good way ,every think is good but when I want export grid to excel,I get this error: TypeError: b.url is null how can I solve that?

I using "jquery-2.1.1" and add these scripts to my projects:

    <script src="~/Scripts/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/jqgrid/src/grid.export.js"></script>

and here is my JavaScript code:

 $(document).ready(function () {
        debugger;
    LoadCustomerOrders();
});
function LoadCustomerOrders() {

    //  Make sure IE allows us to load JSON data from the iNorthwind website
    jQuery.support.cors = true;

    //  Load our JSON data, and populate the jqGrid control with it
    $("#tblOrders").jqGrid({
        url: 'http://www.inorthwind.com/Service1.svc/getOrdersForCustomer/BERGS',
        contentType: "application/json",
        datatype: "json",
        data: "{}",
        jsonReader: {
            root: "GetOrdersForCustomerResult",     //arry containing actual data 
            id: "OrderID",                               //index of the column with the PK in it 
            repeatitems: false
        },
        mtype: "GET",
        colNames: ["ID", "Order Date", "Name",
            "Address", "City", "Postcode", "Shipped Date"],
        colModel: [
            { name: "OrderID", width: 70, align: "center", search: false },
            { name: "OrderDate", search: true, width: 100 },
            { name: "ShipName", search: true, width: 120 },
            { name: "ShipAddress", search: true, hidden: true },
            { name: "ShipCity", search: true, width: 200 },
            { name: "ShipPostcode", search: true, width: 140 },
            { name: "ShippedDate", search: true, width: 80, align: "center" }
        ],
        pager: "#pager",
        width: 'auto',
        height: 'auto',
        rowNum: 10,
        rowList: [],
        loadonce: true,
        sortable: true,
        sortname: "OrderID",
        sortorder: "desc",
        viewrecords: true,
        gridview: true,
        autoencode: true,
        ignoreCase: true,   //  Make the "Search" popup search case-insensitive 
        caption: ""
    });

    $('#tblOrders').jqGrid('navGrid', '#pager', {
        search: true,
        searchtext: "Search",  //  Make the Search icon have a "Search" label next to it
        edit: false,
        add: false,
        del: false,
        refresh: false
    },
        {}, // default settings for edit
        {}, // default settings for add
        {}, // delete
        {
            closeOnEscape: true, closeAfterSearch: true, ignoreCase: true, multipleSearch: false, multipleGroup: false, showQuery: false,
            sopt: ['cn', 'eq', 'ne'],
            defaultSearch: 'cn'
        }).navButtonAdd('#pager', {
            caption: "Export to Excel",
            buttonicon: "ui-icon-disk",
            onClickButton: function () {
                ExportDataToExcel("#tblOrders");
            },
            position: "last"
        });
}

function ExportDataToExcel(tableCtrl) {
    //  Export the data from our jqGrid into a "real" Excel 2007 file
   // ExportJQGridDataToExcel(tableCtrl, "CustomerOrders.xlsx");
    var gridData = $("#tblOrders").jqGrid('getRowData');
    var dataToSend = JSON.stringify(gridData);
    jQuery("#tblOrders").jqGrid('excelExport', dataToSend);
}

Solution

  • I think you use not the correct method to export the data to excel using Guriddo jqGrid. You use excelExport, which only send a parameters to the server and expect a export to be done at server. You need to use the exportToExcel method instead. Here is the documentation. Please look at this example

    One more additional note - you do not need to include the grid.export.js file. This file is already included into the jquery.jqGrid.min file which you use.