Customizing listview appearance in asp.net with css and enhancing with javascript

When I print, the css class is not being used although it appears when using the program

        <script type="text/javascript">
        function printDiv() {
            var divToPrint = document.getElementById('DivIdToPrint');
            var newWin = window.open('', 'Print-Window');

            //newWin.document.open();
            newWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</body></html>');
            newWin.document.close();
            setTimeout(function() { newWin.close(); }, 10);
        }

    </script>



 <div id="DivIdToPrint" class="ListadoLicencias">
          <asp:Listview>
      </div>

                 <br />
  <asp:Button runat="server" ID="cmdImprimir" Text="Imprimir" OnClientClick="printDiv();"  />

Answer №1

It seems that the issue lies in the functionality of the innerHTML method, as it specifically targets the inner HTML content. One possible solution could be:

newWin.document.write(
    '<html><body><div id="DivIdToPrint" class="ListadoLicencias">'
        + divToPrint.innerHTML
        + '</div></body></html>'
);

Alternatively, you can extract the innerHTML from the parent element instead.

In order to ensure that your styles are applied correctly, consider enhancing the HTML content generated within your popup function with:

<html><head><link href="style.css" rel="stylesheet"/></head><!-- ... --></html>

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 should I take to implement the features I want using Node.js?

My request is as follows: I need to pass an array of IDs to a function that will perform the following tasks: Check if a document exists in MongoDB. If it does, move on to the next ID. If not, create a document with the specified ID. If all the IDs ...

Problems with navigation, not functioning properly due to issues with Pulled functions

I am still getting the hang of things and struggling with the terminology, so please bear with me as I try to explain my issue. Currently, I am working on a project in react native where I have two files - Header.js and footer.js. I have successfully impo ...

Solving filtering issues within React using a combination of conditions

I've been struggling to selectively remove an item from my array. The current filter I'm using is removing too much. Here is the array in question: [ { "domain": "domain1.com", "slug": "moni ...

Calling a JavaScript function from server-side code (without using startup scripts)

In essence, my objective is as follows: Initiate deletion of a record upon button click. Delete the record only if a specific column (Location) is null (working perfectly). If the specific column is not null, prompt the user for confirmation before proce ...

Calculate the total value of each individual subject from the checkbox's data-id, presented in a string format and separated by commas

<div> <input type="checkbox" id="Q_1_ck1" value="R" data-id="Environmental Science, Physical Education, Agriculture, Yoga, "> <label class="custom-control-label" for="Q_1_ck1"> ...

Abnormal scrolling issues observed on handheld devices like mobile phones and tablets

I recently added a parallax effect to the hero section of my website, and while it works perfectly on desktop, I encountered some scrolling issues when viewing it on mobile or tablet devices. Sometimes the scrolling behaves as intended, and other times it ...

Combining JQuery with ASP.NET Web Forms to create dynamic and interactive web

I have embarked on creating an ASP.NET Web Form application that aims to incorporate some cool jQuery features and visual appeal. One part of my application includes two jQuery UI tabs: a search tab and a results tab. Upon conducting a search from the sear ...

Positioning of header, main content, and footer elements

My webpage is structured into three sections: the header, the main, and the footer. The header at the top has a fixed height of 109px with a 6px border. The main section should extend across the entire page below the header and reach the bottom where the ...

Is the parallax effect achieved by stacking one div on top of another div?

Here is a sample of my HTML code: <div id="a" class="panels">FIXED PANEL</div> <div id="b" class="panels">Scrolling-Panel 1</div> <div id="c" class="panels">Scrolling ...

Altering Collada texture information during the loading process of the .jpg file

Is there a way to modify the texture image data, such as changing the .jpg header text, when loading the .jpg texture in three.js? I am curious if the texture data is accessible somewhere within the code, possibly as a string. How could I go about this? ...

Arrange and display similar objects together

I have a list of items in a listView that need to be visually grouped based on their class, displayed within boxes. For example, I have 5 items with the following classes: <div class="1"></div> <div class="1"></div> <div class= ...

Exploring the differences between req.params and req.query when working with Next.js dynamic API routes

I am perplexed by the difference in accessing params in my Next.js API routes compared to traditional express routes. In order to access a specific dynamic route ID, I find myself using req.query instead of the usual params. Is this the preferred method fo ...

How can I display color without using Winston's color formatter in text?

Currently, I am in the process of developing a logging module using winston as the selected logging framework. It offers the convenience of specifying colors, which is particularly appealing when utilizing the Console transport. However, if I were to defin ...

Curious about the method of refining a list based on another list?

As a beginner in coding, I am facing a challenge in my code.org assignment. I need to filter songs by a specific artist from a dataset. Currently, I have code that randomly selects an artist, but I am struggling to filter out songs by that artist from the ...

Ways to utilize built-in features from a Java library that has been incorporated

I have embarked on a project to create a Nativescript wrapper for a Java library in order to harness its functionalities for a Nativescript application. Despite the lack of detailed articles on this topic, I have decided to turn this into a plugin wrapper ...

extracting the value of a chosen radio button in AngularJS using HTML

When attempting to retrieve the selected value from a radio button, I am encountering an issue where choosing "teacher" still shows as "student." Here is the HTML file: <!DOCTYPE html> <html ng-app="phase2"> ... (HTML code continues) Rige ...

JavaScript code to generate a random color for the box shadow effect

Recently, I developed a function that generates random divs containing circles. The function randomly selects a border color for each circle, and this feature is functioning correctly. To enhance the appearance, I decided to add a box shadow to the circl ...

What is the best way to resize a PDF to match the width and height of a canvas using

I need help with a project involving rendering previews of PDF documents in a UI similar to Google Docs. {documents.map((doc) => { return ( <div key={doc.id} className=" ...

vue mapGetters not fetching data synchronously

Utilizing vuex for state management in my application, I am implementing one-way binding with my form. <script> import { mapGetters } from 'vuex' import store from 'vuex-store' import DataWidget from '../../../../uiCo ...

Ways to retrieve keys from the json object below

Working on integrating handsontable with a php backend, I'm attempting to dynamically generate table column headers. This involves creating an array of column names that will be used in handsontable like so: colHeaders: ['ID', 'First&a ...