How to: Show Image in Row Header of Selected Rows in C1GridView

Selection is a very common feature used in C1GridView, which allows users to select rows and applies a highlight color on the selected rows. However many a times there is a requirement to make this row selection more visual, by showing some image like ">>" in the row header, which would enable user to identify the selected rows very easily. This blog explains how you can add images to the row header(s) of the selected row(s).Take a look at what we’re going to accomplish through this blog :

Event to Capture Selected Row Indices

To add images in row header, we need to get the indices of the selected rows in the OnClientSelectionChanged event of C1GridView.

Getting Selected Row Indices

Here in this section, we've used two variables rowIndex & removedRowIndex. These variables contain the indices of selected rows and removed rows respectively.

function C1GridView_OnSelectionChange(e, args) {  
   var rowIndex = args.addedCells._getSelectedRowsIndicies()[0];  
   var removedRowIndex = args.removedCells._getSelectedRowsIndicies();  
}

Inserting Image in Row Header

Using :eq selector of jQuery we can get the row with the specific rowIndex. In the code section below <img src='right.bmp' defines the image for the selected row header, which you can modify as per your project requirement. After a row is deselected we've to remove the image from the row header, that is done by setting the innerHTML="" for deselected rows.

$(".wijmo-wijgrid-rowheader:eq(" + (rowIndex) + ")").find("div")[0].innerHTML = "<img alt="a" src="right.bmp" />";  
 if (removedRowIndex != undefined) {  
   for (var x = 0; x < removedRowIndex.length; x++) {  
   $(".wijmo-wijgrid-rowheader:eq(" + (removedRowIndex[x]) + ")").find("div")[0].innerHTML = "";  
 }  
}

Now for all the rows you select there would be an image in the row header(s), indicating the selected row(s). Please download the attached sample for complete implementation. Download Sample