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);
}
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.