title: jquery function to Hide webgrid column
body: <p>I am working with asp .net MVC3 to hover selected columns.There is a grid,Multiselect Listbox and a button in a page.I am using the following webgrid to display table.</p>
  
  <pre><code>  @{
  var grid = new WebGrid(Model.oTravelReadyEntities, canPage: true, rowsPerPage: 3);
  grid.Pager(WebGridPagerModes.NextPrevious);
  @grid.GetHtml(tableStyle:"WebGrid",
  headerStyle:"Header",
  alternatingRowStyle:"alt",
  columns:grid.Columns(
  grid.Column("Var_AssoId", "Var_AssoId", canSort: true, format: @&lt;b&gt;@item.Var_AssoId&lt;/b&gt;,style:"Number"),
  grid.Column("Var_AssociateName", "Var_AssociateName"),
  grid.Column("Var_Grade", "Var_Grade"),
  grid.Column("Char_VirtualPool", "Char_VirtualPool"),
  grid.Column("Var_VirtualPoolCatagory", "Var_VirtualPoolCatagory"),
  grid.Column("Char_VisaUtilization", "Char_VisaUtilization"),
  grid.Column("Var_SupervisorId", "Var_SupervisorId"),
  grid.Column("Var_SupervisorName", "Var_SupervisorName"),
  grid.Column("Var_Deparment", "Var_Deparment"),
  grid.Column("Var_Vertical", "Var_Vertical"),
  grid.Column("Var_AccountName", "Var_AccountName"),
  grid.Column("Var_Project_Desc", "Var_Project_Desc")
  ));
  </code></pre>
  
  <p>}</p>
  
  <p>At runtime i'll select the column names from the multiple listbox which is placed under webgrid after selecting ColumnNames when i click the show button, the webgrid should show only the selected columns,Other columns should be hided.how can i do it using jquery?</p>