Recent Posts

Pages: 1 [2] 3 4 ... 10
11
Hi,

I’m using jQuery UI Autocomplete in a grid cell to fetch data from a remote source.
When a user selects a value, I use a dataMap to write values from the selected item into other related fields in the same row.
The data updates in the row as expected, but the row does not get marked as dirty—so the “Save” button does not get enabled.

Here is the core of my code function:
Code: [Select]
function otoTamamlaJui(ui, opts) {
    opts = opts || {};
    var dataMap = opts.dataMap || {};
    var valueIndx = opts.valueIndx || 'id';   // value to be written to grid
    var labelIndx = opts.labelIndx || 'text'; // value to appear in popup

    // find grid and rowData first
    var activeGrid = ui.grid || opts.grid || window.grid;
    var rowData = ui.rowData;
    var oldVal = rowData[ui.dataIndx];

    // With .ui-front the dropdown remains on top
    ui.$cell.addClass('ui-front');

    // autocomplete initialization
    ui.$editor.autocomplete({
        source: function(request, response) {
            $.ajax({
                url: opts.url,
                dataType: "json",
                data: { q: request.term },
                success: function(data) {
                    var result = (data.items || []).map(function(item) {
                        return {
                            ...item,
                            label: item[labelIndx] || item.text || item.id,
                            value: item[valueIndx] || item.id || item.text
                        };
                    });
                    response(result);
                }
            });
        },
        position: {
            collision: 'flipfit',
            within: ui.$editor.closest(".pq-grid")
        },
        minLength: 1,
        delay: 0
    })
    .one('focus', function () {
        $(this).autocomplete("search", "");
    })
    .on('autocompleteselect', function (event, uiAuto) {
        var selected = uiAuto.item;
        var changed = false;

        // Update the main field with valueIndx
        var newVal = selected && (selected[valueIndx] || selected.id || selected.text);
        if (newVal != oldVal)
            changed = true;
        rowData[ui.dataIndx] = newVal;

        // fill other fields with dataMap
        for (var gridField in dataMap) {
            var itemField = dataMap[gridField];
            if (selected && selected[itemField] !== undefined && rowData[gridField] !== selected[itemField]) {
                rowData[gridField] = selected[itemField];
                changed = true;
            }
        }

        // Save only if there are changes
        if (changed && activeGrid && typeof activeGrid.updateRow === "function") {
            activeGrid.updateRow({
                rowIndx: ui.rowIndx,
                newRow: rowData,
                track: true,
                history: false,
                checkEditable: false,
                refresh: false
            });
        }
    });
}


All the relevant fields are updated in the row, but the grid doesn’t mark the row as dirty, and the “Save” button does not become enabled.
Am I missing something to ensure the dirty flag is triggered?
Is there an extra step required for this workflow to work as expected?

Thanks for any help!

colmodel:
Code: [Select]
,{title:'I.Name',dataIndx:'name',dataType:'string',minWidth:24,width: 200,cls:'',clsHead:'',align:'',halign:'center',hidden:false,editable:true
,filter: { crules: [{ condition:'contain'}],menuIcon:false}
,editor: {type: 'textbox',init: function(ui){return otoTamamlaJui(ui, {url:'/search.json',dataMap:{ktext:'text',kno:'id'} });}}, editModel:{keyUpDown: false}
}


search.json
Code: [Select]
{"totalRecords":4,"curPage":1,"items":[{"id":"1","text":"AAAAA"},{"id":"1234567890123456789012345","text":"BBBBB"},{"id":"2","text":"CCCCC"},{"id":"44","text":"DDDDD"}],"more":0}
12
Hi Team

I want to enable save changes button without changing any row data I mean after check the checbox in the grid then the save changes button should enable. please help me needful.

Thanks
Srinivasarao p
13
Hello

When trying to drag column for reordering, then small handle appears representing dragged column (see picture of it: https://ibb.co/8L1SsgBt). When column is dragged on position where it cannot be dropped, f.x. target column has
Code: [Select]
nodrop: true, I expected that handle will update its state, replacing icon on it to represent that column cannot be dropped here, but it seems not a case, it still shows that column can be dropped in prohibited place, but when I release mouse button - nothing happens. My intention was to provide visual feedback to user, where column can be dropped and where is not. Does PQGrid has some API or tools to acheve that? I implemented columnDrag event handler, which updates table header columns model with nodrop properties once column start being dragged

I dig a source code a bit trying to find answer, but without much success, but I found piece of code, which seems to be responsible for nodrop handling, and it appears to be empty (see picture https://ibb.co/mCsHRypQ)

So, my question is, can I somehow update drag handle to provide feedback where column can be dragged and where not?

Thanks in advance
14
Help for ParamQuery Pro / Re: Icon in column header
« Last post by paramvir on June 19, 2025, 07:31:32 pm »
Code example of adding icon using DOM manipulation:

Code: [Select]
refreshHeader: function(evt, ui) {
var $headerCell = this.getCellHeader({ colIndx: 0 });
var $title = $headerCell.find('.pq-title-span');
// Prevent duplicate icons
if ($headerCell.find('.ui-icon-disk').length === 0) {
$("<span class='ui-icon ui-icon-disk'></span>").insertAfter($title);
}
},
15
Help for ParamQuery Pro / Re: Icon in column header
« Last post by paramvir on June 19, 2025, 07:15:04 pm »
Another method:

Add class to the header cell:

Code: [Select]
{ title: "ShipCountry", width: 100, dataIndx: "ShipCountry", clsHead: 'icon-class' },

Use css ::before or ::after pseduo-element

Code: [Select]
<style>
.icon-class .pq-title-span::after{
  display: inline-block;
  font-family: bootstrap-icons !important; 
  font-style: normal;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size:14px; 
  content: "\f214"; /* Unicode for calendar icon in Bootstrap Icons, replace with ucincode of your choice */
margin-left: 10px;
}
</style>

or use emoji

Code: [Select]
.icon-class .pq-title-span::after{
  content: "✂️";
  margin-right: 5px;
}
16
Help for ParamQuery Pro / Re: Icon in column header
« Last post by queensgambit9 on June 19, 2025, 07:02:10 pm »
Thanks, I got this:

Code: [Select]
refreshHeader: function(event, ui) {
                var $cell = this.getCellHeader( { colIndx: 0 } );
                $cell[0].append("<div></div>");   
            }

But the div is not inserted correctly...
17
1st issue:

ParamQuery Pro supports xlsx format only, so please ensure to name the file with xlsx extension while downloading the file.


2nd issue:

Please add this refresh event in the grid initialization object. It would ensure to clear all the merged cells except the 1st cell in merged cell range, whenever any range of cells is merged in ParamQuery grid.

Code: [Select]
                refresh(){                   
                    var mc = this.options.mergeCells,
                        mcLast = mc.at(-1);
                    if( mcLast ){
                        //debugger;
                        let {r1, c1, r2, c2, rc, cc, cleared} = mcLast,
                            count = rc * cc;
                        if(count > 1 && !cleared){
                            let val = this.Range({r1, c1}).value()[0],
                                r = this.Range({r1, c1: c1, r2, c2});

                            mcLast.cleared = true;
                            this.one('beforeValidate', (evt, ui) => {ui.history = false});
                            r.value([val]);                           
                        }
                    }
                },
19
Hi,

I'm facing a couple of issues with Excel files exported from ParamQuery Grid:

The exported Excel file is downloaded with a .xls extension, which doesn't open properly in Microsoft Office. To work around this, I renamed it to .xlsx, and it opens fine.

However, I'm encountering a problem with merged cells in the exported file. When using the SUM() function on merged cells:

In WPS Office and Microsoft Excel, the sum includes duplicate values from the merged regions (i.e., it adds hidden values under the merged cells).

In LibreOffice, it works correctly and only includes the value from the visible (top-left) cell in the merged range.

This issue appears only in Excel files exported from ParamQuery Grid. If I manually unmerge and remerge the cells in Excel, the problem is resolved — which suggests the initial export includes hidden values in all cells of the merged range.

Is there a way to modify the export logic in ParamQuery so that:

Only the top-left cell of a merged range contains a value,

The other cells in the merged range are left blank (like LibreOffice expects)?

Thanks!
20
Help for ParamQuery Pro / Re: Icon in column header
« Last post by paramvir on June 18, 2025, 06:40:35 pm »
If you don't want it to be part of title API, then

In refreshHeader event, get a reference to header cell with getCellHeader method

https://paramquery.com/pro/api#method-getCellHeader

and add icon by DOM manipulation.
Pages: 1 [2] 3 4 ... 10