Managing the orientation of the print grid panel in ext.net

I have a grid panel on my webpage with a toolbar that includes a print button to print the content of the grid view. The layout direction of the grid is set from Right to Left (RTL) to accommodate Arabic text.

However, when I click on the print button, the grid direction displays from left to right instead, which is inaccurate.

< ext:Button ID="btnPrintPageGrid" runat="server" Text="طباعة الصفحة الحالية فقط" Icon="Printer" Handler="this.up('grid').print({currentPageOnly : true });" />

I have looked for any options to fix this issue in the button functionality but haven't found a solution. I also attempted to add (rtl: true), but it didn't work...

Can anyone offer assistance?

Answer №1

Utilize the Microsoft Report Viewer for printing and I highly recommend it. Create a high-quality report on an aspx page and display it within a frame in a popup window. Ensuring alignment issues are non-existent is crucial.

Alternatively, construct the report as HTML and embed it into the frame. Check out this functional example: http://jsfiddle.net/D4K3E/1/, here is the specified code:

ShowPrintWindow = function (frameUrl, title, width, height, hidePrintButton) {
    height = height ? height : 509;
    width = width ? width : 675;
    if (typeof (title) == 'undefined') title = 'Print';
    var win = Ext.create('Ext.window.Window', {
        id: 'printWindow',
        width: width,
        height: height,
        autoDestroy: true,
        title: title,
        iconCls: 'icon-printer',
        modal: true,
        items: [{
            border: false,
            html: '<iframe id="printFrame" src="' +
            frameUrl +
            '" width="' + 
            (width - 12) +
            '" height="' +
            (height - 61) +
            '" frameborder="0"></iframe>'
        }],
        layout: 'fit',
        buttons: [{
            iconCls: 'icon-printer',
            text: 'Print',
            hidden: hidePrintButton ? true : false,
            listeners: {
                click: {
                    fn: function (item, e) {
                        printIframe('printFrame');
                    }
                }
            }
        }, {
            text: 'Close',
            listeners: {
                click: {
                    fn: function (item, e) {
                        Ext.getCmp('printWindow').close();
                    }
                }
            }
        }]
    }).show();
};

function printIframe(id) {
    var iframe = document.frames ? document.frames[id] : document.getElementById(id);
    var ifWin = iframe.contentWindow || iframe;
    iframe.focus();
    ifWin.print();
    return false;
}

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

Discover the highest value within an array of objects, along with any numerical object attributes that have a value greater than zero

Considering an array of objects structured as follows: [{ "202201": { "WO": 900, "WS": 0, "SY": 0.915, "LY": 0.98, "CT": 75 }, "202202" ...

Generating additional react-select dropdowns depending on the selection made in the initial dropdown menu

I am currently working on a travel website. I am in need of a dropdown menu for users to select the number of children they will be traveling with, with options for 1, 2, or 3. If the user chooses 1 child, then an additional react-select element should ...

Step-by-step guide on running two JavaScript codes sequentially to ensure accurate results

I am currently working on an MVC project where I need to display the user's current location city in the top right corner of a webpage. The first javascript code fetches the city name, and the second one retrieves the weather conditions of that city. ...

Picking Numerous Options in ListBox from GridView Column

I'm facing a peculiar situation with my databound Listbox that has Multiselect enabled. When I populate it with information from a GridView column on page load, I use the following code to select matching options: string[] separators = { "<br /> ...

Navigate the Angular interceptor route to display a 404 error page when clicking on a `<a href="#">` tag

When using href="#" as a placeholder in html, I encountered an issue where Angular was unable to recognize it and would route to the 404 page despite having the following configuration in the module. How can this problem be resolved? .config( function m ...

What is the best way to obtain the value of a Promise within a function?

When working with Promises, accessing the value inside the .then method is simple. Take a look at this example: const Promise = require("bluebird"); const fs = Promise.promisifyAll(require('fs')); const mergeValues = require('./helper' ...

Compatibility of Typescript with local storage

Can Typescript interact with local storage in any way? I have been setting items using the following code: localStorage.setItem('someString', JSON.stringify(MyTypescriptObject)); This method stores the object as a plain string. For example: ...

JavaScript drop-down menu malfunctioning

I am currently in the process of learning web development languages, and I'm attempting to create a dropdown list using JavaScript (I previously tried in CSS without success). I would greatly appreciate it if you could review my code and let me know ...

Choose a paragraph of text that spans multiple lines without exceeding the width

In the image above, the red selection crosses outside of the yellow area when selecting. I would like to only select within the yellow part as shown below: Here is the HTML: <div id="parent"> <div id="child"> This is some content. ...

An effective way to verify if a record has been successfully updated is by utilizing Sequelize's

Within this snippet of code, I made an update to a specific record in the IPAdress model. What is the best way for me to verify if the record has been successfully updated or not? let IPAdress = await model.IPAdress.update(data,{ where: { id } }); ...

"Maintaining Consistency: Ensuring The First Row is Repeated on Every

When trying to save a PDF using jspdf, I encountered an issue with tables in my HTML. The tables do not have headers, but JsPDF is automatically repeating the first row of the table on every page, causing overlap. I don't want headers on every new pag ...

Creating a new music application and looking for ways to keep track of and update the number of plays for

I'm currently developing a music app and am looking for a way to update the play count every time a user listens to a song for at least 30 seconds. I've attempted the following approach: let current_final; let current_initial; ...

The PointCloud vertices in Three.js consistently provide a position of (0,0,0)

I'm working with a PointCloud named "cloud" that is centered at (0, 0, 0) and consists of approximately 1000 vertices. These vertices' positions are being manipulated by a vertex shader. My goal now is to log the position of each vertex to the co ...

Enabling communication between my React frontend and Express server

I currently have a Digital Ocean Ubuntu VPS set up with Apache, Node, and Mongo running. I can successfully retrieve data from my database using CURL on the server and my node backend is running on port 3000. For my React frontend, I am using Fetch and it ...

Node.js to Django cross-site request forgery (CSRF) vulnerability

I am struggling to pass the csrftoken from node.js to django. Below is the code snippet from my server.js: socket.on('unread global', function (data) { var values=querystring.stringify(); var options = { hostname:'localhost', por ...

Having trouble sending data from the controller to the view in Laravel 8

I am struggling to display data retrieved from the database in my view through the controller. Despite trying various solutions found on similar questions, none of them seem to be effective. My main goal is to showcase a list of employees on my admin page. ...

Creating applications with Angular2 and TypeScript is possible even without utilizing NPM for development

I've seen all the guides recommend installing npm, but I'm determined to find an alternative method. I found Angular2 files available here, however, none of them are in TypeScript code. What is the best course of action? Do I need Angular2.ts, ...

What is the best way to incorporate a subcategory within a string and separate them by commas using Vue.js?

Is it possible to post subcategories in the following format now? Here is the current result: subcategory[] : Healthcare subcategory[] : education However, I would like to have them as a string separated by commas. This is my HTML code: <div id="sub ...

Perform a MongoDB find() query using the _id field as the search criteria

So I am currently working on my express app and I need to find data based on the _id field in MongoDB. Below is a snippet of my MongoDB record: { "_id": { "$oid": "58c2a5bdf36d281631b3714a" }, "title": "EntertheBadJah" ...

Running the gulp uncss command with regex to ignore specific elements is not functioning as expected

I have been attempting to integrate uncss into my gulp workflow. In order to exclude certain classes, such as those added through javascript, I am specifying these classes with "ignore" (specifically, I am trying to remove the css from the jquery plugin m ...