I would like to open an igDialog right near the ROW I clicked in igGrid. Currently I am working on "activeRowChanged" event to capture the click.
How do I get ROW coordinates and/or current height/width of the row? I do something like this right now:
activeRowChanged: function (ui, args) { var msg;msg='activeRowChanged event fired. Row Index = ' + args.row.index; $("#igDialog1").igDialog("open"); openWin(msg); gridData=[]; gridData=fillArray(); $("#grid").igGrid('option', 'dataSource', gridData); // Change data sourse - refresh }
I am using args.row.index to get INDEX of the row, but what other properties the row can return me? Maybe coordinates as well?
Please help me out on this.
Thanks!
Never mind. Figured it out...
Changed it to: $("#grid").on("click", "tr", function (event) {...}
I know the above example is over a year old...but using the example code gives me the following error in IE11
JavaScript runtime error: Object doesn't support property or method 'live'
Is there another way to get the rowId or rowIndex that won't cause this error?
Hi Gene,
You should bind to TR click event. In the click event you get the coordinates of the click and also the TR element itself.If you have defined primary key for the grid then the TR element will contain data-id attribute with the value of the primary key.Here is an example:
$("#grid1").find("tr").live("click", function (event) { // use primary key (data-id attribute), to lookup the data record from the data source, or some other info, in order to navigate to a URL var rowId = $(event.currentTarget).attr("data-id"); var dataRecord = $("#grid1").data("igGrid").dataSource.findRecordByKey(parseInt(rowId)); $("#igDialog1").igDialog({position: [event.clientX, event.clientY]}); $("#igDialog1").igDialog("open"); });
Hope this helps,Martin PavlovInfragistics, Inc.