[JohnSeymourParticipant]

It is the one from your example above:

$("#jqxMenu").on('itemclick', function () {
  alert('ItemClick is fired');
});

I took your example and simplified the context menu (only one item remaining). I removed the <span>-tag. I added the grid with the code provided above.
The context menu shows up and works, when the grid is initially empty (myData.localdata is an empty array). Then myData.localdata changes and the grid is updated to the new values. The context menu still shows up but the itemclick-handler is not triggered anymore.

[JohnSeymourParticipant]

This does not explain why a working handler stops working once the data of the table has been updated.

[JohnSeymourParticipant]

Hi Peter,

thanks for your patience.

Starting from your working example I backtracked until the error occured again. And indeed I was looking at the wrong end for the whole time: Not the context menu causes the failure but the grid!

When I start my application and the grid is empty, everything works. As soon as I fill the grid with data, the handler ceases to work.

This is the code I use for initializing the grid:

var dataAdapter = new $.jqx.dataAdapter(myData);
$("#jqxgrid").jqxGrid({
  width : "99%",
  autoheight: true,
    				
  source : dataAdapter,
  theme : "smoothness",
  altrows: true,
  columnsresize: true,
  selectionmode: 'multiplecellsadvanced',
    				
  editable: true,
  editMode: 'dblclick',
    				
  filterable: true,
  sortable : true,
  showsortcolumnbackground: true,
    				
  columns: [
    { text: 'Col1', datafield: 'Col1', editable: false },
    { text: 'Col2', datafield: 'Col2' },
    { text: 'Col3', datafield: 'Col3' }
  ]
});
$("#jqxgrid").on('cellendedit', function(event) {
  // write back new value
});

myData is a JavaScript array that gets changed according to the program state. Changes are propageted to the grid in the following way:

myData.localdata = mySomewhereElseBuiltNewDataArray;
$('#jqxgrid').jqxGrid('updatebounddata', 'cells');

And as soon as this code is executed for the first time, the grid displays the new data (so the array seems to be correct), the context menu appears, but the itemclick-handler stops working.

Could you maybe have a last look at this?

The HTML code I use looks like this:

<div id='jqxWidget' style="font-size: 13px; font-family: Verdana;">
  <div id="jqxgrid"></div>
  <div id='jqxMenu'>
    <ul>
      <li><a href="#">Home</a></li>
    </ul>
  </div>
</div>

Regards,
John

[JohnSeymourParticipant]

Sorry, but I can’t solve it.

This is the HTML to define my context menu:

      <div id='jqxContextMenu'>
        <ul>
            <li>Edit Selected Row</li>
            <li>Delete Selected Row</li>
        </ul>
       </div>

Meanwhile through testing I defined three handlers, two for events defined by the jqxMenu api and a third just to try if a standard jQuery handler might work:

			$('#jqxContextMenu').on('initialized', function () {
				console.log("call initialized");
			});
			$('#jqxContextMenu').on('itemclick', function (event) {
				console.log("call itemclick");
			});
			$('#jqxContextMenu').on('click', function (event) {
				console.log("call click");
			});

None of the handlers ever gets called. Other handlers like

			$("#jqxWidget").on('mousedown', function (event) {
				console.log("call mousedown");
				// open context menu
			});

are executed and the context menu shows up – so jQuery in general works. But I can’t get the itemclick handler to execute. There is no error message in the console.

Every handler is declared in

$(document).ready()

and the line where the handler is added gets executed.

[JohnSeymourParticipant]

Besides the ‘itemclick’ handler being more complex, thats more or less identical to what I posted. Meanwhile I tried that too, after stripping all popup-window related code the method is not getting called… I did test it now too with the popup menu code from this example but the method is not called either.

[Author]

Posts