Show Posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.


Topics - Chris

Pages: [1]
1
ParamQuery Pro Evaluation Support / 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>"
                                                };
                                };   
    }


2
Bug Report / Issue with Column header wrap on sorted columns
« on: January 03, 2019, 10:32:32 pm »
Column Header Wrap not working correctly when column has a 'Sort'.

Actual Header wrapping is working.  However if the column has a 'Sort' which results in the direction arrow and/or sort order wrapping it is being cut off.  If I resize any column, it sorts itself out.  The issue is the absolute positioning of the filter row and results grid relative to the header row.  It seems like the position is calculated before the sort and wrap is applied.  It does adjust if the column header label is wrapped so it is just a result of the Sort.

Pages: [1]