selection.js:4235 Uncaught TypeError: Cannot read properties of undefined (reading 'childWidgets')

Question

Hello,I am getting above mentioned subject error.when I am creating 15 tables, 1 table on 1 page with available height its creating only 11 tables and then throwing below error.Uncaught TypeError: Cannot read properties of undefined (reading 'childWidgets') (error comes on selection.js:4235)same happening for 1*2 or 2*1 or 2*2 layout.means in short it is not creating more than 11 tables.please suggest any solution for this.Thank YouShweta

Selvaprakash Karuppusamy · Answer

Hi Shweta,We were unable to reproduce the reported issue,
and we tried to insert the tables at the UI and API levels, but the tables
inserted properly. So, could you please share the sample you tried on your end
with a video illustration to replicate it? Thereby, we will analyze further and
provide you with the appropriate solution at the earliest. Regards,Selvaprakash K

Shweta Kokate · Answer

Hi Selvaprakash,sorry I can not share whole project with you but I can share you some main function I used in my project.I think with the help of this code you can understand what I am trying to achieve in my application.code is in react// before calling this function i have number of images and layout with mefor example i have 15 images and 1*1 layout then below function draw 11 tables with images then thrown that errorwhat is expected , it should drawn 15 tables with images(same issue for other layout) onPrint = (event) => { this.onReset(); let layout = this.getLayout(); let pages = Math.ceil(this.state.imagesSelected / (parseInt(layout[0]) * parseInt(layout[1]))); let imgcnt = 0; for (let m = 1; m <= pages; m++) { this.editor.current.container.documentEditor.selection.goToPage(m); 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(parseInt(layout[0]), parseInt(layout[1])); 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.editor.applyBorders(this.BorderSettings); for (var i = 1; i <= parseInt(layout[0]); i++) {// creating rows as per layout this.editor.current.container.documentEditor.selection.rowFormat.heightType = 'Exactly'; this.editor.current.container.documentEditor.selection.rowFormat.height = (pageHeight) / (parseInt(layout[0])); for (var j = 1; j <= parseInt(layout[1]); j++) {// creating cells as per layout this.editor.current.container.documentEditor.selection.paragraphFormat.textAlignment = 'Center'; this.editor.current.container.documentEditor.selection.cellFormat.verticalAlignment = 'Center'; if (imgcnt < this.state.imagesSelected) {// here i am inserting image 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++; } this.moveCursorToNextCell(); } if (i != parseInt(layout[0])) { this.moveCursorToNextRow(); } } } }// this function is used in onPrint function// used to clear document editor before drawingonReset = () => { 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(); } }// for your reference moveCursorToNextCell = () => { // To get current selection start offset var startOffset = this.editor.current.container.documentEditor.selection.startOffset; // Increasing cell index to consider next cell var cellIndex = parseInt(startOffset.substring(6, 7)) + 1; // Changing start offset startOffset = startOffset.substring(0, 6) + cellIndex.toString() + startOffset.substring(7, startOffset.length); // Navigating selection using select method this.editor.current.container.documentEditor.selection.select(startOffset, startOffset); } moveCursorToNextRow = () => { // To get current selection start offset var startOffset = this.editor.current.container.documentEditor.selection.startOffset; // Increasing row index to consider next row var rowIndex = parseInt(startOffset.substring(4, 5)) + 1; var cellIndex = 0; //parseInt(startOffset.substring(6, 7)) != 0 ? parseInt(startOffset.substring(6, 7)) - 1 : 0; // Changing start offset startOffset = startOffset.substring(0, 4) + rowIndex.toString() + startOffset.substring(5, 6) + cellIndex + startOffset.substring(7, startOffset.length); // Navigating selection using select method this.editor.current.container.documentEditor.selection.select(startOffset, startOffset); }Thank You,Shweta

Selvaprakash Karuppusamy · Answer

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 modify the attached stackblitz sample to be replicable and
share it? Thereby, we will analyze further and provide you with the
appropriate solution at the earliest. Sample: https://stackblitz.com/edit/react-61kvge?file=index.js

Shweta Kokate · Answer

Hello

Selvaprakash,I checked your sample code its loading three empty table on each page on import button call.now if I changed page length from 3 to 20 on line number 23( for (let m = 1; m <= 20; m++) {) then it throws below error,Error in /turbo_modules/@syncfusion/ej2-documenteditor@22.1.36/dist/ej2-documenteditor.umd.min.js (10:1991419)Cannot read properties of undefined (reading 'childWidgets')also I want to load images in that tables in each cell.one more thing I want to ask you,             which event is get fired on page Setup change?Thank YouShweta

Selvaprakash Karuppusamy · Answer

Hi Shweta,#Insert tableWe have resolved the table
inserting issue, and please refer to the below sample.Sample: 4r1eyr
(forked) - StackBlitz #Insert imagePlease refer to the below UG
documentation to know about inserting images.https://ej2.syncfusion.com/react/documentation/document-editor/how-to/insert-text-or-image-in-table-programmatically
#Event for toolbar clickWe don’t have a public event to
trigger when clicking default toolbar items, but we provide the toolbarClick
event, and the toolbarClick event triggers only when a custom toolbar is
clicked. If you want to use the toolbarClick event for any toolbar
items, you want to customize which item you want. Please refer to the below UG
documentation.https://ej2.syncfusion.com/react/documentation/document-editor/how-to/customize-tool-bar
Regards,Selvaprakash K

Shweta Kokate · Answer

Hello Sir,Apart from all above question's I want to know how can  I get Body content height irrespective of Header Content and Footer Content of document editor.Actually I have some predefined Header and Footer content , which disturb my body content so because of this I just want to know how to get only Body content available height.Thank YouShweta

Selvaprakash Karuppusamy · Answer

Hi Shweta,We have prepared the sample to meet your requirements, and please refer to the below sample to know how to get the available height. Sample: https://stackblitz.com/edit/react-ya5faf-tc8lzw?file=index.js

Shweta Kokate · Answer

Hello Sir,First of all thank you for your reply.actually I also have calculated page height same way as mentioned in sample.I have predefined header footer content , but when header or footer content is big in size then page height calculated like sample goes wrong way, wrong way means if I have single page then I give page height to table row but this page height which I set to row get wrong as it shows two pages instead of one page.If predefined header and footer is not big in size in that case above case works fine.In short we can say, if I have predefined header and footer content with big size and if I give page height to table row then that page height is not calculated correctly, as it is one page its showing two pages.Thank You,Shweta

Shweta Kokate · Answer

Hello Sir,just attaching sample link where I added header and footer in your existing sample and you can see that single page get converted into two pages after adding header and footer content, why this is happen if we have single page and after adding header and footer its adding one more extra page.how can we void this by using page height .Sample : https://stackblitz.com/edit/react-ya5faf-kyyig6?file=index.js Means number of pages should be remain same after adding header and footer content, why header and footer content changes page height or adding more pages?Thank You,Shweta

Selvaprakash Karuppusamy · Answer

Hi Shweta,

The document body size decreases when header and footer sizes increase, so the content is rendered based on the available height of the body. Once the available height is filled, the remaining content is moved to the next page. This is our behavior, and MS Word also follows this behavior.

We find an issue in getting margins, so we will validate it and update the further details on July 26.

Shweta Kokate · Answer

Hello Sir,Thank you for your reply.So how can we achieve my scenario, is there any way we can handle my scenario.I have predefined header and footer content with fix number of pages and as I already described in my last post I don't want to add any extra page when I add/load header and footer content.can I get header and footer content height so that we can minus that height from page height and so on to resolve that problem. or is there any other alternative which can solved my problem.Waiting for your reply...also waiting for your reply regarding

issue in getting margins which you have already mentioned in your last post.Thank You,  Shweta

Selvaprakash Karuppusamy · Answer

Hi Shweta,

Sorry for the inconvenience. as we mentioned earlier. The document body size decreases when header/footer and footer sizes increase, so the content is rendered based on the available height of the body. Once the available height is filled, the remaining content is moved to the next page. This is our behavior, and MS Word also follows this behavior. and you can remove the header/footer space. Please refer to the below sample.

Sample: https://stackblitz.com/edit/react-1tpuyk-j44jc5?file=index.js

Code snippet:

container.documentChange = () => {

reduceHeaderSize();

};

container.documentEditor.open(JSON.stringify(defaultDocument));

function reduceHeaderSize() {

container.documentEditor.selection.sectionFormat.headerDistance=0;

container.documentEditor.selection.sectionFormat.footerDistance=0;

container.documentEditor.selection.sectionFormat.topMargin=10;

container.documentEditor.selection.sectionFormat.bottomMargin=10;

}

Shweta Kokate · Answer

Hello Sir,Thank you for your reply.Actually I don't want to reduce header and footer distance or margin but I want to handle header and footer content height with page content height.whatever header footer content size I want to minus this from page height so number of pages remain constant.I have predefined header and footer content with fix number of pages and as I already described in my last post I don't want to add any extra page when I add/load header and footer content.can I get predefined header and footer content height so that we can minus that height from page height and so on to resolve that problem. or is there any other alternative which can solved my problem.Thank YouShweta

Selvaprakash Karuppusamy · Answer

Hi Shweta,Sorry for the inconvenience. We have checked the possibilities, and it is not possible to get header/footer height based on header/footer content. and the previously shared sample is working properly when the document contains a predefined header/footer with default height and also when the value of the "header from top" property is changed.