Messages

1

Help for ParamQuery Pro / Excluding row data in Group Totals

« on: February 01, 2025, 01:29:58 am »

Is there a way to exclude certain rows (based on a column value) in the Group total calculation?

For example - I have a grid result that has budget (in yellow) and transaction data (in black).  I do not want the budget amounts in the Group total calculation (see attached screen shot).

Below is my javascript code:

dataModelTransaction=  {
location: "remote",
dataType: "jsonp",
method: "GET",
url: "/CCRSearch/Reports/[email protected]",
}
colModelTransaction = [
    { dataIndx: 'grp', title: 'FASActivity', tpHide: true, editable: false, menuInHide: true, minWidth: 150 },
    { dataIndx: "FASActivity", title: "FAS Activity", editable: false, hidden: true, filter: { groupIndx: 'Source' } },   
    { title: "TRAN_TYPE", hidden: true, dataIndx: "TRAN_TYPE" },
    { title: "Source", width: 20, dataIndx: "Source" },
    { title: "Account Code", width: 20, dataIndx: "ACCNT_CODE" },
    { title: "Date", align: "right", width: 20, dataIndx: "JCDATE" },
    { title: "Description", width: 200, dataIndx: "FASDesc" },
    {
        title: "Amount", width: 85, format: '$ #,###,###.00', align: "right", dataIndx: "AMOUNT", summary: { type: "sum" },
        render: function (ui) {
            if (ui.cellData < 0) {
                return {
                    cls: 'blinkText',
                    style: { 'color': 'red'}
                };
            }
        }
    }
]
groupModel = {
    on: true,                             //grouping mode.
    pivot: false,                         //pivotMode
    checkbox: false,
    checkboxHead: true,
    select: false,
    titleIndx: 'grp',                      //v7.0.0: new option instead of titleInFirstCol
    indent: 20,
    fixCols: false,
    groupCols: ['Source'],                   //grouping along column axis.
    header: false,                         //hide grouping toolbar.
    grandSummary: true,                   //show grand summary row.     
    dataIndx: ['FASActivity'],                //grouping along row axis.
    collapsed: [true],
    useLabel: true,
    summaryEdit: false
};
           $("#Transactiondetails").html(data);
           $("#grid_transactions").pqGrid({
               height: 450,
               scrollModel: { autoFit: true },
               dataModel: dataModelTransaction,
               colModel: colModelTransaction,
               pageModel: { type: "local", rPP: 1000, strRpp: "" },
               numberCell: { show: false },
               title: "Transaction Details",
               resizable: true,
               groupModel: groupModel,
               summaryTitle: {
                   sum: ""
               }, 
               rowInit: function (ui) {
                   if (ui.rowData.TRAN_TYPE == "B") {
                       return {
                           style: { "background": "yellow" } //can also return attr (for attributes) and cls (for css classes) properties.
                       };
                   }
               }
           });

2

Help for ParamQuery Pro / Setting a Grid Row Color

« on: January 30, 2025, 02:19:32 am »

I have the following popup Grid logic below:

    dataModelTransaction=  {
    location: "remote",
    dataType: "jsonp",
    method: "GET",
    url: "/CCRSearch/Reports/[email protected]",
    }
    colModelTransaction = [
        { title: "FAS Activity", width: 120, dataIndx: "FASActivity" },
        { title: "TRAN_TYPE", hidden: true, width: 100, dataIndx: "TRAN_TYPE" },
        { title: "Source", width: 40, dataIndx: "Source" },
        { title: "Account Code", width: 40, dataIndx: "ACCNT_CODE" },
        { title: "Date", width: 40, dataIndx: "JCDATE" },
        { title: "Description", width: 150, dataIndx: "FASDesc" },
                  {
            title: "Amount", width: 85, align: "right", dataIndx: "AMOUNT",
            cellClass: function (ui) {
                return ui.cellData < 0 ? "red-cell" : "";
            }
        }
    ]

    function OpenTranWindow(Activity) {
        $.post("/CCRSearch/Reports/GetTransactions?=", { "ActivityId": Activity}, function (data) {
            $("#Transactiondetails").html(data);
            $("#grid_transactions").pqGrid({
                height: 450,
                scrollModel: { autoFit: true },
                dataModel: dataModelTransaction,
                colModel: colModelTransaction,
                pageModel: { type: "local", rPP: 1000, strRpp: "" },
                numberCell: { show: false },
                title: "Transaction Details",
                resizable: true,
                 rowClass: function (ui) {
                    if (ui.rowData.TRAN_TYPE == "B") {
                        return "red-row";                                    // Apply a custom CSS class
                    }
                }
            });
            modal1.show();
        });
    }

I also have this style section in the html code above the javascript code:
<style>
    .red-row {
        background-color: red !important;
        color: white !important;
    }
    .red-cell {
        background-color: red !important;
        color: white !important;
    }
</style>
I am trying to set the entire row Red, if the hidden column, TRAN_TYPE = "B".  I am also trying to set the Amount column to Red if it is a negative value.

Can you tell me what I am doing wrong?

3

Help for ParamQuery Pro / Setting all rows containing a checkbox column, checked

« on: January 24, 2025, 09:58:29 pm »

Can you tell me how to set all rows that contain a checkbox column to checked?

I am using the following column where the "checked" attribute is set to true, but no rows are being checked:

        colModel = [
            {
                title: "FAS Activity", dataType: "string", dataIndx: "FASActivity", editable: false, align: "left", minWidth: '20%',
                render: function (ui) {
                    return "<a href='#' onClick=javascript:OpenTranWindow(" + "'" + ui.cellData + "'" + ");>" + ui.cellData + "</a>";
                }
            },
            { title: "Region", dataType: "String", dataIndx: "RegionDesc", editable: false, minWidth: '40%', },
            {
                title: "Include ?", dataIndx: "Activity", type: 'checkbox', editable: false,
                cbId: 'chk', hidden: false, checked: true, useLabel: false, minWidth: '20%'
            },
            {
                dataIndx: 'chk',
                dataType: 'bool',
                cb: { header: true },
                hidden: true,
                editable: function (ui) {
                    //to make checkboxes editable selectively.
                    return !(ui.rowData.Activity.length > 10);
                }
            }
        ];

4

Help for ParamQuery Pro / Re: using Grid Toolbar buttons to check/uncheck a a checkbox field on a grid

« on: January 17, 2025, 08:41:07 pm »

Your response worked great, Thank you!

I have 2 followup questions -

1. How to I make this button toggle the checkbox on/off.  Right now, it only checks the boxes based on the page filter.

2. I have this javascript function (below) that currently passes a list of rows that remain in the grid (based on grid filtering).  How do I get the list of grid rows that are only checked?

    $("#btnSubmit").click(function () {
        var pFASIDs = "";
        var grid = $("#grid_jsonp").pqGrid("instance");
        var selectedRows = grid.pageData().filter(function (row) {
            return row.FASActivity.length > 1;
        });
        // Extract the IDs of selected rows
        var selectedIDs = selectedRows.map(function (row) {
            return row.FASActivity;
        });
        pFASIDs = selectedIDs.join(","); ;

        window.location.href = '/CCRSearch/Reports/Index?LayoutId=180&IDs=' + pFASIDs;

    });

5

Help for ParamQuery Pro / Re: using Grid Toolbar buttons to check/uncheck a a checkbox field on a grid

« on: January 15, 2025, 11:15:51 pm »

I am using the following code:

       var grid = $("#grid_jsonp").pqGrid("instance");       
       var matchingRows = grid.pageData().filter(function (row) {
            return row.FASActivity.startsWith("F");
        });

        // Get the row indices of the filtered rows
        var matchingIndices = matchingRows.map(function (row) {
            return grid.getRowIndx({ rowData: row }).rowIndx;
        });
       
        // Use the checkNodes API to check the matching rows
        grid.Checkbox("selected").checkNodes(matchingIndices);

Everything is working correctly expect the last line where the checkNodes function is called.

I am getting the following error message:
Uncaught TypeError: Cannot read properties of undefined (reading 'checkNodes')

I am using v9.x.  Could that be the issue?

6

Help for ParamQuery Grid (free version) / What is the link to signup for Pro Support

« on: January 14, 2025, 07:47:01 pm »

My subscription expired and I would like to signup for pro support.  What is the link and the cost?

7

Help for ParamQuery Pro / using Grid Toolbar buttons to check/uncheck a a checkbox field on a grid

« on: January 14, 2025, 07:06:09 pm »

I have found the example to check/uncheck the entire column, but I am looking for a way to use a button(s) to check a checkbox cell when the checkbox value starts with a letter or set of letters (e.g. Starts with A, Starts with A45, etc).  Are there any examples of buttons doing this?  Below is the code I gave right now for the grid:

    var colModel = [
        {
            title: "Activity",
            minWidth: '30%',
            dataIndx: "FASActivity",
            type: 'checkbox',
            cbId: 'chk',
            hidden: false,
            useLabel: false
        },
        {
            dataIndx: 'chk',
            dataType: 'bool',
            cb: { header: true },
            hidden: true,
            editable: function (ui) {
                //to make checkboxes editable selectively.
                return !(ui.rowData.Activity.length > 10);
            }
        },
        { title: "Description", dataType: "String", dataIndx: "FASDesc", editable: false, minWidth: '30%', },
        { title: "Region", dataType: "String", dataIndx: "Region", editable: false, minWidth: '10%', },
        { title: "Country", dataType: "string", dataIndx: "Country", editable: false, minWidth: '10%', },
        { title: "Year", dataType: "String", dataIndx: "YearSplit", editable: false, minWidth: '10%', }
    ];
    //Define Data Mode;
    var dataModel = {
        location: "remote", //server side call
        dataType: "jsonp",
        method: "GET",
        url: "/CCRSearch/FAS/grid_jsonp", //URL
        getData: function (dataJSON, yearval) {
            var data = dataJSON.data;
            return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
        }
    };
    var pageModel = {
        type: "remote", //Paging remote
        rPP: 500, strRpp: "{0}", //default paging parameters
    }

    var grid = $("#grid_jsonp").pqGrid({
        height: 550,
        scrollModel: { autoFit: true },
        dataModel: dataModel,
        colModel: colModel,
        auroRow: false,
        numberCell: { show: false },
        resizable: true,
        filterModel: {
            on: true,
            header: false,
            type: 'remote',
            menuIcon: false,
            mode: "AND"
        },
        pageModel: pageModel,
        toolbar: {
            style: 'text-align:center;',
            items: [

                {
                    type: 'button',
                    label: 'ATP',
                    listener: function () {
                        // check all Activities that start with 'A19'
                        EntityFilter('ATP');
                    }
                },
                { type: 'separator' },
                {
                    type: 'button',
                    label: 'FMD',
                    listener: function () {
                        // check all Activities that start with 'F'
                        EntityFilter('FMD');
                    }
                },
                { type: 'separator' },
                {
                    type: 'button',
                    label: 'MAP',
                    // check all Activities that start with 'M'
                    listener: function () {
                        EntityFilter('MAP');
                    }
                },
                { type: 'separator' },
                {
                    type: 'button',
                    label: 'RAPP',
                    // check all Activities that start with 'A24'
                    listener: function () {
                        EntityFilter('RAPP');
                    }
                },
                { type: 'separator' },
                {
                    type: 'button',
                    label: 'RAPP2',
                    // check all Activities that start with 'A25'
                    listener: function () {
                        EntityFilter('RAPP2');
                    }
                }
            ]
        },

        wrap: true, hwrap: true,
        virtualX: true, virtualY: true,
        complete: function (event, ui) {

            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))

            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl)
            })
        }
    });

8

Help for ParamQuery Grid (free version) / Dynamically set the title of a grid

« on: December 23, 2024, 02:28:19 am »

Is there a way to dynamically set the title attribute of the grid using javascript?

9

Help for ParamQuery Grid (free version) / Re: Is there a way format a date column inside the colModel?

« on: December 15, 2024, 10:18:39 pm »

Below is the format command I used, but it seemed to have no effect to the screen output:

        {
            title: "Date", dataType: "String", dataIndx: "createdDate", editable: false, minWidth: '20%',
            format: function (val) {
                return [ 'mm/dd/yyyy'][val];
            }
        }

Can you tell me what I did wrong?

10

Help for ParamQuery Grid (free version) / Is there a way format a date column inside the colModel?

« on: December 15, 2024, 01:56:42 am »

I have the following colModel definition and I would like the syntax to format the createDate column as mm/dd/yyyy:
    var colModel = [
        { title: "Title", dataType: "string", dataIndx: "title", editable: false, minWidth: '30%', },
        { title: "Content Owner", dataType: "String", dataIndx: "ownerId", editable: false, minWidth: '10%', },
        { title: "Node", dataType: "string", dataIndx: "contentLayout", editable: false, minWidth: '10%', },
        { title: "Type", dataType: "string", dataIndx: "contentType", editable: false, minWidth: '10%', },
        { title: "Status", dataType: "String", dataIndx: "status", editable: false, minWidth: '10%', },
        { title: "Date", dataType: "String", dataIndx: "createdDate", editable: false, minWidth: '20%', }
    ];

11

Help for ParamQuery Grid (free version) / Column with cell wrapping

« on: December 14, 2024, 10:58:05 pm »

I am trying to figure out how to have document name field wrap the text inside the cell while sill only being 200px.  How do I do that??  Below is what I have:
    var colModel = [
        {
            title: "Actions", dataType: "string", dataIndx: "ID", editable: false, align: "left", width: 10, wrap: false
            , render: function (ui) {
                var DocId = ui.cellData;
                return "<button type='button' onClick=javascript:getDocuments(" + DocId + ") class='btn btn-primary'><i class='bi bi-file-earmark-pdf' data-bs-toggle='tooltip' data-bs-placement='bottom' title='Click here to download this document.'></i></button>"
                    + "";
            }
        },
        { title: "Document Name", dataType: "String", width: 200, wrap: true, dataIndx: "DocName", editable: false },
        { title: "Resource Category", dataType: "string", dataIndx: "categoryDesc", editable: false },
        { title: "Document Date", dataType: "string", dataIndx: "DocDateTime", editable: false },
        { title: "Document Desc", dataType: "string", dataIndx: "DocDesc", width: 200, editable: false }
    ];

12

Help for ParamQuery Grid (free version) / Column width

« on: December 14, 2024, 10:55:12 pm »

I am trying to figure out how to set a column to a specific width.  When I use, width: 10, inside the colModel definition, it does not appear to have an effect. Below is what I have in my javascript:

    var colModel = [
        {
            title: "Actions", dataType: "string", dataIndx: "ID", editable: false, align: "left", width: 10, wrap: false
            , render: function (ui) {
                var DocId = ui.cellData;
                return "<button type='button' onClick=javascript:getDocuments(" + DocId + ") class='btn btn-primary'><i class='bi bi-file-earmark-pdf' data-bs-toggle='tooltip' data-bs-placement='bottom' title='Click here to download this document.'></i></button>"
                    + "";
            }
        },
        { title: "Document Name", dataType: "String", width: 500, wrap: true, dataIndx: "DocName", editable: false },
        { title: "Resource Category", dataType: "string", dataIndx: "categoryDesc", editable: false },
        { title: "Document Date", dataType: "string", dataIndx: "DocDateTime", editable: false },
        { title: "Document Desc", dataType: "string", dataIndx: "DocDesc", width: 200, editable: false }
    ];

What can I do to always make the first column 10px long?

13

Help for ParamQuery Pro / Download v9.x

« on: April 20, 2023, 10:18:36 pm »

How do I download the latest version, v9.x?  On the Pro Downloads section, the highest it goes up to is v8.7

14

Help for ParamQuery Pro / Re: Displaying Grid Title and Toolbar

« on: April 20, 2023, 08:29:08 pm »

I only see v8.7 in the downloads section. What version were you using where you do see both Title and Toolbar?

15

Help for ParamQuery Pro / Re: Displaying Grid Title and Toolbar

« on: April 20, 2023, 07:59:03 pm »

Perhaps I need to upgrade to v9.0   I am currently using version 8.6