Can I change the double click event handler (ondblClickRow) for a jQuery jqGrid plug-in after it has been rendered in ASP.NET MVC?

Question

I have been using jqGrid with success; however, I've hit something I can't seem to get working. I am returning a grid definition as a PartialViewResult via AJAX and appending the the results to a div.

I would then like to change the double click event for said grid. I'm using Firebug and can seem to get to the grid element using $('#my-grid')[0] but when I attempt to call methods on it like below it tells me jqGrid is "not defined".

I'm pretty sure I've got the jqGrid stuff referenced correctly or I wouldn't have gotten this far (I have been displaying and editting data in grids already). Here's the code that gets and attempts to modify the grid definition:

    $(document).ready(function() {

        //Add the grid by pulling it via AJAX
        $.get('<%=Url.Action("Grid","Entity", new {id = "CustomerAccount"}) %>', function(htmlResult) {

            //Append grid definition to div
            $('#customer-list').append(htmlResult);
            var myGrid = $($('#CustomerAccount-grid')[0]);
            $(myGrid).jqGrid('setGridParam', { ondblClickRow: function(rowid, iRow, iCol, e) { console.log('dblclicked'); } })
                .trigger('reloadGrid');
            //NOTE: I've tried with and without the reloadGrid
}

UPDATE: I think I've come to the conclusion now that I am sure I'm referencing the element as a jQuery object that there is a timing issue. The simplified load of the grid definition below illustrates the issue:

//Append grid definition to div
$('#customer-list').load('<%=Url.Action("Grid","Entity", new {id = "CustomerAccount"}) %>',function() {

    console.log('sortname=' + $($('#CustomerAccount-grid:first')).jqGrid('getGridParam', 'sortname'));
  });

This logs sortname=undefined; however, if I copy and paste the same line into Firebug it displays sortname=Name, which is correct.

FINAL UPDATE: A big part of my problem may have been that I was not getting the element as a jQuery object so I am crediting drachenstern with the solution (Thanks!) But, once beyond that the reason the event handler was still not being wired up was because the grid definition was being retrieved via AJAX and it did not exist when I attempted to bind the ondblclickrow. The solution was simple: I merely added async: false to the grid definition call so that I will know the definition will always be there before additiona event handlers etc are bound. I am retrieving the grid definition via AJAX because I am building the grids dynamically on the server side of my ASP.NET MVC app. I am still retrieving the data for for the grid asynchonously. Works great now.

score 4 · Answer 1 · edited May 23 '17 at 12:01

Try following code

$('#my-grid').jqGrid('setGridParam',
                     { ondblClickRow: function(){console.log('Hello');} });

could work in many cases (see this and this answers on the same subject), but it is do not work. The problem is that during initializing of jqGrid will be test whether the event handler for the ondblClickRow is defined. If it is not defined (see the source code), then no binding to double-click will be done and the setting of ondblClickRow later do nothing.

So to be able to set ondblClickRow after jqGrid initializing is done you have to bind the dblclick yourself. You can do this with the following code:

var grid = $('#customer-list');
grid.dblclick(function(e) {
    var td = e.target;
    var ptr = $(td,grid[0].rows).closest("tr.jqgrow");
    if($(ptr).length === 0 ){return false;}
    var ri = ptr[0].rowIndex;
    var ci = $.jgrid.getCellIndex(td);
    var rowId = $(ptr).attr("id");
    alert("in ondblClickRow");
    //ts.p.ondblClickRow.call(grid[0],rowId,ri,ci, e);
    return false;
});

The commented line ts.p.ondblClickRow.call(grid[0],rowId,ri,ci, e) shows that all input parameters of ondblClickRow we already has.

score 1 · Accepted Answer · answered Dec 21 '10 at 12:21

1

var myGrid = $('#my-grid')[0];

This code sets myGrid to be a DOM element. So some other DOM elements would be:

<a>, <div>, <input>, <body>, <table>, etc

There is no native DOM property .jqGrid. Perhaps what you meant to do is to get the first child, but keep it in a jQuery wrapper? There are several options, depending on the readability you want. http://api.jquery.com/first/ allows you to use chaining and looks neater, and may be more performant for the given case. There's also:

var myGrid = $( $('#my-grid')[0] );

or alternately:

$(myGrid).jqGrid('setGridParam',{ ondblClickRow: function(){console.log('Hello');}});

and of course you could introduce a middle element:

var myGridTemp = $('#my-grid')[0];
var myGrid = $( myGridTemp );
myGrid.jqGrid('setGridParam',{ ondblClickRow: function(){console.log('Hello');}});

But the primary problem is that the first line of your example only gives you the DOM element, not a jQuery element.

answered Dec 21 '10 at 12:21

jcolebrand

15,889
12
75
121

this is true, one thing to add: you can use var `myGrid = $('#my-grid:first')` to get the first element that matches the query as a jQuery object. – Michael Sagalovich Dec 21 '10 at 12:39
@Michael ~ Good point. I wasn't sure to add an additional selector element on account of I knew that would return a jQuery element straightaway and the OP wouldn't learn what [0] does... But yes, nominally that's what I would do in this situation if it were my code. – jcolebrand Dec 21 '10 at 12:42
Thanks for the replies. I've tried changing how I reference the element as you pointed out; however, the double click still does not fire (no errors, just does not fire). Interestingly, if I wire a default ondblClickRow up in the grid definition that one fires. Are there some methods/events that cannot be changed after a jqGrid is rendered? – Todd Langdon Dec 21 '10 at 16:38
I've editted my question to show the code that gets the grid definition via AJAX and appends it to a div – Todd Langdon Dec 21 '10 at 16:53
Sorry that I was away from my desk and not able to help you faster @tlangdon, but I see that you did indeed get the solution you needed. Additionally, you alluded to the problem above, when you define an event handler using "normal" methods it only applies to _existing_ elements. Newly created elements won't get those benefits. The alternative using "vanilla" jQuery is to use a [live](http://api.jquery.com/live/) handler, but that doesn't work with plugins like jqGrid (the change would need to be done in their code, not yours). Glad you got it figured out, sorry again for the /afk – jcolebrand Dec 21 '10 at 19:00

Can I change the double click event handler (ondblClickRow) for a jQuery jqGrid plug-in after it has been rendered in ASP.NET MVC?

2 Answers2