How can I show pagination links as buttons on a gridview in ASP.NET?

When working on asp.net web forms, I encountered an issue where I was unable to display pagination links as buttons with a gray background on the grid view control.

To achieve this, I needed to assign a CSS class to the pager style on the grid view in order to display the links as buttons with a gray background, similar to what is shown in the image below:

  <asp:GridView ID="GridViewSearchData" runat="server" AutoGenerateColumns="false" DataKeyNames="ID"   AllowPaging="true" OnPageIndexChanging="grdData_PageIndexChanging" PageSize="10" >
                               
                                 
                               
 <PagerStyle CssClass=""/>
</asp:GridView>

In the CSS class, I needed to assign a class to the pager style that would display the link as a button. If there was an alternative method without using CSS, I was open to suggestions.

   <style type="text/css">
   // Any guidance on how to achieve this?

    </style

Expected result:

https://i.sstatic.net/fnVzT.png

Updated Answer:

I managed to apply a square box around the page number but now I need to increase the height and width of the box surrounding the page numbers (e.g., 1,2,3, etc.). Is it possible to also change the background color of the page numbers to match the image provided?

After making the changes as suggested, I noticed that the buttons were not the same size and did not have the same background. How can I modify the CSS to rectify this issue?

https://i.sstatic.net/Wd4Jp.png

cssasp.netbootstrap-4gridview

Answer №1

There is an abundance of pager examples available.

However, incorporating this style sheet can enhance the appearance:

<style type="text/css">
    body {
        font-family: Arial;
        font-size: 10pt;
    }

    .GridPager a, .GridPager span {
        display: block;
        height: 20px;
        width: 18px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
    }

    .GridPager a {
        background-color: #f5f5f5;
        color: #969696;
        border: 1px solid #969696;
    }

    .GridPager span {
        background-color: #A1DCF2;
        color: #000;
        border: 1px solid #3AC0F2;
    }
</style>

Add a class for the pager functionality:

<PagerStyle CssClass="GridPager" />

You will now observe/obtain the following output:

https://i.sstatic.net/BadlL.png

Alternatively, consider using more playful round shapes like these:

https://i.sstatic.net/LCn48.png

For instance, this approach:

<style>
    .GridPager2 body {
        font-family: Arial;
        font-size: 10pt;
    }

    .GridPager2 a, .GridPager2 span {
        display: block;
        height: 22px;
        width: 28px;
        text-align: center;
        margin-right: 12px;
        box-shadow: 4px 4px 4px 0px gray;
        border-radius: 10px;
    }

    .GridPager2 a {
        background-color: #ddd5d5;
        border: 1px solid #969696;
        margin-right: 12px;
        box-shadow: 4px 4px 4px 0px gray;
        border-radius: 10px;
    }

        .GridPager2` a:hover {
            background-color: #789eca;
            transition: 0.5s;
        }

    .GridPager2 span {
        background-color: #808080;
        color: #000;
        border: 1px solid #3AC0F2;
    }

</style>

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

The Angular formGroup isn't activating the radio button as expected

Hey there! I'm currently working on react forms within Angular. My goal is to have two radio buttons selected based on the true/false status in the database. When the variable viernesOk is set to true, everything works perfectly (the "SI" radio butto ...

angularformsbootstrap-4angular-materialradio-button

When hovered over, the Dropdown Menu vanishes into thin air

I'm looking to implement a simple CSS dropdown menu on my website. Here is the code: #topNav { font-size: 12px; width: 970px; margin: 0 auto; height: 33px; background: url(images/menubg.png); /*border-bottom: solid 1px #cccccc;*/ } #topNav ul { margi ...

css

Styling with CSS and Angular: Loading background images dynamically with a greyscale effect

Incorporating the image displayed above as a background photo in CSS is my current objective using Angular. My aim is to alter the photo path for each new item added to my list. As it stands, the styles are hardcoded, resulting in a constant image that fun ...

jqueryhtmlcssangularjs

Switching button appearance when hovered over

Looking to create a page layout with 4 buttons, each occupying one quadrant of the page? These buttons should feature images as their background and change to different images when hovered over. Wondering how this can be achieved using CSS? ...

htmlcss

The Bootstrap form validation is preventing the Ajax request from functioning properly

Having successfully implemented a form with Bootstrap validation, I encountered an issue where the AJAX Post method fails to execute after validation. The catch clause does not capture any errors and only the ajax portion of the code doesn't run. Belo ...

javascriptjqueryajaxbootstrap-4

div table with varying cell styles on each row

Is it feasible to achieve a table layout resembling the one depicted below using only div tags and CSS? _________________________________________________ | | | | | | | | ...

htmlcss

The Bootstrap Navbar fails to function properly when viewed on mobile devices

As a newcomer to BOOTSTRAP 5 and web development in general, I am currently working on creating a simple website using it. I have added a navigation bar, but when I switch my browser to mobile mode, the dropdown menu doesn't work properly and all the ...

htmlcssbootstrap-5

What sets apart Response.Write() from Response.Output.Write()?

Similar Question: What is the distinction between Response.Write() and Response.Output.Write()? Can you clarify how response.write() differs from response.output.write()? Please provide an explanation. ...

c#asp.net

Having trouble loading CSS in an express view with a router

I am encountering an issue where I am unable to load my CSS into a view that is being rendered from a Router. The CSS loads perfectly fine for a view rendered from app.js at the root of the project directory. Below is my current directory structure, node_ ...

javascriptcssnode.jsexpress

I'm experiencing issues with my code involving HTML, CSS, and jQuery

Recently, I started learning about jQuery and came across a tutorial on creating a sticky nav bar. However, something went wrong during the implementation and now I don't know how to fix it! In my Script file, I have written code that should run on l ...

javascriptjqueryhtmlcss

Creating a Music Bingo game to ring in the New Year

Looking to create a Music Bingo game for New Year's Eve with randomized songs that can be selected, but experiencing an issue where nothing happens when you have 4 in a row. Attempted adding a submit button, but it doesn't trigger any action. Ide ...

javascripthtmlcss

Having trouble loading content on Bootstrap 4 pill tabs in Rails 4?

Currently, I am attempting to load partials in three separate tabs using Bootstrap 4 tab/pill navigation. However, the tabs themselves are not activating and only default is being used. Additionally, I am wondering if it is possible to AJAX refresh the par ...

ruby-on-railsajaxbootstrap-4

IE10 has a problem with the height being set to 100%, but it seems to work fine in Quirks mode in IE and all

Check out this page for reference: I've noticed an issue with scrolling in Internet Explorer, while other browsers seem to be fine. Can you help me understand why IE is causing the scroll and how I can fix it? Thank you, Judson Here's the cod ...

javascripthtmlcss

Bootstrap alert JS refuses to slide down

Here is the JavaScript code to make a blue bar slide down on click: $('#comment').click(function(e) { e.preventDefault(); $('#comment').slideDown(); }); ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to achieve a curved outer edge for a rectangle using CSS?

I am trying to style the header and footer of my website, which is built using a SAAS CMS. Unfortunately, I am unable to change the HTML structure, but I can add custom CSS. My goal is to create curved headers and footers with upward and downward curves. I ...

cssbootstrap-4

Tips on how to include a single quote within a JSON value when making a webservice call

I am attempting to connect to a JSON ASP.NET web service using .NET. Everything goes smoothly when I send " { county : 'whatever' } ", but I encounter a 500 Internal Server Error when I try something like " { county : 'It\'s ok&ap ...

.netasp.netjson

The webpage fails to display Vue Bootstrap radio buttons in a filled state

Hey there! I've been working on a project using vuejs and bootstrap-vue-3. My goal is to allow users to print data about the company, so I created a print scss file for that purpose and added some styles. However, I'm facing an issue where the ra ...

javascriptbootstrap-4vuejs3

Display the page number when printing using CSS

I am struggling to display the page number at the bottom of my printable document. I followed a source on Stack Overflow, but unfortunately, it did not work for me. My current CSS attempt to achieve this is as follows: body { text-align: justify; } /* ...

htmlcss

The TextBox will alter its color following an incorrect submission

I am struggling to create a bootstrap form that will change the color of the borders to red after incorrect submission. The issue I am facing is that the textbox always remains in red. Does anyone have any suggestions for setting the textbox borders to red ...

javascripthtmlcssbootstrap-4

I have implemented a custom-built sidebar component and I'm unsure about the process of adding data to it

After successfully incorporating this SideBar into my Vuex/Laravel project, I encountered a problem. The example code provided used: <div :class="$style.sidebar"/> However, when I tried to modify it to: <div :class="$style.sidebar">Content&l ...

htmlcssvue.jsvuexsidebar