I'm meaning in my grid which has 4 columns, the first with a ddl provider, 2 & 3 with read only data and the 4th column with a button.  When they click on the button, I want to hide the entire row, but this solution only seems to hide the button (template row).

Cliff

This solution only hides the button in the rightmost column, not the entire row, which is what I'm looking for (in javascript).

Cliff

Hide is working fine but if i want to show the rows again on a button click how will i do. Tried by adding "showrow" css class but its not working.

Hi aschoi,

The objects are not the same on the client and the server.  On the client you should do the following

$util.addCompoundClass(currentRow.get_element(), "hiderow");

instead of 

currentRow.CssClass = "hiderow";

Your line of code just makes a property on the javascript object, but does not actually change the DOM element's className property.

regards,
David Young 

I saw your answer. I tried and it works. Then I tried to move the same logic to Javascript to do client side row hiding because I do not want to have postback to the server. However, it does not work. My code snippet is below. Could you be so kind to let me know why the following does not work? Thanks.

var templateGrid = $find(m_templateGridId);

var rowsLength = templateGrid.get_rows().get_length();

 
                 for (var i = 0; i < rowsLength; i++) {
 
                     var currentRow = templateGrid.get_rows().get_row(i);
                     currentRow.CssClass = "hiderow";
                   }

The style looks like this.
.hideRow {
	visibility: hidden;
	display: none;
}