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.


Messages - vijay

Pages: [1] 2 3 ... 8
1
Help for ParamQuery Pro / Wrap Content Behaviour
« on: June 17, 2026, 06:54:45 pm »
Hello Paramveer,

We are using the Wrap Content functionality in the ParamQuery Grid. We have observed that when we deselect the Wrap Content option, the row unwraps; however, some rows are not refreshed properly.

Kindly check the attached file for your reference. Also, please review the code provided below.

Check the 5th row in the Screenshot.

var data = [{
        rank: 1,
        company: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
        revenues: 339938.0,
        profits: 36130.0
    },
    {
        rank: 2,
        company: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
        revenues: 315654.0,
        profits: 11231.0
    },
    {
        rank: 3,
        company: 'Royal Dutch Shell',
        revenues: 306731.0,
        profits: 25311.0
    },
    {
        rank: 4,
        company: 'BP',
        revenues: 267600.0,
        profits: 22341.0
    },
    {
        rank: 5,
        company: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
        revenues: 192604.0,
        profits: -10567.0
    },
    {
        rank: 6,
        company: 'Chevron',
        revenues: 189481.0,
        profits: 14099.0
    },
    {
        rank: 7,
        company: 'DaimlerChrysler',
        revenues: 186106.3,
        profits: 3536.3
    },
    {
        rank: 8,
        company: 'Toyota Motor',
        revenues: 185805.0,
        profits: 12119.6
    },
    {
        rank: 9,
        company: 'Ford Motor',
        revenues: 177210.0,
        profits: 2024.0
    },
    {
        rank: 10,
        company: 'ConocoPhillips',
        revenues: 166683.0,
        profits: 13529.0
    },
    {
        rank: 11,
        company: 'General Electric',
        revenues: 157153.0,
        profits: 16353.0
    },
    {
        rank: 12,
        company: 'Total',
        revenues: 152360.7,
        profits: 15250.0
    },
    {
        rank: 13,
        company: 'ING Group',
        revenues: 138235.3,
        profits: 8958.9
    },
    {
        rank: 14,
        company: 'Citigroup',
        revenues: 131045.0,
        profits: 24589.0
    },
    {
        rank: 15,
        company: 'AXA',
        revenues: 129839.2,
        profits: 5186.5
    },
    {
        rank: 16,
        company: 'Allianz',
        revenues: 121406.0,
        profits: 5442.4
    },
    {
        rank: 17,
        company: 'Volkswagen',
        revenues: 118376.6,
        profits: 1391.7
    },
    {
        rank: 18,
        company: 'Fortis',
        revenues: 112351.4,
        profits: 4896.3
    },
    {
        rank: 19,
        company: 'Crédit Agricole',
        revenues: 110764.6,
        profits: 7434.3
    },
    {
        rank: 20,
        company: 'American Intl. Group',
        revenues: 108905.0,
        profits: 10477.0
    }
];

function items() {
    return [{
            name: "Wrap",
            disabled: (this.Selection().style("white-space") == "normal"),
            action: function() {
                this.Selection().style("white-space", "normal");
            }
        },
        {
            name: "No wrap",
            disabled: (this.Selection().style("white-space") == "nowrap"),
            action: function() {
                this.Selection().style({
                    "white-space": "nowrap",
                    "text-overflow": "ellipsis",
                    "overflow": "hidden"
                });
            }
        }
    ];
}

var obj = {
    width: "80%",
    height: 400,
    resizable: true,
    title: "Grid From JSON",
    showBottom: false,
    showTitle: false,
    scrollModel: {
        autoFit: true
    },
    dataModel: {
        data: data
    },
    colModel: [{
            title: "Rank",
            width: 100,
            dataType: "integer",
            dataIndx: "rank"
        },
        {
            title: "Company with very very very very very very very very very long title",
            width: 220,
            dataType: "string",
            dataIndx: "company"
        },
        {
            title: "Revenues",
            width: 180,
            dataType: "float",
            dataIndx: "revenues",
            styleHead: {
                'font-style': 'italic'
            }
        },
        {
            title: "Profits",
            width: 160,
            dataType: "float",
            dataIndx: "profits"
        }
    ],
    toolbar: {
        style: 'text-align:center;',
        items: [{
                type: 'checkbox',
                value: true,
                label: 'Wrap for all body cells',
                listener: function(evt) {
                    this.option('wrap', evt.target.checked);
                    this.refresh();
                }
            },
            {
                type: 'checkbox',
                label: 'Wrap for all header cells',
                listener: function(evt) {
                    this.option('hwrap', evt.target.checked);
                    this.refresh();
                }
            },
            {
                type: 'fullscreen'
            }
        ]
    },
    contextMenu: {
        on: true,
        cellItems: items
    }
};

pq.grid("#grid_json", obj);

2
Help for ParamQuery Pro / Change background color for Editable cells
« on: June 03, 2026, 05:36:23 pm »
We want to apply a background color to editable cells and implement this logic at a generic level rather than configuring it for each individual grid.

In pqGrid, the `editable` property can be defined in two ways:

1. Directly as `true`
   editable: true

2. Conditionally based on row data

   editable: function (ui) {
       if (ui.rowData.isLocked == 1) {
           return true;
       }
       return false;
   }

Could you please suggest a generic approach to identify editable cells and apply a background color accordingly, regardless of how the `editable` property is defined?

3
Help for ParamQuery Pro / Export with Summary and Pagination
« on: February 13, 2026, 06:24:55 pm »
Hello Paramveer,

I am using PQGrid with the latest V11 version.

I am encountering an issue when exporting a grid that has pagination enabled along with a summary column.

For example, the grid contains 250 records and pagination is configured to display 20 records per page. The summary is calculated based on the current page (20 records).

However, when exporting the grid, the output file contains all 250 records, while the summary still reflects only the paginated data instead of the full dataset.

Expectation:
In the exported file, all records should be displayed, and the summary values should be calculated based on the complete dataset (i.e., all records), not just the paginated records.

Kindly check the code below for your reference:

async function exportXlsx() {
    var $t = this.toolbar(),
        hlAlternateRows = $t.find('.alternateRows').prop('checked');

    var blob = await this.exportData({
        format: 'xlsx',
        eachRow: function(row, ri, rowData, rows) {
            if (hlAlternateRows && rows.length % 2 != 0) {
                row.bgColor = "#f0f0f0";
            }
        },
        linkStyle: "text-decoration:underline;color:#0d6efd;",
        skipHiddenCols: $t.find('.xHCols').prop('checked'),
        skipHiddenRows: $t.find('.xHRows').prop('checked'),
        selection: $t.find('.selectedRows').prop('checked') ? 'row' : '',
        render: $t.find('.render').prop('checked')
    });
    pq.saveAs(blob, "pqGrid.xlsx");
}

var colM = [{
        title: "Order ID",
        width: 100,
        dataIndx: "OrderID"
    },
    {
        title: "Customer Name",
        width: 130,
        dataIndx: "CustomerName"
    },
    {
        title: "Product Name",
        width: 190,
        dataIndx: "ProductName"
    },
    {
        title: "Unit Price",
        width: 100,
        dataIndx: "UnitPrice",
        align: "right",
      //format: '$##,###.00',
      summary: {
            type: "sum"
        },
    },
    {
        title: "Quantity",
        width: 100,
        dataIndx: "Quantity",
        align: "right"
    },
    {
        title: "Order Date",
        width: 100,
        dataIndx: "OrderDate"
    },
    {
        title: "Required Date",
        width: 100,
        dataIndx: "RequiredDate"
    },
    {
        title: "Shipped Date",
        width: 100,
        dataIndx: "ShippedDate"
    },
    {
        title: "ShipCountry",
        width: 100,
        dataIndx: "ShipCountry"
    },
    {
        title: "Freight",
        width: 100,
        align: "right",
        dataIndx: "Freight"
    },
    {
        title: "Shipping Name",
        width: 120,
        dataIndx: "ShipName"
    },
    {
        title: "Shipping Address",
        width: 180,
        dataIndx: "ShipAddress"
    },
    {
        title: "Shipping City",
        width: 100,
        dataIndx: "ShipCity"
    },
    {
        title: "Shipping Region",
        width: 110,
        dataIndx: "ShipRegion"
    },
    {
        title: "Shipping Postal Code",
        width: 130,
        dataIndx: "ShipPostalCode"
    }
];
var dataModel = {
    location: "remote",
    dataType: "JSON",
    method: "GET",
    url: "/pro/invoice/get",
    //url: "/invoice.php", //for PHP
    getData: function(dataJSON) {
        return {
            data: dataJSON.data
        };
    }
}

var groupModel = {
    on: true,
   
    grandSummary: true,
   
};

var grid1 = $("div#grid_paging").pqGrid({
    width: 901,
    height: 400,
    collapsible: false,
    pageModel: {
        type: "local",
        rPP: 20,
        strRpp: "{0}",
        strDisplay: "{0} to {1} of {2}"
    },toolbar: {
        items: [
            {
                type: 'button',
                label: "Export",
                icon: 'ui-icon-arrowthickstop-1-s',
                listener: exportXlsx
            }
        ]
    },
    skipExport: function() {

        //update the header titles upon every change in skipHeader property via header popup.
        this.refreshHeader();
    },
    dataModel: dataModel,
    colModel: colM,
    wrap: false,
    hwrap: false,
   groupModel: groupModel,
    //freezeCols: 2,           
    numberCell: {
        show: false,
        resizable: true,
        title: "#"
    },
    title: "Shipping Orders",
    resizable: true
});

4
Thank You.

The provided solution is working now.

5
We have found the issue.
Please check with the below stackblitz link
Our observations are whenever we do group by with the column header having space it creates the error.
Example: Employee Name, Employee Code columns are creating issue. kindly resolve the issue.

https://stackblitz.com/edit/paramquery-demo-9r2nn5kx?file=index.js


6
 The same functionality was working properly with version previous version i.e 10 now after upgradation it has stopped working. kindly look at to the issue as its show stopper for us.

7
Help for ParamQuery Pro / Issues while Applying Grouping with DnD column
« on: November 28, 2025, 11:55:23 am »
Hello Paramvir,

I am using ParamQuery Grid Version 11 in my project.

In the given example, I am working with PQGrid using the Grouping functionality.

Whenever the grid loads, I am grouping the data by the Month–Year column. After that, the user performs additional grouping by dragging and dropping columns.
However, during the drag-and-drop grouping process, I am encountering issues.

Kindly refer to the attached video link for your reference:
https://drive.google.com/file/d/10f6c7NsnOH5pRGLeHmmYYstEZ4TlfRqd/view

Note: This functionality works properly in Version 9, but the issue occurs in Version 11.

8
Help for ParamQuery Pro / Re: Cell Edit not worked when Filter Applied
« on: November 28, 2025, 10:36:46 am »
Hello Paramvir

The provided solution worked for me.

Thank You  :D

9
Help for ParamQuery Pro / Re: Cell Edit not worked when Filter Applied
« on: November 27, 2025, 06:29:26 pm »
Hello Paramvir

Thanks for your reply.

I have found the 2 references of pq.fakeEvent in the pqgrid file. So, we need to replace the provided code in both locations or in any specific location?

Also, we are using the minified JS file for production mode, so it isn't easy to replace the provided content in the min.js file.

Please help us to do the same.

10
Help for ParamQuery Pro / Re: Cell Edit not worked when Filter Applied
« on: November 25, 2025, 02:56:59 pm »
Hi Paramvir,

We tried the steps you provided. Still, we are facing the issues.

For more reference, we are sharing a video with you. In which you can clearly see the errors that occurred in the pqgrid.js files.

We also have a project with an older PQ grid version, V9. The same functionality is working properly on the older version.

Kindly check the URL below.

https://drive.google.com/file/d/1t-VRz_GN7PiJIYs0RL88v5e27BFT37lc/view?usp=drive_link

11
Help for ParamQuery Pro / Re: Cell Edit not worked when Filter Applied
« on: November 24, 2025, 11:37:20 am »
Hello,

System Details are as follows:
OS: Windows 10 Pro
Chrome Version: Version 142.0.7444.176 (Official Build) (64-bit)
Microsoft Edge: Version 142.0.3595.94 (Official build) (64-bit)

We have checked, but it is still not working.
Kindly check the JS Fiddle for your reference.

https://jsfiddle.net/589jch3x/1/

In the given example, choose "Rank" and  "Begins With" filter Option and filter with 1 value.
After the filter, try to update the first company name.
After the value change, click outside of the textbox. You will face the same issues.

12
Help for ParamQuery Pro / Cell Edit not worked when Filter Applied
« on: November 21, 2025, 12:25:06 pm »
Hello Paramveer,

I am using PQGrid with the latest version (V11).

As observed, when a filter is applied and I attempt to edit a cell, PQGrid throws a console error, and the cell cannot be edited.

Kindly review the code below and the attached file for your reference.


function filterhandler() {

    var $toolbar = this.toolbar(),
        $value = $toolbar.find(".filterValue"),
        value = $value.val(),
        condition = $toolbar.find(".filterCondition").val(),
        dataIndx = $toolbar.find(".filterColumn").val(),
        filterRules;

    if (dataIndx == "") { //search through all fields when no field selected.
        filterRules = this.getColModel().map(function(column) {
            return {
                dataIndx: column.dataIndx,
                condition: condition,
                value: value
            };
        })
    } else { //search through selected field.
        filterRules = [{
            dataIndx: dataIndx,
            condition: condition,
            value: value
        }];
    }

    //call to grid filter method.
    this.filter({
        oper: 'replace',
        rules: filterRules
    });
}
//filterRender to highlight matching cell text.(optional)
function filterRender(ui) {
    var val = ui.cellData,
        filter = ui.column.filter,
        crules = (filter || {}).crules;

    if (filter && filter.on && crules && crules[0].value) {
        var condition = crules[0].condition,
            valUpper = val.toUpperCase(),
            txt = crules[0].value,
            txt = (txt == null) ? "" : txt.toString(),
            txtUpper = txt.toUpperCase(),
            indx = -1;
        if (condition == "end") {
            indx = valUpper.lastIndexOf(txtUpper);
            //if not at the end
            if (indx + txtUpper.length != valUpper.length) {
                indx = -1;
            }
        } else if (condition == "contain") {
            indx = valUpper.indexOf(txtUpper);
        } else if (condition == "begin") {
            indx = valUpper.indexOf(txtUpper);
            //if not at the beginning.
            if (indx > 0) {
                indx = -1;
            }
        }
        if (indx >= 0) {
            var txt1 = val.substring(0, indx);
            var txt2 = val.substring(indx, indx + txt.length);
            var txt3 = val.substring(indx + txt.length);
            return txt1 + "<span style='background:yellow;color:#333;'>" + txt2 + "</span>" + txt3;
        } else {
            return val;
        }
    } else {
        return val;
    }
}
var colModel = [{
        title: "Customer ID",
        dataIndx: "customerid",
        width: 100
    },
    {
        title: "Company Name",
        width: 180,
        dataIndx: "companyname",
      editable:true
    },
    {
        title: "Contact Name",
        width: 140,
        dataIndx: "contactname"
    },
    {
        title: "Contact Title",
        width: 140,
        dataIndx: "contacttitle"
    },
    {
        title: "Address",
        width: "170",
        dataIndx: "address"
    }
];
var dataModel = {
    location: 'remote',
    url: "/pro/customers/get"
}
var newObj = {
    scrollModel: {
        autoFit: true
    },
    height: 'flex',
    maxHeight: 400,
    //pageModel: { type: 'local' },
    dataModel: dataModel,
    columnTemplate: {
        render: filterRender
    },
    colModel: colModel,
    filterModel: {
        mode: 'OR'
    },
    editable: false,
    showTitle: false,
    toolbar: {
        cls: "pq-toolbar-search",
        items: [{
                type: 'textbox',
                label: 'Filter: ',
                attr: 'placeholder="Enter your keyword" is="clear-text"',
                styleCtrl: "width:150px;",
                cls: "filterValue",
                listener: {
                    timeout: filterhandler
                }
            },
            {
                type: 'select',
                cls: "filterColumn",
                listener: filterhandler,
                options: function(ui) {
                    var opts = [{
                        '': '[ All Fields ]'
                    }];
                    this.getColModel().forEach(function(column) {
                        var obj = {};
                        obj[column.dataIndx] = column.title;
                        opts.push(obj);
                    })
                    return opts;
                }
            },
            {
                type: 'select',
                cls: "filterCondition",
                listener: filterhandler,
                options: [{
                        "begin": "Begins With"
                    },
                    {
                        "contain": "Contains"
                    },
                    {
                        "end": "Ends With"
                    },
                    {
                        "notcontain": "Does not contain"
                    },
                    {
                        "equal": "Equal To"
                    },
                    {
                        "notequal": "Not Equal To"
                    },
                    {
                        "empty": "Empty"
                    },
                    {
                        "notempty": "Not Empty"
                    },
                    {
                        "less": "Less Than"
                    },
                    {
                        "great": "Great Than"
                    },
                    {
                        "regexp": "Regex"
                    }
                ]
            }
        ]
    }
};
pq.grid("#grid_search", newObj);

13
Bug Report / Export To Excel with non existing Images Not Working
« on: November 18, 2025, 03:05:42 pm »
Hello Paramveer,

I am trying to export Grid data with images to Excel. I am using the latest version (V11).
In my scenario, if the actual image file is not present in the server directory or the image cannot be loaded due to an invalid path, I am unable to export the Grid.

I am able to reproduce the same issue in the following demo:
https://paramquery.com/pro/demos/export_xlsx

You just need to change the image path.

Kindly check the code below.

async function exportXlsx() {
    var $t = this.toolbar(),
        hlAlternateRows = $t.find('.alternateRows').prop('checked');

    var blob = await this.exportData({
        format: 'xlsx',
        eachRow: function(row, ri, rowData, rows) {
            if (hlAlternateRows && rows.length % 2 != 0) {
                row.bgColor = "#f0f0f0";
            }
        },
        linkStyle: "text-decoration:underline;color:#0d6efd;",
        skipHiddenCols: $t.find('.xHCols').prop('checked'),
        skipHiddenRows: $t.find('.xHRows').prop('checked'),
        selection: $t.find('.selectedRows').prop('checked') ? 'row' : '',
        render: $t.find('.render').prop('checked')
    });
    pq.saveAs(blob, "pqGrid.xlsx");
}

var exportRenderAthlete = true,
    colM = [
        //checkboxes are displayed and their values saved in same column.
        {
            type: 'checkbox',
            dataIndx: 'selected',
            dataType: 'bool',
            title: '',
            skipExport: true,
            menuInHide: true,
            menuIcon: false,
            maxWidth: 25,
            cb: {
                select: true,
                header: true
            }
        },
        {
            title: 'Athlete Details',
            colModel: [{
                    title: "Athlete",
                    dataIndx: "athlete",
                    width: 160,
                    exportRender: exportRenderAthlete,
                    render: function(ui) {
                        var name = ui.cellData.split(/\s/).join("_"),
                            url = "https://en.wikipedia.org/wiki/" + name;
                        return {
                            text: "<a href='" + url + "' target='popup' onclick=\"window.open('" + url + "','popup','width=600,height=600'); return false;\">" + ui.cellData + "</a>",
                            //this style overrides linkStyle.
                            style: "color:#ff0000;"
                        }
                    }
                },
                {
                    dataIndx: 'image',
                    width: 100,
                    title: 'Picture'
                },
                {
                    title: "Country",
                    dataIndx: "country",
                    width: 120
                },
                {
                    title: "Age",
                    dataIndx: "age",
                    width: 90,
                    align: 'center',
                    dataType: 'integer'
                },
                {
                    title: "Sport",
                    dataIndx: "sport",
                    width: 110
                }
            ]
        },
        {
            title: 'Medal Details',
            colModel: [{
                    title: "Gold",
                    dataIndx: "gold",
                    width: 100,
                    dataType: 'integer'
                },
                {
                    title: "Silver",
                    dataIndx: "silver",
                    width: 100,
                    dataType: 'integer'
                },
                {
                    title: "Bronze",
                    dataIndx: "bronze",
                    width: 100,
                    dataType: 'integer'
                }
            ]
        },
        //{ _title: "Year", dataIndx: "year", width: 90, dataType: 'integer' },
        {
            title: "Date",
            dataIndx: "date",
            dataType: 'date',
            width: 110
        },
    ];
var dataModel = {
    location: "remote",
    url: "/Content/olympicWinners.json",
    getData: function(data) {
        data.forEach(rd => {
            if (rd.image) {
                // Convert to a valid URL
                // Change the path from /images to /images1
                // rd.image = window.location.origin + "/pro2/content/images/" + rd.image;
                rd.image = window.location.origin + "/pro2/content/images1/" + rd.image;

                // Set the cell type to 'Pic'
                rd.pq_cellprop = {
                    image: {
                        inst: 'Pic'
                    }
                }
            }
        });
        return {
            data: data
        };
    }
};

var obj = {
    height: 500,
    title: 'Olympics winners',
    showTitle: false,
    columnTemplate: {
        get styleHead() {
            return this.skipExport ? 'background-color:#ffcccc;' : "";
        }
    },
    toolbar: {
        items: [{
                //for adding pictures in cells.
                type: 'picCell'
            },
            {
                type: 'separator'
            },
            {
                type: 'checkbox',
                cls: 'xHCols',
                label: 'Skip Hidden Columns'
            },
            {
                type: 'checkbox',
                cls: 'xHRows',
                label: 'Skip Hidden Rows'
            },
            {
                type: 'checkbox',
                value: exportRenderAthlete,
                label: 'Include Hyperlinks',
                listener: function(evt) {
                    var col = this.Columns().find(function(col) {
                        return col.dataIndx == 'athlete';
                    })
                    col.exportRender = evt.target.checked;
                }
            },
            {
                type: 'checkbox',
                cls: 'selectedRows',
                label: 'Selected Rows'
            },
            {
                type: 'checkbox',
                cls: 'alternateRows',
                label: 'Highlight alternate rows'
            },
            {
                type: 'button',
                label: "Export",
                icon: 'ui-icon-arrowthickstop-1-s',
                listener: exportXlsx
            }
        ]
    },
    skipExport: function() {

        //update the header titles upon every change in skipHeader property via header popup.
        this.refreshHeader();
    },
    dataModel: dataModel,
    scrollModel: {
        autoFit: true
    },
    colModel: colM,
    numberCell: {
        width: 40
    },
    menuIcon: true,
    hwrap: false,
    wrap: false
};

pq.grid("#grid_export", obj);


In the above code, I changed the file path as follows:

rd.image = window.location.origin + "/pro2/content/images1/" + rd.image";
After that, when I tried to export the file, I encountered the following error:

Failed to load resource: the server responded with a status of 404 ()   /pro2/content/images1/Michael_Phelps.jpg:1 

14
Thank you very much, now it is working properly.

15
formatDateTime(val); it returns the formatted date and time value.

Please provide me code or syntax for following:

1. Iterate cell value and format it before export.
2. Add additional row (title row) in excel sheet before export.

Check below demo with version 9.0.1
https://stackblitz.com/edit/paramquery-demo-chr1mszs?file=index.js

Pages: [1] 2 3 ... 8