CODEWITHSUNDEEP
cssjqgrid
Arshya
Arshya

Reputation: 690

Row Selector Column in jqGrid

Is there a way to achieve row Selector like in the image in jqGrid. On the leftmost column a pointer like icon when I click on the row.

Thanks!

enter image description here

This is the code I added 

onSelectRow: function(rowId) {
         if (rowId && rowId != lastsel) {
             $(this).jqGrid('restoreRow', lastsel);
             $(this).jqGrid('editRow', rowId, true);

             var ic = "";

             if (lastsel) {
                 $(this).setCell(lastsel, 0, ic, '');
             }

             ic = '<img src="images/ig_tblTri_Black.gif" />';
             $(this).setCell(rowId, 0, ic, '');

             lastsel = rowId;
         }
     }

The code is being executed but the image is not showing.

Upvotes: 0

Views: 913

Answers (1)

Ajo Koshy
Ajo Koshy

Reputation: 1225

You can use the onSelectRow or the onCellSelect event defined for the jqGrid to write a function, that adds or removes an image in the column data

onSelectRow: function(rowId){ 
//code to add image and remove from all other rows
 var ids = $("#grid").jqGrid('getDataIDs');
var ic = "";
for(var i=0;i < ids.length;i++){
jQuery("#grid").jqGrid('setRowData',rowId,{colName:ic});
}
ic = "<img src='path/images/buttons/icon.gif'/>";
jQuery("#grid").jqGrid('setRowData',rowId,{colName:ic});
   },



onCellSelect: function(id, iCol, cellContent, e){ 
//code to add image and remove from all other rows 
 var ids = $("#grid").jqGrid('getDataIDs');
var ic = "";
for(var i=0;i < ids.length;i++){
jQuery("#grid").jqGrid('setRowData',rowId,{colName:ic});
}
ic = "<img src='path/images/buttons/icon.gif'/>";
jQuery("#grid").jqGrid('setRowData',id,{colName:ic});
}

UPDATED :

As @Oleg suggest the other event that can be used without much of an overhead is :
beforeSelectRow: 

beforeSelectRow: function(id, e){ 
//code to add image and remove from all other rows 
 var gsr = jQuery("#grid").jqGrid('getGridParam','selrow');
var ic = "";
jQuery("#grid").jqGrid('setRowData',gsr,{colName:ic});
ic = "<img src='path/images/buttons/icon.gif'/>";
jQuery("#grid").jqGrid('setRowData',id,{colName:ic});
}

Upvotes: 1

Related Questions