excelpaginationjqgridexport-to-excel

jqGrid export to excel issue when loadonce option is setted to false


I have an ASP.net MVC solution and use jqGrid in it. To have a better performance I use loadonce: false as an option and it should be in this way, unfortunately It seems to be not supported by jqGrid because I cannot find any sign of that throughout my search.

$(document).ready(function () {
    $("#jqGrid").jqGrid(
        {
            url: "/Student/GetStudents",
            mtype: "GET",
            datatype: "json",
            contentType: "application/json; charset-utf-8",

            jsonReader: {
                root: "rows",
                id: "StudentId",
                repeatitems: false
            },
            colNames: ['StudentId', 'FirstName', 'LastName'],
            colModel: [
                { label: 'StudentId', name: 'Id', key: true, width: 75 },
                { label: 'FirstName', name: 'FirstName', width: 150 },
                { label: 'LastName', name: 'LastName', width: 150 },

            ],
            viewrecords: true,
            loadonce: false,
            width: '100%',
            height: 'auto',
            rowNum: 20,
            rowList: [20, 30, 50],
            sortable: true,
            sortname: 'Id',
            pager: "#jqGridPager",

            autoencode: true,
            scroll: false,
            pgbuttons: true,
            autowidth: true,
            shrinkToFit: false,
            forceFit: false,
            gridview: false,
            height: '100%',
            scrollrows: true,
            page: 1,
            //pagerpos: 'center',
            toppager: true,
            recordpos: 'right',
            multiselect: true,
            multiboxonly: true,
            direction: 'rtl',
            ignoreCase: true,
            caption: "",
            rownumbers: true
        });
    $('#jqGrid').jqGrid('navGrid', '#jqGridPager', {
        search: true,
        searchtext: "Search",
        edit: false,
        add: false,
        del: false,
        excel: true,
        refresh: false,

    }, {}, {}, {}, {
        closeOnEscape: true,
        closeAfterSearch: true,
        ignoreCase: true,
        multipleSearch: false,
        multipleGroup: false,
        showQuery: false,
        sopt: ['cn', 'eq', 'ne'],
        defaultSearch: 'cn'
    })
    $('#jqGrid').jqGrid('navButtonAdd', '#jqGridPager', {
        caption: "Export to Excel",
        //buttonicon: "ui-icon-disk",
        buttonicon: "ui-icon-folder-open",
        onClickButton: function () {
            exportToExcel();
        },

    });
});
function exportToExcel(data, e) {
    exportExcelFile(data);
}


function exportExcelFile() {
    debugger;

    var data = $('#jqGrid')[0].addLocalData(true);
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE");
    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) {
        frame1.document.open("txt/html", "replace");
        frame1.document.write(setTableOfData(data));
        frame1.document.close();
        frame1.focus();
        sa = frame1.document.execCommand("SaveAs", true, "text.xls");
    } else
        $('#jqGrid').jqGrid('exportToExcel', { fileName: "exportedExcel.xls", navigator: true });
}

function setTableOfData(data) {
    var htmlString = '<table>';
    var header = '<tr><td>StudentId</td><td>FirstName</td><td>LastName</td></tr>';
    htmlString += header;
    for (var i = 0; i < data.length; i++) {
        var tag = '<tr><td>' + data[i].Id + '</td><td>' + data[i].FirstName + '</td><td>' + data[i].LastName + '</td></tr>';
        htmlString += tag;
    }
    htmlString += '</table>';
    return htmlString;
}

Solution

  • Finally, I forced to post all the filtering and other settings of the grid to the server and return a link to the client. Then with the given link I became able to download the excel file. Info: you can not download a file with post(ajax) request.