Read my post, from two days back? I left the Single Click Sort solution at a point where it was functional, but at the same time introduced a significant limitation. Limitation such, that the Column Lock/Unlock feature would be put at stake.
In the mean time, collaborating with my colleague Pedro Melo we tweaked the initial solution a bit. The setTimeout() function existing in the initial solution, had a wait of zero (0) milliseconds. That basically means, the call to the function() will be postponed until the browser is done, essentially to the point that there are no further function calls stacked in the browser’s message loop. An interesting Stackoverflow thread on this topic can be found here. I typically set the timeout to zero, to force execution to wait until the browser is done. Often solves hard-to-tackle issues related with event bubbling. Like to learn more? Check this.
Well, we changed the setTimeout() to wait for 200 milliseconds. Why 200 milliseconds, you might ask? That will be the maximum time-span in which we will capture a ‘double click’ event. More that 200 milliseconds, and we will treat those mouse clicks as two individual clicks.
Added a dblclick event handler, and the sole thing it’s bound to do, is set a local ‘dblclick’ variable to true. After the 200 milliseconds have passed, the ‘stacked’ function will execute. Why? Because the browser also captured the click event. A true/native double-click will trigger both ‘click’ and ‘dblclick’ events. First the ‘click’ event will fire, second the ‘dblclick’. It’s kind of a hack, but it’s functional.
On touch devices, default functionality should prevail – the condition IsTouch() got added to by-pass the custom code conditionally. Alternatively, the same could have been done using a Manifest Administration expression – preventing the QuickSortPR.js to download at all.
What does the complete solution look like?
if (typeof(SiebelAppFacade.QuickSortPR) === "undefined") {
SiebelJS.Namespace("SiebelAppFacade.QuickSortPR");
define("siebel/custom/QuickSortPR", ["siebel/jqgridrenderer"],
function () {
SiebelAppFacade.QuickSortPR = (function () {
function QuickSortPR(pm) {
SiebelAppFacade.QuickSortPR.superclass.constructor.apply(this, arguments);
}
SiebelJS.Extend(QuickSortPR, SiebelAppFacade.JQGridRenderer);
QuickSortPR.prototype.ShowUI = function () {
SiebelAppFacade.QuickSortPR.superclass.ShowUI.apply(this, arguments);
if (!SiebelAppFacade.DecisionManager.IsTouch()) {
var dblclick = false;
var placeHolder = "s_" + this.GetPM().Get("GetFullId") + "_div";
var elSortable = $("#" + placeHolder).find(".ui-jqgrid-sortable");
var sort = $("li[data-caption='Sort']");
elSortable.on("click", function () {
sort.parent().css("visibility", "hidden");
setTimeout(function () {
if (!dblclick)
sort.click();
else
$("li[data-caption='Lock']").click();
dblclick = false;
}, 200);
});
elSortable.on("dblclick", function () {
dblclick = true;
});
}
}
return QuickSortPR;
}());
return "SiebelAppFacade.QuickSortPR";
})
}
Can grab the code from here also.
– Jeroen
Oracle Implementation Advisor 