In jqGrid, Is there a "built-in" way to know what mouse button was clicked, before row selection?
Currently we have jqGrid with some actions bind on "onSelectRow" event of jqGrid. The problem is that when user right click on that row, onSelectRow event raised to and action performed. What I need, is to ignore "onSelectRow" when user right click on a row.
EDIT: I know there exists onRightClickRow event, but it raised after onSelectRow and action already performed.
I found that I can know what button clicked by "type" of event object. When it's click, the type is "click" when it's right click, the type is "contextmenu"....Does exists the additional way, or I must check type to know what button is clicked?
Thanks
It's good question! The reason of such behavior is the following. jqGrid register an event handler for the event contextmenu on the whole grid <table> element with the following code (see here)
.bind('contextmenu', function(e) {
td = e.target;
ptr = $(td,ts.rows).closest("tr.jqgrow");
if($(ptr).length === 0 ){return;}
if(!ts.p.multiselect) { $(ts).jqGrid("setSelection",ptr[0].id,true,e); }
ri = ptr[0].rowIndex;
ci = $.jgrid.getCellIndex(td);
$(ts).triggerHandler("jqGridRightClickRow", [$(ptr).attr("id"),ri,ci,e]);
if ($.isFunction(this.p.onRightClickRow)) {
ts.p.onRightClickRow.call(ts,$(ptr).attr("id"),ri,ci, e);
}
});
How one can see from the code it calls setSelection method and calls onRightClickRow callback and trigger jqGridRightClickRow event. So if you don't need the selection of rows and if you don't use onRightClickRow and jqGridRightClickRow you can just unbind the event handler:
$("#list").unbind("contextmenu");
If you do want use onRightClickRow callback or if you don't sure whether you need to use jqGridRightClickRow somewhere you can "subclass" the event handler. The implementation is depend a little from the version of jQuery which you use. Starting with jQuery 1.8 one should use a little another call to get the current events registered on the DOM element. The corresponding code could be about the following:
//$grid.unbind('contextmenu');
var getEvents = $._data($grid[0], "events"); // $grid.data("events") in jQuery ver<1.8
if (getEvents && getEvents.contextmenu && getEvents.contextmenu.length === 1) {
var orgContextmenu = getEvents.contextmenu[0].handler;
$grid.unbind('contextmenu', orgContextmenu);
$grid.bind('contextmenu', function(e) {
var oldmultiselect = this.p.multiselect, result;
this.p.multiselect = true; // set multiselect to prevent selection
result = orgContextmenu.call(this, e);
this.p.multiselect = oldmultiselect; // restore multiselect
return result;
});
}
The demo demonstrate the above code live.
Events are listed here: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events
There is an onRightClickRow event.
Also, using the plain jquery event object and which will tell you. http://api.jquery.com/event.which/
You must use 3rd parameter to onRowSelected and which or the type like you mentioned.
Related
We have a tabulator column definition , where one of them is a button created by a formatter
{title:"input", field:"blank", width:30, frozen:true, responsive:0,formatter:customFormatter2}
Into formatter we create a button
var customFormatter2 = function (cell, formatterParams) {
var $button=$('<button>').text('Hola')
$button.click(function(){
$(cell.getElement()).trigger('contextmenu')
})
return $button.get(0);
}
Also we have a rowContextmenu created into tabulator.
I want call to menu that tabulator shows when we do right click in any row.
I tried call a trigger from cell,from row... and I dont know if the event is accessible ,or I dont know do it.
Thanks
I don't user jQuery often, but I believe the only thing missing is preventing the propagation of the click event after the contextmenu event, which hides the menu. Something like this should work, but I also had to add pageX and pageY to my custom event, so that Tabulator could calculate where to display the menu. I am not sure how I would do this in jQuery.
$button.click(function(event){
event.stopImmediatePropagation();
$(cell.getElement()).trigger('contextmenu');
});
Or without jQuery and definitely works,
function customFormatter(cell, formatterParams){
const button = document.createElement('button');
button.textContent = "Hola";
button.addEventListener('click', (event) => {
event.stopImmediatePropagation();
const myEvent = new Event('contextmenu');
myEvent.pageX = event.pageX;
myEvent.pageY = event.pageY;
cell.getRow().getElement().dispatchEvent(myEvent);
})
return button;
}
Here is a full example without jQuery.
https://jsfiddle.net/nrayburn/guxkw394/101/
Be careful with this. Because we are creating a custom event, it doesn't contain all of the normal properties that a real event would. If Tabulator starts relying on different event properties, it would break this code. (Maybe you could copy the original event from the click and pass those properties into the custom event. Not really sure how to do that.)
This is how i populate the table
I'm having some trouble with the datatables plugin for jquery. The table is populated dynamically, I have 3 columns with text and a fourth column which consists of a delete and an edit button. For the edit button I have a modal, and if I confirm the changes, it does indeed change the specific line in the table.
However, if I click on several edit buttons and cancel, when I actually want to change one it changes all the previously canceled lines.
Here is the relevant code:
$("#example").on("click", ".edit-button", function() {
$("#edit-modal").modal("show");
saveChanges(this);
});
function saveChanges(k) {
$("#edit-confirm").click(function() {
$(".itm-loader-modal").show();
setTimeout(function() {editJob(k);},1000);
});
}
function editJob(currentButton) {
$(".itm-loader-modal").fadeOut("slow");
var editedName = $("#job-name").val();
var editedDescription = $("#job-description").val();
var editedCompany = $("#job-company").val();
var data = {
"name":editedName,
"description": editedDescription,
"company": editedCompany
};
var currentLine = $(currentButton).parent().parent().children();
currentLine.eq(0).text(data.name);
currentLine.eq(1).text(data.description);
currentLine.eq(2).text(data.company);
$("#edit-modal").modal("hide");
}
Hard to say for sure, but one think that looks wrong is that each time saveChanges is called, you register new event listener on #edit-confirm button.
Once that #edit-confirm is clicked, it will execute all the registered event handlers – one for each .edit-button click.
Instead, you probably want to have a single #edit-confirm click handler and find a way to pass the info about the line that's currently being edited to it.
Cheers.
so when you call saveChanges it assign event handler to "#edit-confirm", all those event handlers are executed at once,
to avoid it you should attach event handler to it via delegation or i think this quick fix should work
$(this).find('#edit-confirm').click(function() {
/...
})
I am using dojo dgrid for table representation. I have handled a row click event with grid.on('.dgrid-content .dgrid-row:click', function(){ // Open a Dialog}). But the problem I am facing here is: while user is trying to select any text on the row with a hope to copy, the event eventually ends up opening the dialog.
As per my knowledge, HTML5 has the support of ondrag event, but that is not working in my case. What are the other ways to separate these two events and handle accordingly?
Thanks in advance.
You can distinguish select from click in following way inside of your click handler:
clickHandler: function () {
var collapsed = window.getSelection().isCollapsed;
if (collapsed) {
console.log("Clicked");
//Open dialog
} else {
console.log("Selected");
//Do something else
}
}
You should add set allowTextSelection to true inside your grid. This allows the user select text inside the rows.
Make sure you read the documentation on the topic.
In my program an area called 'validDrop' is highlighted for the user to drag and drop items into.
A new area is highlighted when the button, 'minibutton' is clicked.
I want to tell the program to only allow the button to be clicked if the current area (validDrop) is styled by 'wordglow2' and 'wordglow4'.
I have tried this, Why won't it work?
if ($(validDrop).hasClass('wordglow2', 'wordglow4')) {
$('.minibutton').click(true);
} else {
$('.minibutton').click(false);
}
Because hasClass doesn't take more than one parameter, and because .click either triggers a click or binds a click listener, it doesn't set clickability.
Depending on what .minibutton is, you could do something like:
var valid = $(validDrop).hasClass('wordglow2') && $(validDrop).hasClass('wordglow4')
$('.minibutton').prop('disabled', !valid);
If it's not a type that can be disabled, you might consider something like this:
$('.minibutton').toggleClass('disabled', !valid);
And bind the click listener like so:
$(document).on('click', '.minibutton:not(.disabled)', function() {
// click action here
});
As ThiefMaster points out in comments, $(validDrop).is('.wordglow2.wordglow4') is a functionally equivalent way of checking that the drop has both classes.
You can alsou use .bind() and .unbind() to add and remove click event to your button as in my example http://jsfiddle.net/Uz6Ej/
Others have asked this question, but there's been no good answers that I can find.
No answer
Oleg punted to double clicking cells
With a jqgrid and inline editing, is it possible to get the focus on the cell that was selected instead of the first cell on the row? In an onCellSelect handler I can move the focus, but then it immediately returns to the first cell on the line.
Firebug consistently crashes as I step out of the onCellSelect callback so I haven't made much headway into the jqGrid source itself.
I use this code (jqGrid 4.4.1)
onSelectRow: function (rowid, status, e) {
var setFocusToCell = function(e) {
if(!e || !e.target) return;
var $td = $(e.target).closest("td"), $tr = $td.closest("tr.jqgrow"), ci, ri, rows = this.rows;
if ($td.length === 0 || $tr.length === 0 || !rows) return;
ci = $.jgrid.getCellIndex($td[0]);
ri = $tr[0].rowIndex;
$(rows[ri].cells[ci]).find("input,select").focus();
}
setFocusToCell(e);
}
I answered on the close question here. If you use double-click to enter in the inline editing you can directly use my previous answer.
If you use selection of the row (onSelectRow callback) you will have problem to detect the cell which is clicked because the current version of jqGrid don't has the event object as the parameter. The last version of jqGrid on the github are already has the parameter (see my suggestion and the fix) and you can do the same inside onSelectRow.
If you do need to use released version jqGrid 4.3.1 and need to set focus in the onSelectRow callback you can use additionally beforeSelectRow callback to cache last e.target in a variable and uses it inside of onSelectRow.
I somehow succeeded to accomplish this by attaching a dblclick event to every td of the table, I know this is not the best method, but you are free to optimize it how you like, you can also ignore the setTimeout which was used only for testing.
$("#jqGrid").on("dblclick", "td", function (event) {
// setTimeout(function () {
console.log(this);
$(event.target).find("input,select").focus();
// }, 0);
});
Hope this will help you.