We have a lightning component that uses jQuery2.2.4 and jqGrid 5.1.1. After enabling lockerservice this component stopped working. We have come up with a simple test case to reproduce the error.


<aura:application >
<ltng:require styles="{!join(',',
             $Resource.jQuery + '/jquery/css/ui-smoothness/jquery-ui.min.css',
             $Resource.jQuery + '/jquery/css/ui-smoothness/jqgrid-ui-custom.min.css')}"
              $Resource.jQuery + '/jquery/js/jquery-2.2.4.min.js',
              $Resource.jQuery + '/jquery/jqgrid/grid.locale-en.min.js',
              $Resource.jQuery + '/jquery/jqgrid/jquery.jqGrid.min.js')}"/>
    <h4><a href="javascript:void(0)" onclick="{!c.initialize}"> Click here to load JqGrid...</a></h4>
    <div id="gridDiv_Table" class="slds jqSLDS"></div>



initialize: function (component, event, helper) {
    var tableId, gridTableId, gridTable, gridDiv, table, mydata, i;
    tableId = 'Table';

    gridDiv = document.getElementById('gridDiv_' + tableId);

    // Adding jqgrid table element
    table = document.createElement('table');
    table.setAttribute('id', tableId);

    // Grid table details
    gridTableId = '#' + tableId;
    gridTable = $(gridTableId);

        datatype: "local",
        colNames: ['Client'],
        colModel: [{
            name: 'name',
            index: 'name',
            width: 100
        width: 500

    //Add a record
    mydata = [
            id: "1",
            name: "test"

    for (i = 0; i <= mydata.length; i++) {
        gridTable.jqGrid('addRowData', i + 1, mydata[i]);



The app displays a link "Click here to load jgGrid...". When the link is clicked the controller method is executed to create a grid and load it one row of data. This works well if lockerservice is not activated. Once the lockerservice is activated we get the following error. enter image description here

If you have any ideas how to fix this issue or know of a version of jqGrid that works with lockerservice, please let me know.

  • Try doing this inside the rendering lifecycle. Please refer salesforce.stackexchange.com/a/131376/29317 in case if it might help you. The DOM element which you're trying to access probably haven't loaded yet (If you try to find the length of the same in console.log, you'll find that it returns 0). – SE_User Jul 25 '16 at 5:06
  • You can call the initialize() method using the afterScriptsLoaded attribute of <ltng:require> tag – prashanthkr Jul 26 '16 at 20:45
  • @prashanthkr If I call the initialize method using the afterScriptsLoaded attribute of <ltng:require> tag, I get the error "TypeError: this.rows is undefined". This is the same error, that was also reported in this StackExchange entry – Reddy Rachamallu Jul 27 '16 at 18:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.