Display a Datagrid table featuring numerous column headers across multiple pages using asp.net

Unable to provide more details on the title, please refer to the links below. Using DataGrid (not GridView) in ASP.net with VB code.

Current display in my datagrid: view picture1 here, I want it to be like this view picture2 here

The goal is to split my datagrid into multiple parts if there are multiple columns. This splitting is necessary for a better print preview in Google Chrome. The current output has all multicolumn data packed in one grid, making it difficult to read and comprehend, like shown here in picture3

If you have any suggestions on how to improve printing the datagrid in browsers, I would appreciate it. TIA.

<asp:DataGrid Visible ="true" OnItemDataBound="Item_Bound" ID="dgSheet" 
   runat="server" BackColor="White" BorderColor="black"  BorderStyle="None" 
   BorderWidth="1px" CellSpacing="0" CellPadding="0" Width="100%" PageSize="5"
   CssClass="Narrow" ForeColor="Black">
 <EditItemStyle BackColor="#999999" />
 <FooterStyle BackColor="#2980b9" Font-Bold="True" ForeColor="White" />
 <PagerStyle BackColor="#2980b9" ForeColor="White" HorizontalAlign="Center" />
 <ItemStyle Font-Size="12px" Width="200"  ForeColor="#333333" />
 <HeaderStyle Font-Bold="true" Font-Size="12px" Width="200"  ForeColor="black" />
 <SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
</asp:DataGrid>

Part of my code behind for displaying data in the datagrid:

   Dim o_Row As DataRow
    Dim o_AdmDates As New Collection()
    Dim s_LastAdmDate As String = ""
    Dim s_AdmDate As String = ""
    Dim o_DerivedTable As New DataTable()

    With o_DerivedTable

        .Columns.Add("TransDate")
        .Columns.Add("Medication")
        .Columns.Add("Dosage")
        .Columns.Add("TransNum")
        .Columns.Add("AdministeredDate")
        .Columns.Add("newAdmed")
    End With

    'Sorting by administered dates
    Dim o_FoundRows As DataRow() = o_Dataset.Tables(0).Select("", "AdministeredDate Desc")

    'Extracting distinct administered dates
    For Each o_Row In o_FoundRows
        s_AdmDate = Format(CDate(o_Row.Item("AdministeredDate")), KC_Date_Format2)

        If s_LastAdmDate <> s_AdmDate Then
            s_LastAdmDate = s_AdmDate
            o_AdmDates.Add(s_LastAdmDate)
        End If
    Next

    'Adding administred date to derived table
    Dim o_Item As String
    For Each o_Item In o_AdmDates
        o_DerivedTable.Columns.Add(o_Item)
    Next

    'Looping through the administred date
    Dim o_NewRow As DataRow
    Dim o_NextRow As DataRow
    Dim i_Ctr As Integer
    Dim x_isNewRow As Boolean = True
    Dim i_MaxRec As Integer

    i_MaxRec = o_Dataset.Tables(0).Rows.Count - 1

    For i_Ctr = 0 To i_MaxRec
        o_Row = o_Dataset.Tables(0).Rows(i_Ctr)
        If i_Ctr <> i_MaxRec Then
            o_NextRow = o_Dataset.Tables(0).Rows(i_Ctr + 1)
        End If

        If x_isNewRow Then
            o_NewRow = o_DerivedTable.NewRow()
        End If

       //Additional code lines continue...

Answer №1

Let me start by clarifying that what you're looking to print is not the datagrid itself, but rather the HTML content generated by it. This means that any printing functionality needs to be implemented on the client side. As per your description, breaking the table and then printing seems to be the approach. I'm providing an HTML snippet below which you can use as a reference to modify it according to your specific needs; make sure to adjust the datagrid's ID at the very least.

Below is the code snippet:

[As no generated HTML was shared, a sample table has been created for demonstration purposes]

<table id="printedOrderExports" class="customTheme">
    <tr>
        <td class="bold">Export ID</td>
        <td class="bold">Request Type</td>
        <td class="bold">Timeframe</td>
        <td class="bold">Search Filter</td>
        <td class="bold">Search Term</td>
        <td class="bold">>Requested On</td>
        <td class="bold">>Processed On</td>
        <td class="bold">>Export Status</td>
        <td class="bold">>Download</td>
    </tr>

    [Sample rows included here]
    
</table>

<input id="Button1" type="button" value="Print" onclick="print_table_breakup()" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" language="javascript" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
function print_table_breakup() {
    // JavaScript function logic for breaking up the table for printing goes here
}
</script>

Answer №2

When considering the use of window.print, it is best practice to avoid dependency on inline styles by implementing two distinct style sheets: one for media="screen" and another for media="print"

To have complete control over the output, consider utilizing a reporting engine such as Crystal Report or Telerik Reporting

Answer №3

To achieve the desired layout of tables, you will need to create a custom view with the specific arrangement. Once the view is set up, you can include a print button.

 <a class="miniprint" href="/url/to/print/view">Print</a>

Here's the necessary Javascript code:

$(document).on('click', '.miniprint', function (event) {
    event.preventDefault();
    var self = $(this);
    var url = self.attr("href");
    $("#printjob").remove();
    $('<iframe id="printjob" src="' + url + '">')
    .load(function () {
        this.focus();
        document.getElementById("printjob").contentWindow.print();
    })
    .css({ position: "absolute", left: "-10000px", top: "0px" })
    .appendTo(document.body);
});

Furthermore, it is advisable to specify printing in landscape mode for Google Chrome:

@media print {
  @page {size: landscape}
}

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

Icon with label and border using Font Awesome

I'm looking to recreate this design using HTML and CSS: https://i.sstatic.net/LUgGW.png The icon I'm trying to replicate is actually from font awesome. Here's what I've accomplished so far: https://jsfiddle.net/0Lewug6p/1/ &l ...

Can a handler show multiple images simultaneously?

I have a specific requirement where I need to use a single Generic Handler (.ashx) to display an image dynamically. I am working with asp.net and c# for this project. The images that need to be displayed are generated dynamically, and I have a Web User Con ...

Having trouble retrieving hidden field value in JavaScript

I am encountering an issue with retrieving hidden field values that were set during page load in the code behind. The problem arises when attempting to access these values in JavaScript, as they are returning as undefined or null. I am unable to retrieve ...

Building a drop down menu with HTML and CSS: a step-by-step guide

Looking for a way to create a dropdown menu for the list item with the id "gameDesignPage" in my HTML structure: <div class="MenuContainer"> <div class="Menu"> <div class="MenuContents"> <ul> ...

Changing the bootstrap popover location

I'm looking to customize the position of a Bootstrap popover that appears outside of a panel. Here's my setup: HTML: <div class="panel"> <div class="panel-body"> <input type="text" id="text_input" data-toggle="popover ...

Create a responsive layout of inline-block elements that adjusts to resizing

I am currently focusing on developing the website found at: The progress so far includes successfully creating a list of div.project-item elements that adjust the number of columns based on window resizing due to the use of inline-blocks. My next goal is ...

Utilizing extra CSS for a full-width Wordpress featured image makes for a visually stunning design

Is there a way to customize the CSS of a featured image in Wordpress Version 5.9.2 to appear full width? Currently, the image has a large margin and does not fill the entire width as seen on the page below: I attempted to achieve this by adding code to th ...

Arranging images and their descriptions side by side in CSS and HTML

I am facing an issue with a row containing 5 images and descriptions below them. If the descriptions do not have the same width, the images do not stay on the same row anymore; they go up and down. Here is my current setup: https://i.sstatic.net/c9smB.pn ...

Learn how to reposition the mat-option easily

I have an angular app with an autocomplete field that I need to adjust the position of. I have consulted the official documentation under the method updatePosition, which states: "Updates the position of the autocomplete suggestion panel to ensure that it ...

jQuery will envelop the HTML elements in an inconsequential div

Imagine a website that is visually complex, with various styles and images positioned in different ways. What if we wanted to add a small overlay icon above each image? At first, the solution might seem simple - just use absolute positioning for a span el ...

Switch between display modes by clicking using collections

I am trying to figure out how to create a function that will only show content for the specific element in which my button is located. Currently, when I click the button it shows content for all elements with the 'one' class, but I want it to dis ...

Submit Your CCS Style Request Here!

The form at the top of this page was created using AWeber. I am trying to replicate a similar form, but I am struggling to position the sign-up part to the right of the email field, like in the example page. Sample page: I want to achieve a form layout s ...

The webpage's scrollbar has vanished and the div element is unable to stretch to the bottom

I'm in need of some help understanding why my scrollbar has disappeared and why the scrolling area does not reach the bottom. You can find the website in question here. Appreciate any assistance on this matter. Thanks! ...

When utilizing the data-target attribute, the Bootstrap dropdown becomes toggled

My Bootstrap dropdown is giving me trouble when I use it with data target. Removing data-target from the button makes it work, but then my website's dropdown only opens on the second click. So I tried using data-target to fix it, but now it won' ...

What could be causing the alignment issue with cells in Bootstrap?

I'm currently facing an issue with Bootstrap where two columns that are supposed to appear side-by-side on medium resolution end up displaying one below the other. You can view a screenshot of the problem here, and the code can be found at this link. ...

Content not aligned in the center of the page on Internet Explorer

Recently, I've taken on the responsibility of managing the content for this website after it was passed down from the previous developer. Each page's content is contained within a div element with the class "ct", which has auto margins applied t ...

Tips for setting up nextjs with typescript to utilize sass and nextjs font styles

I am attempting to configure a Next.js TypeScript app to work with Sass and a font in Next.js. I have been following the steps outlined in this article. Without the font module, styles are working correctly. Below is my next.config.js without the font co ...

What could be the reason that setting document.body.style.backgroundImage does not apply to the body element itself?

Consider an HTML document with the given CSS: body { background: url("http://via.placeholder.com/200x200"); width: 200px; height: 200px; } Why does the following code not display the background image URL when executed: console.log(document.body. ...

Move the close button on Bootstrap's Modal to the left side

I am currently in the process of building a new website and I am still learning HTML, CSS, and other related technologies. I am utilizing Bootstrap to assist me, but I have run into a problem. The website I am working on is in Hebrew and I am struggling to ...

How can I set up multiple Bootstrap tooltips with Blazor server-side components?

I've been attempting to set up multiple tooltips on a page, including ones in Blazer components, but for some reason nothing seems to be working and there are no error messages. The following code did not produce the desired results: const tooltipTri ...