How to hide a gridview column on mobile using bootstrap 4?

Question

I have a gridview and I want to hide one column (e.g. BirthDate. Please see the code) on mobile/tablet view using bootstrap. How to achieve it? I found a solution, but bootstrap 3 is used. Thank you in advance.

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" CellSpacing="-1" HorizontalAlign="Center" Height="80px" Width="800px" AutoGenerateColumns="False" EnableModelValidation="True" OnPageIndexChanging="GridView1_PageIndexChanging">
    <RowStyle BackColor="#FFFBD6" ForeColor="#333333" BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" HorizontalAlign="Center" />
    <Columns>
        <asp:BoundField DataField="EmployeeID" HeaderText="Employee">
            <HeaderStyle BorderColor="#CC9966" />
        </asp:BoundField>
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Surname" HeaderText="Surname" />
        <asp:BoundField DataField="BirthDate" HeaderText="Date of Birth">
            <ItemStyle HorizontalAlign="Right" />
        </asp:BoundField>
    </Columns>
</asp:GridView>

Matt Kemp · Answer 1 · 2019-11-06T22:03:35.010

As per this question How to add a CSS class to a BoundField

<asp:BoundField ItemStyle-CssClass="Tag1"/>

or to be consistent with your example, you can add the CssClass to your ItemStyle tag inside your BoundField

<asp:BoundField DataField="BirthDate" HeaderText="Date of Birth">
    <ItemStyle CssClass="d-none d-md-block d-lg-block d-xl-block" HorizontalAlign="Right"></ItemStyle>
</asp:BoundField>

Instead of using the HorizontalAlign attribute, you might want create a CSS class that does the aligning. HorizontalAlign creates this code align="right" on the table cell which is not CSS and can clash.

This will hide the items, to hide the table headers, you need to add a HeaderStyle element inside your BoundField (see below for this)

And then you want to add these Bootstrap classes to only show on screen sizes that are medium, large and extra large (which is the same as hiding on mobile - you might want to hide on medium too, just take that one out):

.d-none .d-md-block .d-lg-block .d-xl-block

See here for others: Hiding Elements with Bootstrap

So your BoundField will look like this:

<asp:BoundField DataField="BirthDate" HeaderText="Date of Birth">
    <HeaderStyle CssClass="d-none d-md-block d-lg-block d-xl-block"></HeaderStyle>
    <ItemStyle CssClass="d-none d-md-block d-lg-block d-xl-block" HorizontalAlign="Right"></ItemStyle>
</asp:BoundField>

Hi my friend. It works as I expected, thank you. But the column's header is not hidden. — echelon, Nov 06 '19 at 17:34
I have updated the answer to hide the header too, that should do what you need. — Matt Kemp, Nov 06 '19 at 21:55

score 0 · Answer 2 · answered Nov 04 '19 at 20:45

Setting a display class on table cells will give weird results. Better use it on the contents. You can use TemplateFields and use a span element with the correct classes in the HeaderText and contents.

<asp:GridView ID="GridView1" AutoGenerateColumns="false" CssClass="table table-striped" GridLines="None" runat="server" ItemType="NameSpace1.Book">
    <Columns>
        <asp:TemplateField HeaderText="Always Visible">
            <ItemTemplate>
                <%# Item.id %>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="<span class='d-md-none'>Visible on Mobile</span>">
            <ItemTemplate>
                <span class="d-md-none"><%# Item.Name %></span>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="<span class='d-none d-md-block'>Visible on Desktop</span>">
            <ItemTemplate>
                <span class="d-none d-md-block"><%# Item.date.ToLongDateString() %></span>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

How to hide a gridview column on mobile using bootstrap 4?

2 Answers2