3

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.

App

<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')}"
     scripts="{!join(',',
              $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')}"/>
<center>
    <br/><br/><br/>
    <h4><a href="javascript:void(0)" onclick="{!c.initialize}"> Click here to load JqGrid...</a></h4>
    <br/>
    <div id="gridDiv_Table" class="slds jqSLDS"></div>
</center>

Controller

({

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);
    gridDiv.appendChild(table);

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

    gridTable.jqGrid({
        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.

Improve this question
3
  • 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
    Commented Jul 25, 2016 at 5:06
  • You can call the initialize() method using the afterScriptsLoaded attribute of <ltng:require> tag
    – prashanthkr
    Commented Jul 26, 2016 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
    Commented Jul 27, 2016 at 18:38

0

Reset to default

You must log in to answer this question.