Traversing through jQgrid and find row id when click

Question

I am traversing through jqGrid. When I press row action button it should get current pressed row data, to do this I need to get row id of that row when clicked.

<tr role="row" id="1" tabindex="-1" class="jqgrow ui-row-ltr ui-widget-content">

This is closest tr and I can reach till this tr easily using below code.

$("#rangemaster").children("tr.jqgrow")

But when I try to get id its showing undefined.

$("#rangemaster").children("tr.jqgrow").attr("id")

I want to pic id value of that tr.jqgrow.

Answer 1

You can find tr with class name and catch your attribute id using jQuery object $(this).

$("#grid").find("tr.jqgrow").each(function(index) {
  console.log(index + ": " + $(this).attr("id"));
});

Example:

var mydata = [{
    id: "1",
    label: "No 1",
    number: "123",
    status: "OPEN",

  },
  {
    id: "6",
    label: "No 2a",
    number: "222",
    status: "Close"

  }

];

var grid = $("#grid");

grid.jqGrid({
  datatype: "local",
  colNames: ['Col-Id', 'Col-Label', 'Col-Number', 'Col-Status'],
  colModel: [{
      name: 'id',
      index: 'id',
      width: 60,
      sorttype: "int"
    },
    {
      name: 'label',
      index: 'label',
      width: 180,
      sorttype: "string"
    },
    {
      name: 'number',
      index: 'number',
      width: 120,
      sorttype: "float"
    },
    {
      name: 'status',
      index: 'status',
      width: 120,
      sorttype: "string"
    }
  ],
  gridview: true,
  sortname: 'id',
  treeGrid: true,
  treedatatype: 'local',
  height: 'auto',
  pager: "#gridPager"

});

grid[0].addJSONData({
  total: 1,
  page: 1,
  records: mydata.length,
  rows: mydata
});

$("#grid").find("tr.jqgrow").each(function(index) {
  console.log(index + ": " + $(this).attr("id"));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.8.0/css/ui.jqgrid.min.css">
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/5.8.0/js/jquery.jqGrid.min.js"></script>

<table id="grid"></table>
<div id="gridPager"></div>