Control gridview column visibility using javascript

Question

I have a gridview and I have to control the visiblitiy of the grid columns using javascript. Consider this gridview. I have a few columns.

<asp:GridView ID="grdTest" runat="server" AutoGenerateColumns="False" Width="100%">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox ID="chkResource" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Resource">
            <ItemTemplate>
               <asp:Label ID="Resource" Text='<%# Bind("Resource") %>' runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
               <asp:BoundField DataField="Description" HeaderText="Resource Description" HtmlEncode="false">
        <ItemStyle HorizontalAlign="Center" />
        <HeaderStyle HorizontalAlign="Center" />
    </asp:BoundField>

     </asp:TemplateField>
  </Columns>
</asp:GridView>

I can control the visibility of these columns at the server side by using this -

grdTest.Columns[n].Visible = false;

But, I have to control the visibility from the client side using javascript. I tried a lot but I was only able to access either the row object or any particular cell of the gridview.

grid.rows[index].cells[i].style="display: none"; //for cell

Is there a way to access the column object of the gridview and control its visibility using javascript?

Community · Accepted Answer · 2013-08-05 15:55:40Z

1

You can try with calling server side code. Here is the js function that is used to call the code:

function HideColumns(sender, args)
{
    PageMethods.HideSomeColumns(args, onSuccess, onError);
}

function onReportSuccess(result)
{
}

function onReportError(error)
{
    alert("There was an error.");
}

And here is the server side function that is used to hide the columns that you want:

[WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static void ReportTranslation(int n)
{
    grdTest.Columns[n].Visible = false;
}

There is other option for you - using pure js:

function show_hide_column(col_no, do_show) {

    var stl;
    if (do_show) stl = 'block'
    else         stl = 'none';

    var tbl  = document.getElementById('id_of_table');
    var rows = tbl.getElementsByTagName('tr');

    for (var row=0; row<rows.length;row++) {
      var cels = rows[row].getElementsByTagName('td')
      cels[col_no].style.display=stl;
    }
}

edited Aug 5, 2013 at 15:55

CommunityBot

11 silver badge

answered Jun 19, 2010 at 12:48

Thea

8,0656 gold badges30 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Porter Over a year ago

If you want your table to render properly in all browsers, do not use the javascript above. The CSS display block on table cells isn't natural for all browsers. Chrome for example uses "table-cell". You are better off removing the display CSS setting by setting it to an empty string than setting it to block. This will allow your browser to determine it's own preferred display setting.

Chris Porter · Accepted Answer · 2013-08-05 16:10:22Z

A simpler approach to this would be to use jQuery and set a CSS class name on the cells of the column you want to show/hide.

<asp:GridView ID="grdTest" runat="server" AutoGenerateColumns="False" Width="100%">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate CssClass="hide-me">
                <asp:CheckBox ID="chkResource" runat="server" />
            </ItemTemplate>
       </asp:TemplateField>
    </Columns>
</asp:GridView>

Set the visibility to display:none by default in the stylesheet, or you could alternatively put this in the cell's style:

.hide-me { display: none; }

Then from javascript using jQuery:

$('.click-me').click(function(e) {
    $('.hide-me').show();
    // OR you could use toggle:
    $('.hide-me').toggle();
});

Collectives™ on Stack Overflow

Control gridview column visibility using javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related