Cell double click event in iggrid

Hi i want to show a popup when double clicking a cell of a row in iggrid.

In that popup i want to show the column’s header and some more information about that row.

Is this possible to acheive? If yes please help me with some sample link or demo’s.

Kindly getback to me on this

Hi Gowtham,

You can enable the selection feature, and handle selectionChanging / selectionChanged events, but in that case if a row is already selected, and you double click again on it, no events will fire, so i am not sure if this suits your needs. My suggestion would be to bind a double click event to the rows, and use it for this kind of logic:

$("#gridId tr").dblclick(function (evt) {

var row = $(this); // this gives you the row TR element

var rowId = row.attr("data-id"); // this gives you the row primary key (ID)

var rowData = $("#grid1").data("igGrid").dataSource.recordByKey(rowId); // this returns the object holding the data for the row, in the data source

});

Let me know if this helps. Thanks,

Angel

Hi Lyubo,

Thanks for your answer.

What i did is binded the grid to the double click event. Please see below.

Actually i want a popup which shows some more information about the row that is double clicked.

I have a javascript like below and this loads the popup from the div i.e <div id="detailsView"></div>. All i want to do is to load a popup from a seperate page. ie. from a seperate .CSHTML page. How can i achieve that? Also I want to pass the variable "cellValue" to that cshtml page. Please help me on how to acheive this.

<script type = "text/javascript" >

$(document).ready(function () {       

$('#Grid1').delegate('.ui-iggrid-activerow', 'dblclick', function (e) {                     

var row =  $('#Grid1').igGridSelection('selectedRow');

var dataview = $('#Grid1').data('igGrid').dataSource.dataView();  

var cellValue = dataview[row.index]["ConditionNo"];  

var tipNo = dataview[row.index]["TIPNumber"];

var $dialog = $("#detailsView").dialog({                           autoOpen: false, width: 700, resizable: false, height: 600, modal: true                       });                      

$dialog.dialog('open');                  });    }) </script>