How to access parent grid id from subgrid in jqgri

Question

i'm constructing a jqgrid which is working fine ... grid construction

if (jqent.isReq) {
    sbGrid.Append("subGrid: true,");
    sbGrid.Append("subGridRowExpanded: function (subgrid_id, row_id) {");
    sbGrid.Append(" $('#' + subgrid_id).html(renderhtmlforSubgrid(subgrid_id, row_id));},");
}

i have a subgrid with textarea and an image control that will be rendered by the below code

function renderhtmlforSubgrid(subgrid_id, row_id) {
    var script = '<div style="margin-left:10px; margin-top:10px; margin-bottom:10px;">';
    script += '<textarea class="txtCommentwatermarkOn" id="txtCommentSection" name="txtCommentSection" rows=2 cols=20>Type your comments here</textarea>';
    script += '<input onclick=\"RenderModalPopup(' + row_id + ',' + subgrid_id + ',this);\" type="image" id="image" src="../../Content/Images/commentIcon.png"/>';
    script += '</div>';

    return script;
}

on click of the image "RenderModalPopup" function will be triggered

function RenderModalPopup(rowid, tableid, event) {
    var dataFromRow = $('#tblArtifact1').jqGrid('getRowData', rowid);
    var PhaseArtifactId = $('#tblArtifact1').jqGrid('getCell', rowid, 'ID');
    ..........................

Every thing is working fine... Now the issue is i'm hardcoding the grid id as "tblArtifact1" to fetch the column values. which needs to be removed. Can i get the grid id? is there any predefined parameter/function to get it?

I'm stuck up.. please help.

Answer 1

Inside of callback function subGridRowExpanded you can use this variable which is initialized to the DOM of the grid (DOM of the <table>). So you can get id of the parent grid by this.id. If you call renderhtmlforSubgrid inside of subGridRowExpanded I would recommend you to use

renderhtmlforSubgrid.call(this, subgrid_id, row_id)

instead of

renderhtmlforSubgrid(subgrid_id, row_id)

In the case this inside of renderhtmlforSubgrid function will be not changed to global window object and you can have this which hold helpful information for you (like this.id for id or $(this) for jQuery rapper to the parent grid).

I would recommend you to consider to use idPrefix option in the subgrid to prevent id duplicates (see the answer for more information).

Moreover I see from your code that you are more C#/C++ developer as JavaScript developer. I had the same problems 2 years before. JavaScript has some constructions which are close to well-known other languages, but the deep semantic is really different. So JavaScript developers have many standard traps where he use existing constructions in the wrong way.

For examples: you should never use variables, properties or especially functions which name starts with capital letter. Currently RenderModalPopup and PhaseArtifactId breaks the rule. JavaScript has no classes, but one can create close constructs using functions. Inside of functions you can assign properties to this. Such functions are constructors of the "class" and should have first capital letter. To create instance of the "class" one should use new. For example var now = new Date();.

Closures are another example of functions in JavaScript which looks like functions, but have a lot of important differences.

Additionally I would recommend you to use more anonymous functions and function expressions (var renderhtmlforSubgrid = function (subgrid_id, row_id) {...}) instead of function statement (function renderhtmlforSubgrid (subgrid_id, row_id) {...}) and define all variables in the first line of function body. JavaScript has no block-level variable declaration like the most computer languages, so it's very easy to produce wrong code if you would define variables inside of JavaScript code.

The last advice would be to use Kernighan and Ritchie's style of code formatting for JavaScript code independent from the style which you used to use in your favorite computer language. It will prevent you from the Automatic Semicolon Insertion which can make serious errors which are difficult to localize.