Asp.Net Grid View Control column's cell show/hide using jquery

Asp.Net Grid View Control column's cell show/hide using jquery

Hi,

I am using .Net Framework 4.0 with Asp.Net C# along with Jquery v1.4.4 My problem is that how can i show textbox when i click on edit button and hide when i click on save button.

Here's my Asp.Net Code:

  2. <div>
  3.         <fieldset>
  4.             <legend>GridView selection using jquery</legend>
  5.             <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
  6.                 AutoGenerateColumns="False" BackColor="LightGoldenrodYellow" BorderColor="Tan"
  7.                 BorderWidth="1px" CellPadding="2" DataKeyNames="SkuId" DataSourceID="sdsGridView"
  8.                 ForeColor="Black" GridLines="None"OnRowDataBound="GridView1_RowDataBound">
  9.                 <AlternatingRowStyle BackColor="PaleGoldenrod" />
  10.                 <Columns>
  11.                  <asp:TemplateField>
  12.                         <ItemTemplate>
  13.                             <input id="chkClick" name="chkClick" type="checkbox" />      
  14.                         </ItemTemplate>
  15.                     </asp:TemplateField>
  16.                     <asp:BoundField DataField="SkuId" HeaderText="Id" ReadOnly="True"
  17.                         SortExpression="SkuId" />
  18.                     <asp:BoundField DataField="SkuName" HeaderText="Name" SortExpression="SkuName" />
  19.                     <asp:TemplateField>
  20.                         <ItemTemplate>
  21.                             <input id="txtQuantity" name="txtQuantity" type="text" />
  22.                         </ItemTemplate>
  23.                     </asp:TemplateField>
  24.                     <asp:TemplateField>
  25.                         <ItemTemplate>
  26.                             <asp:LinkButton ID="lnkEdit" runat="server" CausesValidation="false" CommandName="GridEdit"
  27.                                 ClientIDMode="Static">Edit</asp:LinkButton>
  28.                         </ItemTemplate>
  29.                     </asp:TemplateField>
  30.                     <asp:TemplateField>
  31.                         <ItemTemplate>
  32.                             <asp:LinkButton ID="lnkSave" runat="server" CausesValidation="false" CommandName="GridSave"
  33.                                 ClientIDMode="Static">Save</asp:LinkButton>
  34.                         </ItemTemplate>
  35.                     </asp:TemplateField>
  36.                 </Columns>
  37.                 <FooterStyle BackColor="Tan" />
  38.                 <HeaderStyle BackColor="Tan" Font-Bold="True" />
  39.                 <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
  40.                 <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
  41.                 <SortedAscendingCellStyle BackColor="#FAFAE7" />
  42.                 <SortedAscendingHeaderStyle BackColor="#DAC09E" />
  43.                 <SortedDescendingCellStyle BackColor="#E1DB9C" />
  44.                 <SortedDescendingHeaderStyle BackColor="#C2A47B" />
  45.             </asp:GridView>
  46.             <asp:SqlDataSource ID="sdsGridView" runat="server" ConnectionString="<%$ ConnectionStrings:DataConnectionString %>"
  47.                 SelectCommand="SELECT [SkuId], [SkuName] FROM [ProductSku] ORDER BY [SkuId]">
  48.             </asp:SqlDataSource>
  49.         </fieldset>
  50.     </div>

Here's my page.aspx.cs Code:

  2. protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
  3.         {
  4.             if (e.Row.RowType == DataControlRowType.DataRow)
  5.             {
  6.                 LinkButton lnkedit = e.Row.FindControl("lnkEdit") as LinkButton;
  7.                 lnkedit.CommandArgument = e.Row.RowIndex.ToString();

  9.                 LinkButton lnksave = e.Row.FindControl("lnkSave") as LinkButton;
  10.                 lnksave.CommandArgument = e.Row.RowIndex.ToString();

  12.                 int editId = int.Parse(e.Row.Cells[1].Text);
  13.                 int saveId = int.Parse(e.Row.Cells[1].Text);

  15.                 lnkedit.Attributes.Add("onClick", "LoadForEdit('" + editId + "');return false;");       
  16.                 lnksave.Attributes.Add("onClick", "LoadForSave('" + saveId + "');return false;"); 
  17.             }

Here's my Jquery Code:

  2. function LoadForEdit(gridViewId) {

  4.     glbGridViewId = gridViewId;
  5.     $('#txtQuantity').show('slow');
  6.     return false;
  7. }

  9. function LoadForSave(GridViewId) {

  11.     glbGridViewId = GridViewId;
  12.     $('#txtQuantity').Hide('slow');
  13.     return false;
  14. }  
Any idea ? 

Regards

Muhammad Atif Nadeem
Software Engineer
University of Karachi