What is the best way to conceal a gridview column on mobile with bootstrap 4?

I have a gridview and I'm looking for a way to hide a specific column (e.g. BirthDate) when viewing the grid on mobile or tablet devices using bootstrap. Does anyone know how to accomplish this? I came across a solution, but it seems to be tailored for bootstrap 3. Any help would be appreciated. Thank you!

<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>
javascriptmobilebootstrap-4

Answer №1

It is advised not to set a display class on table cells as it may lead to unexpected outcomes. It is recommended to apply the class on the contents instead. Utilizing TemplateFields and incorporating the span element with the appropriate classes in both HeaderText and contents is a better approach.

<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>

Answer №2

In reference to this query on How to include a CSS class in a BoundField

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

Alternatively, you can incorporate the CssClass into your ItemStyle tag within the BoundField for consistency with your example.

<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 utilizing the HorizontalAlign attribute, consider creating a CSS class that handles alignment. Using HorizontalAlign generates align="right" in the table cell, which might lead to conflicts as it's not CSS-based.

To conceal items, add a HeaderStyle element within your BoundField to hide table headers. Include these Bootstrap classes to display only on medium, large, and extra-large screens (effectively hiding on mobile - you may choose to hide on medium screens too by removing that one):

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

Refer to this link for additional information: Hiding Elements with Bootstrap

Therefore, your BoundField should be structured 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can I take to prevent my Bootstrap grid from breaking?

What's on hand: I have implemented Django to populate the Makes in a view. Check out my template below: <div class="container"> <div class="row"> <div class="btn-group" id="makesTable"> {% if makes %} {% for make ...

javascriptdjangohtmltwitter-bootstrapcss

Automatically redirect to a different page upon clicking the jquery popup button

I integrated a jQuery popup feature on my website to display messages. Now, I am looking to implement a redirect to another page when the user clicks a button within the jQuery popup. However, I am unsure of how to achieve this. <script type="text/ja ...

javascriptjquery

Requesting Access-Control-Request-Headers using jQuery Ajax POST method

I am attempting to send an AJAX request to my server. Initially, I referenced a library (in the web) within a <script> tag in my HTML document and executed it using the following code: $.ajax({ url: api_url + "movie/create", type : "POST", con ...

javascriptjqueryajax

Organizing routes into separate modules

As I've accumulated all my routes in one server.js file, it has grown to about 1000 lines making it difficult to manage. I am wondering if there is a straightforward way to separate these routes into different route files without the need to rewrite e ...

javascriptnode.jsexpresssequelize.js

Is there a way to update the content of both spans within a button component that is styled using styled-components in React?

I am interested in creating a unique button component using HTML code like the following: <button class="button_57" role="button"> <span class="text">Button</span> <span>Alternate text</span> ...

javascriptcssreactjsstyled-components

What is the process for creating a duplicate element within the target div after the original element has been dropped?

Imagine a scenario where the "HI" div is dragged into the "DRAG HERE" div, causing the "HI" div to be removed from its original location. What if, instead of disappearing, dragging the "HI" div to another location generated a new "HI" div? /** * Fu ...

javascripthtml

Place the input value within quotation marks when it consists of two or more words

My goal is to have the input value of React Async Select surrounded by quotes if the search term contains multiple words with spaces. const handleSearchText = (value) => { let split = value.split(' ') console.log('split', spl ...

javascriptreactjsasynchronousreact-select

Tips for aligning Bootstrap 4 cards when the first card header breaks at a word and the second card header does not

Currently, I am working on a personal project using bootstrap 4. However, I've encountered an issue with the class "card" in my gallery section. One card header has 'white-space' set which breaks the word, while the other does not have any & ...

htmlcssbootstrap-4

The Malihu jQuery Custom Scrollbar integrated with Meteor is failing to display on the webpage

I have successfully integrated Malihu's custom scrollbar into my meteor app using this package: The code I'm using is as follows: Template.post.rendered = function() { $('body').mCustomScrollbar({ theme: 'minimal-dar ...

javascriptjqueryhtmlcssmeteor

Help Needed: Adding a Simple Element to jQuery Tabs Script

I recently came across a fantastic jQuery tabs script on a website called Tutorialzine. The link to the article can be found here. As I was implementing this script, I realized I needed to customize it by adding specific classes to certain tabs. Specifica ...

javascriptjquerycss

This element is not compatible for use as a JSX component

I have created a React component which looks like this import React from 'react'; import { ECOTileSummary } from './ECOTileSummary'; import { TileSummary } from './TileSummary'; interface SuperTileSummaryProps { date?: s ...

javascriptreactjs

Incorrect variable being updated in Vue.js

I created a filter method called itemsWithFilter to filter the items object and store the results in itemsResult. This function initially works as expected, but I noticed that it automatically updates the original items object. However, I intended for the ...

javascriptvue.js

To combine both jquery-1.min.js and jquery.min.js is essential for achieving optimal functionality

When using these two files, only one of them can work on a page. <script src="jquery.min.js"></script> <script src="jquery-1.min.js"></script>//Only the second one works Alternatively, if the order is changed: <script src="jq ...

javascriptjqueryhtml

It is not possible to alter data within the @change event handler in Vue.js

In this particular component, there is an input[type=file] element. Additionally, within this field, there is an uploadFile handler that invokes the validateMessage method in an attempt to modify the error message displayed. While it appears that after c ...

javascriptinputvue.jsonchange

Trouble with the find() function in jQuery not functioning properly upon page initialization

In my jQuery script, I am attempting to remove the style attribute from all table, tr, and td elements that are within a div element with an id="testdiv". $(document).ready(function(){ $("#testdiv").find("table, tr, td").removeAttr("style"); }); When ...

javascriptjquery

Using regular expressions to replace strings in JavaScript

I have a URL that resembles the following http://localhost:12472/auctions/auction-12/lots/sort/something/12 I am looking to switch it out with this new URL http://localhost:12472/auctions/auction-12/lots/sort/somethingelse/12 Here, somethingelse can be ...

javascriptregexreplace

I'm facing an issue with converting my object to an array as I keep getting the message: "ERROR TypeError: undefined

ERROR TypeError: undefined is not a function Why am I unable to convert my object to an array? This error keeps popping up as I attempt to map all the items that are currently objects but need to be converted into arrays for mapping. How can I accomplish ...

javascriptreactjsreact-native

Is it wise to question the validity of req.body in express.js?

https://expressjs.com/en/4x/api.html mentions It is crucial to validate all properties and values in the req.body object as they are derived from user input. Any operation performed on this object should be validated to prevent security risks. For instan ...

javascriptnode.jsexpress

Unending horizontal flow of divs inside a container div

I have been experimenting with creating a continuous strip of logos that display customer quotes when selected. I have successfully implemented functionality for selecting and displaying the logos and quotes. However, I am facing an issue with making the l ...

javascriptjqueryhtmlcss

Is it possible to refresh a div on one .aspx page using content from another .aspx page?

Just beginning my journey with asp.net and currently tackling a project that involves two .aspx pages. Events.aspx: This page is where the site admin can update upcoming events and webinars using an available panel to input event title, date, information ...

c#javascriptjqueryasp.nethtml