Recent Posts
$( selector of save button ).button("option", "disabled", false );
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;
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
});
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
});
}
});
}
,{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}
}
{"totalRecords":4,"curPage":1,"items":[{"id":"1","text":"AAAAA"},{"id":"1234567890123456789012345","text":"BBBBB"},{"id":"2","text":"CCCCC"},{"id":"44","text":"DDDDD"}],"more":0}
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 draggedrefreshHeader: 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);
}
},