Recent Posts

Pages: [1] 2 3 ... 10

ParamQuery Pro Evaluation Support / Re: Enable save changes button after check the checkbox without changing any rowdata

« Last post by paramvir on June 26, 2025, 10:42:30 pm »

Though it doesn't make sense why would you do that.

you can enable save button by getting DOM reference to it and calling disabled false.

Code: [Select]

$( selector of save button ).button("option", "disabled", false );

Help for ParamQuery Pro / Re: Column drag handle does not update when over nodrop column

« Last post by paramvir on June 26, 2025, 05:34:33 pm »

This patch can be used to fix the issue.

Code: [Select]

var p=jQuery.paramquery.cDragColumns.prototype;jQuery.paramquery.cDragColumns=function(e){var r,o,t=this,a=e.options,n=a.dragColumns||{},d=function(r,o){return $("<div class='pq-arrow-"+r+" ui-icon "+o+"'></div>").appendTo(e.$grid_center)};t.that=e,t.rtl=a.rtl,t.status="stop",t.$arrowTop=d("down",n.topIcon),t.$arrowBottom=d("up",n.bottomIcon),t.hideArrows(),n.enabled&&e.$head_i.draggable({distance:5,cursorAt:{top:-10,left:-10},cancel:".pq-grid-header-search-row,input,textarea,button,select,option,.pq-grid-number-cell",zIndex:"1000",appendTo:"body",revert:t.revert.bind(t),helper:function(o,a){var n=o.target.closest(".pq-grid-col");if(n){var d,c=t.colIndicesDrag=e.getHeadIndices(n),i=t.columnDrag=c.column,l=i.parent,p=e.options.dragColumns.rejectIcon,s=e.getScale();return r=pq.getScale(document.body),!i||i.nodrag||i._nodrag||l&&1==l.colSpan||i.empty||!1===e._trigger("columnDrag",o,{column:i})?"<span/>":(e.$head_i.find(".pq-grid-col-resize-handle").hide(),(d=t.$helper=$("<div class='pq-col-drag-helper pq-theme pq-grid-cell' data-di="+i.dataIndx+" ><div><span class='pq-drag-icon ui-icon "+p+"'></span>"+i.pq_title+"</div></div>")).css({scale:s[0]/r[0]+" "+s[1]/r[1]}),d[0])}return $("<div></div>")},start:function(){},drag:function(a,n){if(t.$helper){t.status="drag";var d,c=n.position,i=a.originalEvent,l=(i&&i.target!=document?i.target:a.target).closest(".pq-grid-col"),p=t.colIndicesDrag,s=p.ri,g=p.column,u=g.leftPos,h=u+g.o_colspan;if(c.left=c.left/r[0],c.top=c.top/r[1],console.log("cDragColumn.js td = ",l),l&&!l.closest(".pq-grid-header-search-row")&&e.evtBelongs(i)){var m=e.getHeadIndices(l),v=m.column,f=m.ri,q=m.colIndx;if(!(v.empty||v==g||v.nodrop||v._nodrop||s<f&&q>=u&&q<h))return o=l,t.colIndicesDrop=m,void t.onDrag(a,l);o!=l&&t.updateDragHelper(!1),o=l}else t.hideArrows(),d=$(".ui-droppable-hover",e.$top),console.log("cGroup.js $group = ",d[0]),t.updateDragHelper(!!d[0]);t.colIndicesDrop=null}},stop:function(r){if(t.status="stop",t.$helper){t.hideArrows();var o=t.colIndicesDrop;e.$head_i.find(".pq-grid-col-resize-handle").show(),o&&t.onDrop(t.colIndicesDrag,o,r)}}})},jQuery.paramquery.cDragColumns.prototype=p;

Help for ParamQuery Pro / Re: Why doesn’t dirty flag trigger after dataMap field updates with autocomplete rem

« Last post by paramvir on June 26, 2025, 04:14:01 pm »

There is a problem in the way you have made changes in rowData directly and passed updated rowData to newRow parameter of updateRow method.

Code: [Select]

activeGrid.updateRow({
                rowIndx: ui.rowIndx,
                newRow: rowData, //pass new object here instead of rowData, and don't make any changes in rowData
                track: true,
                history: false,
                checkEditable: false,
                refresh: false
            });

newRow is supposed to be a new object containing only the changes in the fields you want.

Help for ParamQuery Pro / Re: Column drag handle does not update when over nodrop column

« Last post by Igerson on June 26, 2025, 12:43:21 pm »

Great!

If patch is possible, let me know, so I can apply it until it get fixed in upcoming release(s)

Thank you very much.

Help for ParamQuery Pro / Re: Column drag handle does not update when over nodrop column

« Last post by paramvir on June 25, 2025, 11:56:07 pm »

Thanks for reporting the issue.

Handle is supposed to update its state according to its position above the column. It seems like a bug. I would provide the patch if feasible. It would be fixed in upcoming version if not patchable.

Help for ParamQuery Pro / Why doesn’t dirty flag trigger after dataMap field updates with autocomplete rem

« Last post by omerix on June 24, 2025, 09:47:02 pm »

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}

ParamQuery Pro Evaluation Support / Enable save changes button after check the checkbox without changing any rowdata

« Last post by pattarsuresh on June 24, 2025, 05:01:49 pm »

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

Help for ParamQuery Pro / Column drag handle does not update when over nodrop column

« Last post by Igerson on June 24, 2025, 04:23:37 pm »

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

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);
	}
},

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;
}

Pages: [1] 2 3 ... 10