Exporting Grid data to excel

Question

I am new to jq grid and got some code to bind data. With the help of internet I was able to bind the data but I have an option to add export button to the grid that can export the present data of grid to the Excel. There are many code available but I am not getting it in right way. Please direct me..

 var bindReports = function () {
                $('#list1').jqGrid('GridUnload');
                $("#list1").jqGrid({
                    url: "GetReportDetails",
                    postData: { startDate: $('#startDate').val(), endDate: $('#endDate').val(), ins_Type: $("#InsuranceType").val(), ass_Clincian: $("#ddlAssignedClician").val() },
                    datatype: "json",
                    mtype: "POST",
                    colNames: ["ID", "First Name", "Last Name", "Date Of Birth", "Date of Intake", "Insurance Type", "Insurance company", "Assigned Clinician"],
                    colModel: [
                            { name: "ID", index: "ID", hidden: true, key: true },
                            { name: "FirstName", index: "FirstName", width: 40, align: "left", sortable: true, formatter: 'showlink', formatoptions: { baseLinkUrl: 'javascript:', showAction: "Link('", addParam: "');" } },
                            { name: "LastName", index: "LastName", width: 40, align: "left", sortable: true, formatter: 'showlink', formatoptions: { baseLinkUrl: 'javascript:', showAction: "Link('", addParam: "');" } },
                            { name: "DOB", index: "DOB", width: 40, align: "left", formatter: 'date', sorttype: "date", sortable: true },
                            { name: "DOI", index: "DOI", width: 40, align: "left", formatter: 'date', sorttype: "date", sortable: true },
                            { name: "IT", index: "IT", width: 40, align: "left", sortable: true },
                            { name: "IC", index: "IC", width: 50, align: "left", sortable: true },
                            { name: "AC", index: "AC", width: 50, align: "left", sortable: true }],
                    // Grid total width and height
                    //multiselect: true, for checkboxes in first column to select 
                    rowNum: 20,
                    rowList: [5, 10, 15, 20],
                    width: 900,
                    height: "100%",
                    // Paging
                    pager: $("#pager1"),
                    viewrecords: true,

                    // Default sorting
                    //sortname: "FirstName",
                    sortorder: "asc",
                    sortable: true,
                    loadonce: true,
                    hidegrid: false,
                    // Grid caption
                    caption: "Reports List"
                }).navGrid("#pager1", { refresh: false, add: false, edit: false, del: false }, {}, // settings for edit
                                                                                              {}, // settings for add
                                                                                              {}, // settings for delete
                                                                                              { sopt: ["cn"] } // Search options. Some options can be set on column level
                    );
            }

score 0 · Answer 1 · edited May 23 '17 at 11:59

There are different approaches of implementations of the Excel import. Someone get the data from the grid and sent it to the server, then the server generate Excel and returns it back. In my opinion one should better don't send any additional data to the server. Instead of that the server should directly generate Excel import based on postData. The answer demonstrates how one can generate XLSX file and another answer provides the demo with an implementation of the export in ASP.NET MVC.

Exporting Grid data to excel

1 Answers1