Member Avatar for himit

Hi All,

I am using JQuery in my solution and was trying to get the value of the cell which has been clicked. however, after all my searches i ended up with no exact solution.
the most common solution i got was to select a row (by making multi select true and selecting the checkbox) and then to find out the column.

I simply need the value of the cell that I've clicked. i might be asking a very simple question but this is something i am not able to find a solution for.

Please assist.

  • 4 Contributors
  • 5 Replies
  • 2K Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by himit

Dani AI

Generated

Since you are using jqGrid via the Struts2 jQuery Grid plugin, you do not need to manually walk the DOM to find the row. Bind to jqGrid’s onCellSelect event and read the target column by name. That gives you the clicked rowid and lets you pull, say, the appid for that row regardless of which cell was clicked.

var grid = $("#gridTable");

grid.jqGrid({
  // ... your existing options ...
  onCellSelect: function(rowid, iCol, cellContent, e) {
    var appid = grid.jqGrid("getCell", rowid, "appid"); // colModel name
    // do something with appid
    alert(appid);
  }
});

If the grid is already initialized (you cannot change the init options easily), use delegated click on jqGrid’s cells. Each data row has class jqgrow and its id attribute is the rowid, so you can still call jqGrid APIs reliably:

$("#gridTable").on("click", "td[role='gridcell']", function () {
  var grid = $("#gridTable");
  var rowid = $(this).closest("tr.jqgrow").attr("id");
  var appid = grid.jqGrid("getCell", rowid, "appid");
  alert(appid);
});

Two tips to make this robust in your Struts2 setup:

  • Define the column names so you can always query by name, not index. If appid is your key, set it as the row id so you may not even need getCell.
    colModel: [
{ name: "appid", index: "appid", key: true }, // rowid will equal appid
{ name: "appname", index: "appname" },
{ name: "appver", index: "appver" }
]
  • If a column uses formatters, prefer getRowData(rowid).appid or keep appid as a hidden key column to avoid scraping formatted HTML.

This aligns with ’s plain-table idea but uses jqGrid’s native events, which is more reliable for your case, .

Recommended Answers

All 5 Replies

Member Avatar for kokoro90

Hi,

Could you please show us the relevant code? Without that, it is impossible to answer your question, as you could be referring to any of an unlimited number of scenarios...

Cheers

Member Avatar for ivatanako

Maybe you could add the click event on every data on the cell.

cheers

Member Avatar for himit

Hi kokoro90 & ivatanako,

thanks for the response.

I am working with struts 2.2, struts-jquery-plugin 2.5.1 and struts2-
jquery-grid-plugin-2.5.1.

I tried following code that help in getting the complete row with multiselect to be set as true-

var grid = jQuery('#gridTable'); 
var sel_id = grid.jqGrid('getGridParam', 'selrow'); 
var myCellData = grid.jqGrid('getCell',sel_id,'configSetVersion'); 
alert(myCellData);

it works fine.
i want the same thing on clicking on any cell.

i tried using the onclick function and can get the cell value however i don't know how to get the complete row from that.

the final goal that i've to achieve is to get the value of a particular column on clicking on any cell of that row.
for example if i have 3 columns name 'appid', 'appname' and 'appver', then on clicking on any of the cell, say 3rd row 'appname', i need the value of 'appid' in that row (3rd row in this case).

Please assist.

Member Avatar for Airshow

Himit,

First, construct your HTML like this:

<table id="myTable" border>
<tr><th>appid</th><th>appname</th><th>appver</th></tr>
<tr><td class="appid">100</td><td class="appname">App 1</td><td class="appver">1.1</td></tr>
<tr><td class="appid">200</td><td class="appname">App 2</td><td class="appver">2.2</td></tr>
<tr><td class="appid">300</td><td class="appname">App 3</td><td class="appver">3.3</td></tr>
</tr>
</table>

By giving the tds classes, they can be tested/addressed in javascript:

Simple:

$(function(){
  $("#myTable tr").click(function(){//click anywhere in a row
    alert($(this).find(".appid").html());
  });
});

Mode complicated:

$(function(){
	$("#myTable td").click(function() {//click any table cell
		var $this = $(this);
		$row = $this.closest('tr');
		switch($this.get(0).className) {//branch depending on which cell was clicked
			case "appid":
				alert($row.find(".appname").html());
			break;
			case "appname":
				alert($row.find(".appver").html());
			break;
			case "appver":
				alert($row.find(".appid").html());
			break;
		}
	});
});

Airshow

Member Avatar for himit

Thanks for the answere Airshow.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.