Stone Coast Web Design Blog

I’m working on a project which requires users to have the ability to hide rows in a table associated with a certain value.  I checked around and using jQuery seemed to be the best option.   This is a much more elegant approach than doing it server-side.  Here’s what I did.

First, I included a hidden field as a row in my Gridview.  This field is a bit field (true/false) which two CSS classes and one of which is ‘hiddenField’ which makes the field invisible to the user.

<asp:boundfield DataField="InternalOnly" ShowHeader="true" ItemStyle-CssClass="hiddenField internalField" />

CSS code:

.hiddenField {    
    visibility:hidden;
}

Above the Gridview, I included a checkbox with an Id of chkInternal which the user can toggle to hide/show the rows in the Gridview

<input name="chkInternal" id="chkInternal" type="checkbox" />Exclude Non-product fields

Lastly, I use this bit of jQuery code to hide/show the rows in the table. When the chkInternal checkbox is checked, it applies the CSS property display: none to the the entire table row using the jQuery method .parent. It looks for the second CSS class property ‘internalField’. Conversely, when the checkbox chkInternal is not checked, the CSS property display: block is applied to the row making the row visible again. 

<script language="javascript" type="text/javascript">    
$(document).ready(function() {      
      $('#chkInternal').click(
          function() {
          $('.internalField').each(function() {
             if ($("#chkInternal").is(":checked"))
            {
                if ($(this).text() == "True") 
                        $(this).parent().css('display', 'none');                
            }
            else
            {      
                $(this).parent().css('display', 'block');                
            }
        });                 
    });                      
});
</script>

I came across this amazing CSS reference on MSDN

http://msdn.microsoft.com/en-us/library/ms531205(vs.85).aspx

A couple of sources for great, free Web templates for the design-challenged.

http://www.oswd.org/ 

http://www.opendesigns.org/

This dumb post is just for my own reference.  This catch-all CSS references uses a font style that I like for all of the most common HTML page elements.

body, input, select, textarea, button {font-family:Verdana, sans-serif; font-size:x-small}

Here are a few CSS tools and links that I came across that look useful

• Layoutomatic - Creates a CSS-based basic layout for your page
• List-o-matic - Creates a CSS-based navigation menu for your site
• CSS Cheatsheet - CSS properties with examples
• CSS Zen Garden -  Some really nice examples of the power of CSS