We Keep Coding

Can I show rowContextMenu from a button doing a trigger to one function using tabulator pluggin?

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.)

remove onClick attribute in code behind

a checkbox on my page has the onclick event to enable a button when it is checked, and disable it when it is not checked. sometimes I need the button to be disabled completely, but I don't want it to be invisible.
the checkbox looks like this:
<asp:CheckBox ID="cb_start" runat="server" onClick="cb_start_click()"/>
<script>
var cb = document.getElementById("ContentPlaceHolder1_cb_start");
var btn = document.getElementById("ContentPlaceHolder1_btn_start");
function cb_start_click(){
btn.disabled = !cb.checked;
}
</script>
In the code behind I tried this, but it did not work:
cb_start.Attributes.Remove("onClick");
if (somecase) cb_start.Attributes.Add("onClick", "cb_start_click()");

You don't have to remove the listener. You can place your if (somecase) in cb_start_click() callback function to avoid the button from getting enabled.

If you want remove the event, just type in cs file:
rodape.Attributes.Remove("onclick");
Example on page...
Before remove event (using developer tools):
After remove event (using developer tools):

JavaScript to check for specific events

I have a Wizard on my page, and for one of the WizardSteps I have some JavaScript to enable / disable controls based on radio button selection.
This works fine in the first instance, however I also have a button which adds a row to a grid (and that row has a Remove link). If I click the button, or the Remove option, then it does what I can only describe as a partial postback of the page and any disabled controls will now be enabled.
I've tried to catch anything on PostBack, but this doesn't actually get fired which is why I've described it as a partial one.
Is there an event in JavaScript that I can catch for this? I figure if I can catch an event then I could try and make the controls enabled states persist.
EG I've tried to put some code to catch when the state changes for the control itself, but this doesn't fire.
var myControl = document.getElementById('mainContentPlaceHolder_myWizard_myControl');
if (myControl != null) {
myControl.onchange = function () { DisableControl(this); };
}
function DisableControl(myControl) {
// This actually does a lot more, but this is just for the purposes of showing some code.
myControl.enabled = false;
myControl.disabled = true;
}

try this functions:
<script>
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(function() {
//start request
});
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {
//end request
});
</script>

How to simulate click event on DIV element with JS/jQuery

http://services.groupes.be/ibrunet/ibrunet.aspx?lg=NL
I am trying to simulate click events on DIV elements with class="x-grid-cell-inner"(with text Ibrunet, Signaletiek..)
First I inserted jQuery.
javascript:var s=document.createElement('script');s.setAttribute('src', 'http://code.jquery.com/jquery.js');document.getElementsByTagName('body')[0].appendChild(s);alert("loaded");void(s);
Then I tried this
var bedragenDivClass = "x-grid-cell-inner ";
var bedragenDivText = "Bedragen";
var divs = document.getElementsByClassName(bedragenDivClass);
for (var i = 0, len = divs.length; i < len; i++) {
if(divs[i].innerText.localeCompare(bedragenDivText) == 0){
alert("found");
};
};
And I've got referrence to this DIV but then I tried several different functions to trigger click event without any success
.trigger()
.triggerHandler()
.click()
When I open Chrome Dev Tools I can see several handler bounded to that DIV but I dont know how to trigger them
Unusual thing is that I could simulate click on input elements on right panel
var contractTypeInputId = "Cmb_Type_Contrat_Ibrunet_PLus-inputEl";
var contractTypeInput = document.getElementById(contractTypeInputId);
contractTypeInput.click();
Also I could click on elemenets of that input that show after script click it.
Since those DIV's don't have id attribute and I thought I need id to trigger the event I've gave them inside Dev Tools and I could retrieve it after but again no success with triggering onClick event.
The strangest thing is when I run something like this:
$("div").click();
I can see many DIV's beign clicked but those with that class I specified are not affected.
If I can trigger the event as simple as clicking on that DIV why I failed simulating it?

Using jquery
$(".-grid-cell-inner:contains(Ibrunet, Signaletiek)").click(function () {
alert(1);
});
$(".-grid-cell-inner:contains(Ibrunet, Signaletiek)").trigger("click");

Putting restrictions on button

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/