Author Topic: Export to Excel  (Read 2011 times)

Chris

  • Pro Ultimate
  • Newbie
  • *
  • Posts: 7
    • View Profile
Export to Excel
« on: October 08, 2020, 09:44:15 pm »
I am trying to create an Excel export, it is only loading the records visible on the parent grid as well as the colModel (Header) of nested/child grid without their records.
What is happing on the first click of the export button it will download the file with just the parent grid records and if I click the export button a second time it downloads the complete data (include nested/child grid records).
As per my understanding Excel is created before nested/child grid data is being loaded. Any suggestions?

Here is the actual code.
Code: [Select]
SearchTerminalDetails: function (event) {

        function getDetail(grid, rd) {
            var detail = rd.pq_detail = rd.pq_detail || {};           
            detail.child = detail.child || $("<div></div>").pqGrid(childGrid(grid, rd));
            return detail.child;
        }
       
        function exportData() {     
            var grid = this;   
                w = grid.exportExcel({ workbook: true, render: true }),
                wrows = w.sheets[0].rows,
                rows = [],
                i = 0,
                loading = grid.option('strLoading'),
                pdata = grid.pageData();

            grid.showLoading();
            rows.push(wrows[0]);//parent header row.

            var id = setInterval(function () {               
                var rd = pdata[i];
                if (rd) {                   
                    rows.push(wrows[i + 1]);//parent data row.   
                   
                    var $detail = getDetail(grid, rd),
                        w2 = $detail.pqGrid('instance').exportExcel({
                            workbook: true,
                            render: true
                        });                   

                    w2.sheets[0].rows.forEach(function (rd2) {
                        //shift all cells to the right.
                        rd2.cells.forEach(function (cell) {
                            if (cell.indx != null)
                                cell.indx++;
                        })
                        //and add empty cell at beginning of every row.
                        rd2.cells.unshift({});
                        rows.push(rd2)
                    })

                    i++;
                    grid.option('strLoading', Math.round(i * 100 / pdata.length) + "%")

                }
                else {
                    clearInterval(id);
                    w.sheets[0].rows = rows;                   
                    var blob = pq.excel.exportWb({ workbook: w, type: 'blob' });//export 1st workbook into Excel file.
                    saveAs(blob, "Demo.xlsx");
                    grid.hideLoading();
                    grid.option('strLoading', loading);
                }
            });
        }

                                var colModel = [
                                                { title: "", minWidth: 1, width: 1, type: "detail", resizable: false, editable: false, copy: false },
                                                {
                                                                title: "Column 1": 100, dataType: "string", align: "left", dataIndx: "Name",
                                                                filter: { crules: [{ condition: 'contain' }], listeners: ['keyup'] }
                                                },
                                                {
                                                                title: "Column 2", width: 100, dataType: "date", align: "left", dataIndx: "Address",
                                                                filter: { crules: [{ condition: 'contain' }], listeners: ['keyup'] }
                                                }
                                ];

                                var dataModel = {
                                                location: "remote",
                                                sorting: "local",
                                                sortIndx: ["Port"],
                                                sortDir: ["up"],
                                                method: "GET",             
                                                getUrl: function () {
                                                                var data;
                                                                // serialize our search criteria
                                                                $("#searchSCS").serializeArray().map(function (x) {
                                                                                data = data == null ? (x.name + "=" + x.value) : (data + "&" + x.name + "=" + x.value);
                                                                });
                                                                return {
                                                                                url: "some path.." + "?" + data
                                                                }
                                                },
                                                getData: function (response) {
                                                                var data = response.data;
                                                                                                                   
                                                                return { curPage: response.curPage, totalRecords: response.totalRecords, data: data };
                                                }
                                };
           
                                $("MainGrid").pqGrid({
                                                colModel: colModel,
                                                dataModel: dataModel,
                                                height: $(document).height() * 0.40,
                                                scrollModel: { autoFit: true, flexContent: true },
                                                resizable: true,
                                                selectionModel: { type: 'cell' },
                                                hoverMode: 'row',
                                                title: '<b></b>',
                                                stripeRows: true,
                                                columnBorders: true,
                                                showTop: false,
                                                showBottom: false,
                                                roundCorners: false,
                                                numberCell: { show: false },
                                                flex: { on: true },
                                                showTop: true,
                                                filterModel: {
                                                                on: true,
                                                                mode: "AND",
                                                                header: true,
                                                                menuIcon: true
                                                },
                                                menuUI: {
                                                                tabs: ['filter'] //display only filter tab.
                                                },
                                                editable: false,
                                                detailModel: {
                                                                cache: true,
                                                                collapseIcon: "ui-icon-plus",
                                                                expandIcon: "ui-icon-minus",
                                                                init: function (ui) {

                                                                                var rowData = ui.rowData,
                                                                                                detailobj = childGrid($(this).pqGrid('instance'), rowData),
                                                                                                $grid = $("<div></div>").pqGrid(detailobj); //init the detail grid.

                                                                                return $grid;
                                                                }
                                                },
                                                load: function (event, ui) {
                                                                CMN.utility.updateRecordsFound(ui);
                                                                if (ui.dataModel.data.length == 0) {
                                                                                this.$summary[0].style.display = 'none';
                                                                }
                                                                else {
                                                                                this.$summary[0].style.display = 'block';
                                                                }

                                                                this.refreshCM(colModel);
                                                },
                                                toolbar: {
                                                                items: [   
                                                                                {
                                                                                                type: 'button',
                                                                                                label: 'Export',
                                                                                                listener: exportData                   
                                                                                }
                                                                ]
                                                }
                                });
                                var childGrid = function (gridMain, rowData) {
                                                return {
                                                                width: "auto",
                                                                pageModel: { type: "local", rPP: 100, strRpp: "" },
                                                                showTop: false,
                                                                showBottom: false,
                                                                scrollModel: { autoFit: false, flexContent: true },
                                                                trackModel: { on: true },
                                                                sortModel: {
                                                                                sorter: [{ dataIndx: 'PrimaryId', dir: "up" }]
                                                                },
                                                                showHeader: true,
                                                                columnBorders: true,
                                                                groupModel: {
                                                                                on: true,
                                                                                grandSummary: true
                                                                },
                                                                selectionModel: { type: 'cell' },
                                                               
                                                                colModel: [           
                                                                                { title: "Contact", width: '10%', dataType: "string", style: "padding:3px 10px;", dataIndx: "Contact", align: "left"},
                                                                                { title: "Address", width: '10%', dataType: "string", dataIndx: "Address", align: "left", editable: false }       
                                                                ],
                                                                dataModel: {
                                                                                location: "remote",
                                                                                sorting: "local",
                                                                                sortIndx: ["Region"],
                                                                                sortDir: ["up"],
                                                                                method: "GET",
                                                                                dataType: "JSON",
                                                                                error: function () {
                                                                                                gridMain.rowInvalidate({ rowData: rowData });
                                                                                },
                                                                                url: "Some path..",
                                                                                getData: function (response) {   
                                                                                                var data = response.data;                                                                                            /
                                                                                                return { curPage: response.curPage, totalRecords: response.totalRecords, data: data };
                                                                                }
                                                                },
                                                                wrap: false,
                                                                hwrap: true,
                                                                refresh: function (evt, ui) {
                                                                                //refresh colModel after show/hide columns for grouped columns.
                                                                                $(".selector").pqGrid("option", "colModel", colModel);

                                                                },
                                                                //flex: { one: true },
                                                                height: "flex",
                                                                numberCell: { show: false },
                                                                title: "<b></b>"
                                                };
                                };   
    }


paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 5791
    • View Profile
Re: Export to Excel
« Reply #1 on: October 08, 2020, 11:51:24 pm »
https://paramquery.com/pro/demos/export_detail

Export to Excel assumes local data of nested grids and doesn't work in case of lazy loading of nested grids.