1. Home
  2. Forum
  3. React - EJ 2
  4. Uncaught TypeError Cannot read properties of undefined (reading containerWidget) layout js 6546

Uncaught TypeError Cannot read properties of undefined (reading containerWidget) layout js 6546

Hello Sir/Madam,

For you Reference I am using below syncfusion version,

"@syncfusion/ej2-react-documenteditor": "^20.4.42",

I am drawing images(base64) in table row.

For example I have 5 images and layout is 1*1 then I draw a table with row to display 5 images on 5 pages, as of now my code is working fine for displaying images but after display images when I change Page Setup orientation to landscape its throwing error mentioned in subject.

For your better understanding I am sharing my main function code which display/draws images.

// before calling this function i have number of images and layout with me
drawImages = (event) => {

this.onReset();
let layout = this.getLayout(); // its nothing but getting current layout for example now consider its as 1*1

let pages = Math.ceil(this.state.imagesSelected / (parseInt(layout[0]) * parseInt(layout[1])));

let imgcnt = 0;
this.currentPageHeight = this.editor.current.container.documentEditor.selection.sectionFormat.pageHeight;
this.currentPageLeftMargin = this.editor.current.container.documentEditor.selection.sectionFormat.leftMargin;
this.currentPageRightMargin = this.editor.current.container.documentEditor.selection.sectionFormat.rightMargin;
this.currentPageTopMargin = this.editor.current.container.documentEditor.selection.sectionFormat.topMargin;
this.currentPageBottomMargin = this.editor.current.container.documentEditor.selection.sectionFormat.bottomMargin;

let pageHeight = ((this.editor.current.container.documentEditor.selection.sectionFormat.pageHeight) - (this.editor.current.container.documentEditor.selection.sectionFormat.topMargin + this.editor.current.container.documentEditor.selection.sectionFormat.bottomMargin)) - 2; // -15
let pageWidth = (this.editor.current.container.documentEditor.selection.sectionFormat.pageWidth);

this.editor.current.container.documentEditor.editor.insertTable(1, parseInt(layout[1])); // column is managed here
for (let m = 1; m <= pages; m++) {
this.editor.current.container.documentEditor.selection.goToPage(m);
this.editor.current.container.documentEditor.selection.tableFormat.tableAlignment = 'Center';
this.editor.current.container.documentEditor.selection.rowFormat.heightType = 'Exactly';
this.editor.current.container.documentEditor.selection.rowFormat.height = (pageHeight) / (parseInt(layout[0]));

this.editor.current.container.documentEditor.editor.insertRow(true, parseInt(layout[0]));
if(m==pages){
// delete one extra row at the end
this.editor.current.container.documentEditor.selection.selectRow();
this.editor.current.container.documentEditor.editor.deleteRow();
}
var rowCount = parseInt(layout[0]);
var columnCount = parseInt(layout[1]);
for (var i = 0; i < rowCount * columnCount; i++) {
//Inserts the image to cursor position.
this.editor.current.container.documentEditor.selection.paragraphFormat.textAlignment = 'Center';
this.editor.current.container.documentEditor.selection.cellFormat.verticalAlignment = 'Center';
if (imgcnt < this.state.imagesSelected) {
let resizevalue = this.resizeImgTag('', this.state.imageArray[imgcnt][1], this.state.imageArray[imgcnt][2], (pageHeight) / (parseInt(layout[0])), (pageWidth) / (parseInt(layout[1])));
this.editor.current.container.documentEditor.editor.insertImage(this.state.imageArray[imgcnt][0], resizevalue[0], resizevalue[1]);
imgcnt++;
}
if (i < rowCount * columnCount - 1) {
//Skips moving cursor to next cell when it reached the last cell.
var isNavigated = this.moveCursorToNextCellStart(this.editor.current.container.documentEditor.selection);
if (!isNavigated) {
break;
}
}
}
}
}
// list of function used in above function for your reference
// used to clear document editor on PageSetup call onReset = () => {
let layout = this.getLayout();
let pages = Math.ceil(this.state.imagesSelected / (parseInt(layout[0]) * parseInt(layout[1])));
for (let m = 1; m <= pages; m++) {
this.editor.current.container.documentEditor.selection.goToPage(1);
this.editor.current.container.documentEditor.selection.selectTable();
this.editor.current.container.documentEditor.editor.deleteTable();
}
}

moveCursorToNextCellStart = (selection) => {
if (selection.contextType.includes('Table')) {
selection.selectCell();
selection.select(selection.endOffset, selection.endOffset);
selection.moveToNextCharacter();
if (!selection.contextType.includes('Table')) {
selection.moveToPreviousCharacter();
return false;
}
return true;
}
return false;
}

After drawing/displaying images when I change Page Setup orientation to landscape is throwing above error

Thank You,
Shweta

31 Replies
SK Selvaprakash Karuppusamy Syncfusion Team September 11, 2023 04:18 PM UTC

Hi Shweta,


The mentioned issue has been resolved in our latest versions. So please upgrade both the client and server sides to the latest (v22.2.12) version packages to resolve this issue. and we have attached the sample for your reference, so use the below sample to check this issue.

Sample: Bhhw27 (forked) - StackBlitz

NPM Link: (Client-side)

@syncfusion/ej2-react-documenteditor - npm (npmjs.com)

 

NuGet link: (Server-side)

https://www.nuget.org/packages/Syncfusion.Ej2.Wordeditor.ASPNet.Core/

https://www.nuget.org/packages/Syncfusion.Ej2.Wordeditor.ASPNet.MVC5/



BS Balamurugan Shanmugam Syncfusion Team October 24, 2023 03:48 PM UTC

Hi Shweta,

We were unable to reproduce the reported issue, and we have attached the sample we used to try to replicate the issue. Could you please share the modify the attached sample to reproduce the mentioned issue? Thereby, we will analyze further and provide you with the appropriate solution at the earliest.

Sample - Bhhw27 (forked) - StackBlitz

Regards,

Balamurugan S


SK Shweta Kokate replied to Balamurugan Shanmugam November 21, 2023 07:11 AM UTC

Dear Sir,


I checked your sample code which loads images correctly but when we change page orientation then body container not changes as expected.

while I tried your code in my application still I am having same issue for 1*1 and 1*2 layout, also your moveCursorToNextCell, moveCursorToNextRow function just worked fine for 1*1 layout its not working for 1*2, 2*2, etc layout.

can you please share a sample where my all layout like 1*1, 1*2, 2*2, 3*3, etc will work.

one more important point that I already mentioned above for 1*1,1*2 layout container widget errors are coming on page setup orientation change.

so I want to know how  page setup event work in your sample? as in my application I need to handle documentEditor contentChange for this where I clear all drawings and redraw it again.

in my first post you can see I used OnReset funstion to clear document editor on PageSetup call

/ used to clear document editor on PageSetup call onReset = () => {
let layout = this.getLayout();
let pages = Math.ceil(this.state.imagesSelected / (parseInt(layout[0]) * parseInt(layout[1])));
for (let m = 1; m <= pages; m++) {
this.editor.current.container.documentEditor.selection.goToPage(1);
this.editor.current.container.documentEditor.selection.selectTable();
this.editor.current.container.documentEditor.editor.deleteTable();
}
}


is there any other way by using which we can handle page setup events other than this, please explain

Thank You,

Shweta


KM Kavitha Muralitharan Syncfusion Team November 22, 2023 04:51 PM UTC

Swetha, we have attached a basic sample that you can customize yourself based on your logic. Additionally, we have also attached a UG Documentation for reference.


Sample: https://stackblitz.com/edit/react-uncvqw-w3h2tu?file=index.js,package.json

UG Documentation: https://ej2.syncfusion.com/react/documentation/document-editor/how-to/insert-text-or-image-in-table-programmatically


SK Shweta Kokate replied to Kavitha Muralitharan November 27, 2023 05:47 AM UTC

Kavitha,

Thank you sharing this sample application but may I know how page setup event work in this and in earlier sample. as I told you in last post  when we change page orientation then body container not changes as expected, it looks like its working but actually its not working for example when I change page setup orientation to landscape page body container not loading/resizing content like landscape as you can see width of the container is same like portrait orientation. so may I know why page setup orientation not working as expected in your sample?

so again I am asking same question which I have asked in my last post, in my application I need to handle documentEditor contentChange for handling page setup event where I clear all drawings and redraw it again.

in my first post you can see I used OnReset funstion to clear document editor on PageSetup call

/ used to clear document editor on PageSetup call onReset = () => {
let layout = this.getLayout();
let pages = Math.ceil(this.state.imagesSelected / (parseInt(layout[0]) * parseInt(layout[1])));
for (let m = 1; m <= pages; m++) {
this.editor.current.container.documentEditor.selection.goToPage(1);
this.editor.current.container.documentEditor.selection.selectTable();
this.editor.current.container.documentEditor.editor.deleteTable();
}
}


is there any other way by using which we can handle page setup events other than this, please explain


Thank You,

Shweta


BS Balamurugan Shanmugam Syncfusion Team November 27, 2023 11:02 AM UTC

Hi Shweta,

As per MS Word behavior, when we change the page orientation from portrait to landscape, the table isn't resized. Same behavior in documentEditor also.

The width of the landscape container isn't the same as in portrait orientation. Please refer to the attached video below for your reference.

//Is there any other way by which we can handle page setup events other than this? Please explain.

DocumentEditor doesn't have an event for page setup. So, you can add custom logic to delete the table and re-insert it.

Regards,

Balamurugan S


Attachment: pageSetup_2e1ccff1.zip

SK Shweta Kokate replied to Balamurugan Shanmugam November 30, 2023 10:55 AM UTC

Hello Balamurugan,


Thank you for your reply.

I have another query about image size my portrait image is not fit to container by height though I have given image height same of container height.

For Example, I have 2*2 layout with 4 images where my first image is portrait and other are rectangle size, I applied resize factor to images and draw it but my first image is not fit to container by height if i have given height as container height while remaining 3 rectangle images are fit to container by width.

so may i know why my first images is fit to container by height.

I am sharing you my code for your reference

onDraw = (event) => {
        this.onReset();
        let layout = this.getLayout();
        let pages = Math.ceil(this.state.imagesSelected / (parseInt(layout[0]) * parseInt(layout[1])));

        this.currentPageHeight = this.editor.current.container.documentEditor.selection.sectionFormat.pageHeight;
        this.currentPageLeftMargin = this.editor.current.container.documentEditor.selection.sectionFormat.leftMargin;
        this.currentPageRightMargin = this.editor.current.container.documentEditor.selection.sectionFormat.rightMargin;
        this.currentPageTopMargin = this.editor.current.container.documentEditor.selection.sectionFormat.topMargin;
        this.currentPageBottomMargin = this.editor.current.container.documentEditor.selection.sectionFormat.bottomMargin;

        let pageHeight = ((this.editor.current.container.documentEditor.selection.sectionFormat.pageHeight) - (this.editor.current.container.documentEditor.selection.sectionFormat.topMargin + this.editor.current.container.documentEditor.selection.sectionFormat.bottomMargin)) - 2; // -150
        pageHeight = pageHeight - (this.editor.current.container.documentEditor.selection.sectionFormat.headerDistance + this.editor.current.container.documentEditor.selection.sectionFormat.footerDistance);

        let pageWidth = (this.editor.current.container.documentEditor.selection.sectionFormat.pageWidth);
        //let pageWidth = ((this.editor.current.container.documentEditor.selection.sectionFormat.pageWidth) - (this.editor.current.container.documentEditor.selection.sectionFormat.leftMargin + this.editor.current.container.documentEditor.selection.sectionFormat.rightMargin)) - 2;

        let imgcnt = 0;
      
        this.editor.current.container.documentEditor.editor.insertTable(1, parseInt(layout[1])); // column is managed here
        this.editor.current.container.documentEditor.selection.tableFormat.preferredWidthType = 'Percent';
        this.editor.current.container.documentEditor.selection.tableFormat.preferredWidth = 100;
        for (let m = 1; m <= pages; m++) {
            this.editor.current.container.documentEditor.selection.goToPage(m);
            this.editor.current.container.documentEditor.selection.tableFormat.tableAlignment = 'Center';
           
            this.editor.current.container.documentEditor.selection.tableFormat.leftMargin = 0;
            this.editor.current.container.documentEditor.selection.tableFormat.rightMargin = 0;
            //this.editor.current.container.documentEditor.selection.tableFormat.topMargin = 0;
            //this.editor.current.container.documentEditor.selection.tableFormat.bottomMargin = 0;
           
            this.editor.current.container.documentEditor.selection.rowFormat.heightType = 'Exactly';
            this.editor.current.container.documentEditor.selection.rowFormat.height = (pageHeight) / (parseInt(layout[0]));

            this.editor.current.container.documentEditor.editor.insertRow(true, parseInt(layout[0]));
            if (m == pages) {
                // delete one extra row at the end
                this.editor.current.container.documentEditor.selection.selectRow();
                this.editor.current.container.documentEditor.editor.deleteRow();

            }
            var rowCount = parseInt(layout[0]);
            var columnCount = parseInt(layout[1]);
            for (var i = 0; i < rowCount * columnCount; i++) {
                //Inserts the image to cursor position.
                this.editor.current.container.documentEditor.selection.paragraphFormat.textAlignment = 'Center';
                this.editor.current.container.documentEditor.selection.cellFormat.verticalAlignment = 'Center';

                if (imgcnt < this.state.imagesSelected) {
                   // let resizevalue = this.resizeImgTag('', this.state.imageArray[imgcnt][1], this.state.imageArray[imgcnt][2], (pageHeight) / (parseInt(layout[0])), (pageWidth) / (parseInt(layout[1])));
                    let resizevalue = this.resizeImgTag('', this.state.imageArray[imgcnt][1], this.state.imageArray[imgcnt][2], (pageHeight+(this.editor.current.container.documentEditor.selection.sectionFormat.headerDistance + this.editor.current.container.documentEditor.selection.sectionFormat.footerDistance)) / (parseInt(layout[0])),
                    (pageWidth) / (parseInt(layout[1])));
                   
                    this.editor.current.container.documentEditor.editor.insertImage(this.state.imageArray[imgcnt][0], parseInt(resizevalue[0]), parseInt(resizevalue[1]));
                    imgcnt++;
                }
                if (i < rowCount * columnCount - 1) {
                    //Skips moving cursor to next cell when it reached the last cell.
                    var isNavigated = this.moveCursorToNextCellStart(this.editor.current.container.documentEditor.selection);
                    if (!isNavigated) {
                        break;
                    }
                }
            }

        }

        this.setState({ ...this.state, hideLayout: true, pageCount: pages })
    }
// list of function used in above function for your reference
// used to clear document editor on PageSetup call onReset = () => {
let layout = this.getLayout();
let pages = Math.ceil(this.state.imagesSelected / (parseInt(layout[0]) * parseInt(layout[1])));
for (let m = 1; m <= pages; m++) {
this.editor.current.container.documentEditor.selection.goToPage(1);
this.editor.current.container.documentEditor.selection.selectTable();
this.editor.current.container.documentEditor.editor.deleteTable();
}
}

moveCursorToNextCellStart = (selection) => {
if (selection.contextType.includes('Table')) {
selection.selectCell();
selection.select(selection.endOffset, selection.endOffset);
selection.moveToNextCharacter();
if (!selection.contextType.includes('Table')) {
selection.moveToPreviousCharacter();
return false;
}
return true;
}
return false;
}


In short If I have put image at center vertically and horrizontally and also given height of image same of container height still image showing gap from top and bottom.

please see attached image screenshot for your reference, where you can see my first image issue.

synfusion_image_11zon.jpg

Thank You,

Shweta


BS Balamurugan Shanmugam Syncfusion Team December 1, 2023 11:26 AM UTC

Hi Shweta,

Based on the information, you are facing an image issue in the first cell. Could you please explain in detail what you expected the image height to be in the first cell? We suspected you wanted to fit the image without a gap between the top and bottom. If the same is what you expected, could you please share the code that we use to resize the image in the resizeImgTag method? We can see the inserted images are different in the cells. So, could you please share the two different images? It could be helpful to reproduce the reported issue on our end. Thereby, we will analyze further and provide you with the appropriate solution at the earliest.

And the thing is, we suspected you were facing an image gap issue due to the top and bottom margin values. So, please check out this below, in which cell you want to remove the gap.

this.editor.current.container.documentEditor.selection.cellFormat.topMargin = 0;
this.editor.current.container.documentEditor.selection.cellFormat.bottomMargin = 0;


Regards,

Balamurugan S



SK Shweta Kokate replied to Balamurugan Shanmugam December 1, 2023 01:30 PM UTC

Hello,


Yes you are right I wanted to fit the image without a gap between the top and bottom.

Note : when image is portrait I want to fit image without a gap between the top and bottom and when image is landscape I want to fit image  without a gap between the left and right.

as you requested  sharing the code that we use to resize the image in the resizeImgTag method,

   resizeImgTag = (obj, IW, IH, cellH, cellW) => {

        let pH = cellH;

        let pW = cellW;

        let cellHeight = cellH;

        let cellWidth = cellW;

        let h, w, l, t, imageHeight, imageWidth;

        try {

            if (IH == IW) { // same height width image

                if (pH < pW) {

                    imageHeight = pH;

                    imageWidth = parseInt(IW * parseInt(cellHeight) / IH);

                }

                else {

                    imageWidth = pW;

                    imageHeight = parseInt(IH * parseInt(cellWidth) / IW);

                }

            }

            else if (IH > IW)//image is potrait

            {

                h = pH;

                w = parseInt(IW * parseInt(h) / IH)

                if (w > pW) {

                    imageWidth = pW;

                    imageHeight = parseInt(IH * parseInt(cellWidth) / IW);

                }

                else {

                    imageHeight = h;

                    imageWidth = w;

                }

            }

            else //landscape

            {

                w = pW;

                h = parseInt(IH * parseInt(w) / IW)

                if (h > pH) {

                    imageHeight = pH;

                    imageWidth = parseInt(IW * parseInt(cellHeight) / IH);

                }

                else {

                    imageHeight = h;

                    imageWidth = w;

                }

            }

            return [imageWidth, imageHeight];

        } catch (e) { }

    }


also tried your below topMargin, bottomMargin solution which is not worked for me

this.editor.current.container.documentEditor.selection.cellFormat.topMargin = 0;
this.editor.current.container.documentEditor.selection.cellFormat.bottomMargin = 0;

Attaching screenshot of 2 images for your reference
synfusion_issue.png

Thank You,
Shweta

BS Balamurugan Shanmugam Syncfusion Team December 4, 2023 09:50 AM UTC

Hi Shweta,

Sorry for the inconvenience. We aren't aware of what you did in the getLayout() method. We have attached a basic sample. So, Could you please modify the attached sample to replicate the reported issue? It could be helpful to replicate the issue on our end. Thereby, we will analyze further and provide you with the appropriate solution at the earliest.

Sample - Tc43en (forked) - StackBlitz

Regards,

Balamurugan S


SK Shweta Kokate replied to Balamurugan Shanmugam December 5, 2023 10:36 AM UTC

Hello,

Its not about replicate the issue in your sample as we know lot of things are working in you shared sample project while those things are not working in my project because of this I have shared you near about all functions to you.

here I am going to share you getLayout() method for your reference where I just select layout from it.

getLayout = () => {
let layout = '';
let val = this.state.selectLayout == 'Custom' ? this.state.rows + 'X' + this.state.columns : '';
layout = this.state.selectLayout == 'Custom' ? val.split('X') : this.state.selectLayout.split('X')
return layout;
}


so I request you please suggest any solution for the issue mentioned in posts.

also I am sharing one base64 image for your reference(image width = 230, Image Height = 512),

data:image/JPEG;base64,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


Note : during the time I will try to replicate the reported issue in your shared sample.

Thank You,

Shweta





BS Balamurugan Shanmugam Syncfusion Team December 6, 2023 03:35 PM UTC

Hi Shweta,

We suspect the issue occurred due to setting the particular cell's top margin and bottom margin. The actual behavior of cell margin consideration is which cell has the highest margin value in the row; that value also reflects in the other cells. So, could you please select the row and set the top and bottom margin values to 0.

 Code Snippet:

this.editor.current.container.documentEditor.selection.selectRow();

this.editor.current.container.documentEditor.selection.cellFormat.topMargin = 0;

this.editor.current.container.documentEditor.selection.cellFormat.bottomMargin = 0;


If the issue persists, could you please modify the attached sample to replicate the reported issue?

Sample - Tc43en (forked) - StackBlitz

Regards,

Balamurugan S


SK Shweta Kokate December 20, 2023 11:16 AM UTC

Hello,

I have another query regarding border Settings linewidth, how can we minus lineWidth from page height and page width.

borderSettings defination is as follows,

BorderSettings : {
                type: 'AllBorders', // OutsideBorders, AllBorders, LeftBorder, RightBorder, BottomBorder and not working InsideBorders
                lineWidth: 1,
                borderColor: 'green',
            }


where my lineWidth changes from 1 to 8.

I want to manage/draw images in my layout with lineWidth to seperate each cell.

looking forward for any help.


Thank You,

Shweta


BS Balamurugan Shanmugam Syncfusion Team December 21, 2023 12:52 PM UTC

Hi Shweta,

We weren't sure about your requirements based on the information. In the API approach, we suspect you want to apply a border to the outside of the table, and we also assume you will need to obtain the line width of borders in each column.

So, could you please describe in detail what you attempted to accomplish on your end?

Regards,

Balamurugan S


SK Shweta Kokate replied to Balamurugan Shanmugam December 22, 2023 09:46 AM UTC

Hello,


Yes  I want to apply a border to the each cell of table and I managed it by using  borderSettings but when I used this  borderSettings then my image in a cell get disturbed, disturbed means after applying line width using  borderSettings then image alignment get disturbed.

for example, line comes over image area or full image not visible or left and right margin issue

so my question is that why image alignment get disturbed or changed after applying line width using  borderSettings.

borderSettings defination is shared you in last post and I applying borderSettings to cell like as follows,

this.editor.current.container.documentEditor.editor.applyBorders(this.state.BorderSettings);


so let me know how to manage image in cell with line width.

Thank You,

Shweta


BS Balamurugan Shanmugam Syncfusion Team December 26, 2023 11:41 AM UTC

Hi Shweta,

Based on the query, we attempted to recreate the mentioned issue. We are facing the issues of image clipping and right margin issues, like below.

Could you please confirm whether this is the same issue you are facing on your end? If it is not, please modify the attached sample to replicate the issue.

Please find attached a sample and video for your reference.

Sample - https://stackblitz.com/edit/react-sbtzpg-ap1c6e?file=index.js,index.html

Regards,

Balamurugan S


Attachment: imageClip_96ed355c.zip

SK Shweta Kokate January 5, 2024 06:33 AM UTC

Hello  Balamurugan ,


Yes I am facing same issue.

 I managed to draw a image fit to container as per available container height and width and as per Image height and width, now if I applied  borderSettings to table cell then it disturb things which I have already mentioned in my last post.

Can you please figure out how to solve this issue.


Thank You,

Shweta


BS Balamurugan Shanmugam Syncfusion Team January 8, 2024 05:39 AM UTC

Hi Shweta,

We can reproduce the reported issue with the provided details. Currently, we are validating and will get back to you by January 10, 2024.

Regards,

Balamurugan S


GJ Gowthamkumar Jayapandiyan Syncfusion Team January 12, 2024 03:08 PM UTC

Hi Shweta,

We need an additional timeline to validate this scenario. We will update further details soon.

Regards,

GowthamKumar J



SM Suriya Murugan Syncfusion Team February 2, 2024 08:48 AM UTC

Shweta, we have verified the mentioned situation in MS Word and observed that the image is cut off on the right side.



The width of the cell/image remains unchanged after applying the border.





SK Shweta Kokate June 26, 2024 07:38 AM UTC

Hello Sir/Madam

first of all thank you for your last reply.

Now I have another query for you which is as follows,

Lets assume I have table of 3 rows and 3 columns with cell format background color black and I want to merge first three cell vertically by using Merge Cell then merge cell is working fine but merged cell background color get changed to different than black color.

For you reference I have attached a screenshot...

Image_9506_1719387629932

as you can see first merge column background color is different than black color.

Please suggest a solution for this?


Thank You,

Shweta



KD Kesavan D Syncfusion Team June 28, 2024 01:32 AM UTC

Hi Shweta,
We are checking on the reported behavior we will let you the updates by June 28, 2024.

Regards,

Kesavan.


DS Dhanush Sekar Syncfusion Team June 28, 2024 02:51 PM UTC

Hi Shweta,


We were unable to reproduce the reported issue in our latest version, v26.1.39. We have attached a sample for your reference. 

Could you please confirm that whether you are able to reproduce the issue in below sample?

If yes, could you please share the issue reproducible sample with video. It will be helpful to validate further and provide you the solution at earliest.

Sample: 7cf7mg (forked) - StackBlitz


Regards,

Dhanush S


SK Shweta Kokate September 19, 2024 07:14 AM UTC

Hello Sir/Madam,

I have another query which is, When we change page orientation to landscape and go for the print preview in this case one extra page is get added.

however its working fine in case of portrait orientation.

Please see attached screenshot for your reference,


Image_6505_1726730752121


DS Dhanush Sekar Syncfusion Team September 20, 2024 08:02 AM UTC

Hi Shweta,


In the Document Editor, when you initiate the print function, we generate the content in a printable format and send it to the browser's native printing system. However, due to browser limitations, we are unable to fully customize or control the printing process programmatically. As a result, when the print dialog appears, the user must manually choose the desired settings, such as paper size, orientation, and margins, from the browser's print options before proceeding with the print job.


Sample:  92jfaz (forked) - StackBlitz


Regards,

Dhanush S


Attachment: Print_(1)_6e969f99.zip


SK Shweta Kokate October 7, 2024 08:14 AM UTC

Hello Sir/Madam,

How can we set text overflow ellipsis to cell in header section?

as of now when my text is big in length then it goes to second line and it disturb the body content GUI as you are already aware that I am displaying/calculating body content height as per header and footer section height.

when any text big in size, it goes to second line and increases the height of header and it disturb the body content.

so how can we achieve or set cell text overflow ellipsis?

OR is there any other alternative to set fixed width of header section cell?


Regards

Shweta


DS Dhanush Sekar Syncfusion Team October 8, 2024 02:25 PM UTC

Hi Shweta,


The document editor follows MS Word's functionality. When content exceeds the cell's width, it automatically wraps to the next line, similar to MS Word. Please refer to the video for further details.


Regards,

Dhanush S


Attachment: cellWidth_8f05b144.zip

SK Shweta Kokate replied to Dhanush Sekar August 26, 2025 06:13 AM UTC

Hi,

I just came to know that document editor not working properly, when we change page orientation one extra page get added. we have single page but when we change page orientation then that single page data get divided into two page that is one extra page get added.

below is your url you can check over there,

https://stackblitz.com/edit/react-uhejqg-vbfevt?file=index.js

currently I am using document editor version 29.1.41


Note: earlier it was working fine means when we toggle page orientation then number of pages remains same.

please let me know how to resolve this issue?


SK Shweta Kokate replied to Dhanush Sekar August 26, 2025 06:13 AM UTC

Hi,

I just came to know that document editor not working properly, when we change page orientation one extra page get added. we have single page but when we change page orientation then that single page data get divided into two page that is one extra page get added.

below is your url you can check over there,

https://stackblitz.com/edit/react-uhejqg-vbfevt?file=index.js

currently I am using document editor version 29.1.41


Note: earlier it was working fine means when we toggle page orientation then number of pages remains same.

please let me know how to resolve this issue?


AA Akshaya Arivoli Syncfusion Team August 27, 2025 04:53 PM UTC

Hi Shweta,


We are currently reviewing your query based on the information provided. We will get back to you with further updates on August 28,2025. 



Regards,

Akshaya



AA Akshaya Arivoli Syncfusion Team August 28, 2025 04:48 PM UTC

Hi Shwetha,

We have thoroughly reviewed the provided details and observed that in the Document Editor, an additional page is added when the page orientation is changed to landscape. This behavior is expected and not a defect.

When the orientation is switched to landscape, the height of the page is reduced, which can result in the existing content no longer fitting within the original page layout. To preserve the document's structure and ensure that all content is properly accommodated, the editor automatically adds extra pages.

This behavior is consistent with how Microsoft Word handles orientation changes, and we follow the same approach to maintain compatibility and a familiar user experience.

Please let us know if you need further clarification.


Regards,

Akshaya


Loader.
Up arrow icon