Home/ Questions/Q 3619154
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T22:50:35+00:00

I have been using jqGrid with success; however, I’ve hit something I can’t seem

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    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.

    • 0