Batuhan Ozdal Batuhan Ozdal - 7 months ago 14
Javascript Question

Hiding gridview column and get it when clicked

I am trying to learn using jquery with asp.net and I have a gridview. I want to hide userId in gridview but getting Id value of clicked row. Here is my gridview:

<asp:GridView ID="addGridControl" CssClass="mGrid" PagerStyle-CssClass="pgr" AllowPaging="true" PageSize="10" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="EntityDataSource1">
<Columns>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%#Eval("CustomerId") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName"></asp:BoundField>
<asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName"></asp:BoundField>
<asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle"></asp:BoundField>
<asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address"></asp:BoundField>
<asp:BoundField DataField="City" HeaderText="City" SortExpression="City"></asp:BoundField>
<asp:BoundField DataField="Region" HeaderText="Region" SortExpression="Region"></asp:BoundField>
<asp:BoundField DataField="PostalCode" HeaderText="PostalCode" SortExpression="PostalCode"></asp:BoundField>
<asp:BoundField DataField="Country" HeaderText="Country" SortExpression="Country"></asp:BoundField>
<asp:BoundField DataField="Phone" HeaderText="Phone" SortExpression="Phone"></asp:BoundField>
<asp:BoundField DataField="Fax" HeaderText="Fax" SortExpression="Fax"></asp:BoundField>
</Columns>
</asp:GridView>


And here is my jquery attempt:

$("#addGridControl tr").click(function () {
var secilen = $(this).closest('tr').find("#Label1").attr("Text");
alert(secilen);
});


I am sure you can see that it is not working in the first look. What is the correct way of doing this?

Answer

You should replace:

<asp:TemplateField Visible="false">

By

<asp:TemplateField HeaderStyle-CssClass="notVisible" ItemStyle-CssClass="notVisible" FooterStyle-CssClass="notVisible">

With the class style:

.notVisible
{
    display: none;
}

When the Visible property is set to false, ASP.NET removes the control from the HTML output. Consequently, the client code will not find it.