How to Hide GridView Column using Javascript on ButtonClick in asp.net?

Question

I have a GridView from which i want to Show the GridColumn on Button Click.

The Column with 'Source' i want to display on Button click using Javascript.

Note:The Button that we click to visible the column is outside the GridView.

<asp:TemplateField HeaderText="Source" ItemStyle-Width="50px" ItemStyle-HorizontalAlign="Center"
    HeaderStyle-HorizontalAlign="Center">
    <ItemTemplate>
 <asp:Button ID="BtnSource" runat="server" CausesValidation="false" OnClick='<%# "return SetRowValues("+Eval("ttppcid")+",this.id,"+Eval("Fair")+","+Eval("Good")+","+Eval("Mint")+","+Eval("Poor")+","+Eval("Broken")+")"%>' Text="Source" />
  </ItemTemplate>
</asp:TemplateField>

Help Appreciated!

Answer 1

try this,

Add JavaScript in your page.

<script type="text/javascript">
    function hideColumn() {
        var gridrows = $("#GridView1 tbody tr");

        for (var i = 0; i < gridrows.length; i++) {
            gridrows[i].cells[1].style.display = "none";
        }
        return false;

    };
</script>

cells[1] instead of you can use your column number. and call this function on OnClientClick="Javascript:return hideColumn();" event.