We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

ERROR TypeError: Cannot read property 'open' of undefined

I have a file manager component which is working well.  I right click and select a document and "open" with the context menu.
My method is as follows:
  // event for custom menu item
  menuClick(argsMenuClickEventArgs) {
    if (args.item.text === 'Open') {
      const fileDetails = new Array<any>();
      fileDetails.push(args.fileDetails[0]);
      const fileName = fileDetails[0].name;
      this.currentFolder = this.filemanager_default.pathNames;
      const fileNameAndLocation = this.currentFolder.join('/') + '/' + fileName;
      const baseUrl = this.documentServiceLink + '/ImportFile?fileNameAndLocation=' + fileNameAndLocation;

      this.http.get(baseUrl)
        .subscribe((document=> {
          console.log(document);
          this.documentEditor.open(JSON.stringify(document));
          this.showDocument = true;
        });
    }
  }
This sends a request to a .NET core backend to return a document held in Blob Storage.  I haven't got round to verifying the suitability of the return value yet however the system is giving me an error when trying to open this.documentEditor
ERROR TypeError: Cannot read property 'open' of undefined
    at SafeSubscriber._next (app.component.ts:76)
My injection is as follows:
import { DocumentEditorComponent } from '@syncfusion/ej2-angular-documenteditor';
...
  @ViewChild('documenteditor_default')
  public documentEditorDocumentEditorComponent;

I have imported DocumentEditorAllModule in my app.module.ts - what am I doing wrong?
I find the document editor component incredibly frustrating to deal with and your documentation leaves a lot to be desired.






 




19 Replies

HC Harini Chellappa Syncfusion Team November 13, 2019 05:12 AM UTC

Hi Bob, 

Thank you for contacting Syncfusion Support. 

We suspect that this issue may be due to “this” object which is not a document editor instance. We have prepared a simple for your reference. Kindly check it.  

Sample  

In that we have added custom context menu with open option to open the local Sfdt data. 

If you still facing the issue, please share a simple sample which you have tried at your end. So that we can investigate further on it and provide you the solution at earliest. 

Thanks, 
Harini C 



BI bob ingham November 13, 2019 10:19 AM UTC

Thanks for the support but the downloaded project will not compile.



BI bob ingham November 13, 2019 03:43 PM UTC

I'm banging my head against a wall here.  I have uploaded the project to git hub: syncfusion-sandbox
I took some time to dowload the project at ng8-syncfusion taken from the forum posting here: Angular 8 : Cannot read property 'documentEditor' of undefined.
No matter if I try to use the document editor or the document editor container I am still getting undefined messages.

The use case is simple - right-click on a document in the file manager, bring that document back from the cloud, allow a user to edit the document (i.e. button for edit) and then save (i.e save button) it back to the cloud after which some control data regarding the document can be added.  I would like to use the title bar to enable the edit and save buttons.




HC Harini Chellappa Syncfusion Team November 14, 2019 05:35 PM UTC

Hi Bob, 

Currently we are checking your project. We will update more details on this by Nov 18, 2019. 

Regards, 
Harini C 



BI bob ingham November 15, 2019 12:26 PM UTC

I thank you for your attention and look forward to your resolution.


SM Suriya Murugan Syncfusion Team November 18, 2019 11:25 AM UTC

Hi Bob, 

 
## "documenteditor" undefined issue 
  
We have validated the provided sample. In your sample, documenteditor element reference is incorrect. So only, you are facing issue while accessing documenteditor methods. 
  
Please change the code like below and try run the sample. 
  
Previous 
Now 
@ViewChild('documentEditorDefault', { static: true }) documentEditorDefault: ElementRef<DocumentEditorContainerComponent>; 
  public container: DocumentEditorContainerComponent; 
@ViewChild('documentEditorDefault', { static: true }) container: DocumentEditorContainerComponent; 
  
## Open the document from Cloud and save it back to server: 
  
Please check below link for reference, in that link we have added sample to load the document from server and send it back to server. You can customize it based on your requirement. 
  
  
 
Regards, 
 
Suriya M. 




HC Harini Chellappa Syncfusion Team November 25, 2019 12:56 PM UTC

Hi Bob, 

Thank you for contacting Syncfusion support. 

We will check and update you by Nov 27, 2019. 

Regards, 



BI bob ingham November 25, 2019 01:40 PM UTC

Hi Harini,
There is no need to contact me at this stage.
The documenteditor was undefined due to an *ngIf statement in my html.
I can now open the default document from the ./data.ts file.
My next job is to get a Word document from blob storage and return it to the client in sfdt format.
I'm still working on this and will contact you if I need further help.
Cheers,
Bob


BI bob ingham November 25, 2019 11:08 PM UTC

Hi all,

I have followed instructions here:
and here:
and here:

I have downloaded the following github projects:

I have read all the documentation at:
and all of the relevant sections below.
And also here:
and all of the relevant sections below.

I have still not found a way to return a document from my controller:
I started by using my normal method for Blob Storage using the nuget package and then gave up and started to use your recommendation and use WebClient():
The document is open to public so you should be able to download:

WebClient client = new WebClient();
byte[] doc = client.DownloadData("https://nuagecaretest.blob.core.windows.net/tranby/NcEntities/MrBernardBroadhurst-e9d61251-682f-439c-64bb-08d7515abf74/Care%20plan1.docx");
Stream stream = new MemoryStream(doc);
stream.Position = 0;
try
{
    var document = Syncfusion.EJ2.DocumentEditor.WordDocument.Load(stream, GetFormatType(fileNameAndLocation));
    string json = Newtonsoft.Json.JsonConvert.SerializeObject(document);
    document.Dispose();
    stream.Dispose();
    return json;
}
catch (Exception ex)
{
    throw;
}

I have tried the following also:

WebClient client = new WebClient();
byte[] doc = client.DownloadData("https://nuagecaretest.blob.core.windows.net/tranby/NcEntities/MrBernardBroadhurst-e9d61251-682f-439c-64bb-08d7515abf74/Care%20plan1.docx");
Stream stream = new MemoryStream(doc);
stream.Position = 0;
try
{
    string sfdt = ConvertDocument(stream, GetFormatType(fileNameAndLocation));
    stream.Dispose();
    return sfdt;
}
catch (Exception ex)
{
    throw;
}

Both of these throw an object not found error, here is the stack trace:
at Syncfusion.DocIO.DLS.Convertors.DocxParser.GetParagraphFormat(Style style)\r\n
at Syncfusion.DocIO.DLS.Convertors.DocxParser.ParseStyleProperties(XmlReader reader, Style style, Dictionary`2 linkStyleNamesReferByCharacterStyle, List`1 paraLinkStyleIndex, String styleNameId)\r\n
at Syncfusion.DocIO.DLS.Convertors.DocxParser.ParseStyle(XmlReader reader, Dictionary`2 linkStyleNamesReferByCharacterStyle, List`1 paraLinkStyleIndex)\r\n
at Syncfusion.DocIO.DLS.Convertors.DocxParser.ParseStyles(XmlReader reader)\r\n   at Syncfusion.DocIO.DLS.Convertors.DocxParser.ParseDocument(Package wordPackage)\r\n
at Syncfusion.DocIO.DLS.Convertors.DocxParser.Read(WordDocument document, Boolean isFlatOPC)\r\n
at Syncfusion.DocIO.DLS.Convertors.DocxParser.Read(Stream docStream, WordDocument document)\r\n
at Syncfusion.DocIO.DLS.WordDocument.OpenDocx(Stream stream)\r\n
at Syncfusion.DocIO.DLS.WordDocument.OpenInternal(Stream stream, FormatType formatType, String password)\r\n
at Syncfusion.EJ2.DocumentEditor.DocxImporting.ConvertToDocumentAdv(Stream stream, FormatType type)\r\n
at Syncfusion.EJ2.FileManager.AzureFileProvider.AspNet.Core.Controllers.DocumentEditorController.ImportFile(String fileNameAndLocation) in C:\\Development\\VisualStudio\\Projects\\ej2-azure-aspcore-file-provider\\Controllers\\DocumentEditorController.cs:line 78

I have also tried the following with the standard nuget package:

MemoryStream memoryStream = new MemoryStream();
await blob.DownloadToStreamAsync(memoryStream);
WordDocument document = WordProcessor.WordDocument.Load(memoryStream, WordProcessor.FormatType.Docx);
var sfdtString = JsonConvert.SerializeObject(document);
document.Dispose();
memoryStream.Dispose();
return new HttpResponseMessage() { Content = new StringContent(sfdtString) };

But that doesn't work either.
I have spent two whole days on this problem on top of the original problem of trying to open a document from the syncfusion file explorer.
It's very furstrating trying to work with C# samples that don't work and angular samples which use structures not created by angular cli.

Can you please help me.
The use case remains the same, open a document from syncfusion file explorer, get it from blob storage and return it to an angular front end ready for editing (I presume this will mean a conversion to sfdt along the way but I simply haven't got that far.










BI bob ingham November 25, 2019 11:52 PM UTC

Finally I have made some progress.
By replacing the following line:
var document = Syncfusion.EJ2.DocumentEditor.WordDocument.Load(stream, GetFormatType(fileNameAndLocation));
with this line:
EJ2DocumentEditor.WordDocument document = EJ2DocumentEditor.WordDocument.Load(stream, GetFormatType(fileNameAndLocation));
I start to remove errors.
Can anyone point me to the relevant documentation so this kind of guess work can be avoided?


My document has embedded images which have to be removed before the document will load.
How can I load a document with images (I have already given you a link for an example)
And, in the same document, how do I preserve the body text, front type "Segoe" - it is preserved in some headers but reverts to "Times New Roman" in body text?







KD Kesavan D Syncfusion Team November 27, 2019 12:28 PM UTC

Hi Bob, 

Greetings from Syncfuion. 

DocumentEditor requires server side interaction for opening an existing word document. Web service can be created in ASP.NET Core/ MVC. Please refer the github sample link https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices 


From the posted stack trace we could see there is parsing error for the document which you have tried to open, So we request you to share the document upon which this exception is faced. Also if you face any exception while opening a document please share us the document for validation. 

Regarding Embedded images and “Segoe” font can you please share the source document without any modification so that we could investigate in detail and provide a resolution at the earliest since DocumentEditor supports rendering images and text with font styles. 

Regards 
Kesavan. 



BI bob ingham November 27, 2019 01:08 PM UTC

Hi Kesavan,
Thanks for replying.
Attached is a Word document which loads unpredictably.
Heading1 is missing and body text defaults to Times New Roman.
Bob


Attachment: Care_plan_802e1c5.zip


HC Harini Chellappa Syncfusion Team November 28, 2019 05:53 PM UTC

Hi Bob, 

Thank you for sharing the document. 

We have checked the reported issues with provided document. Please find the details below. 

Heading1 is missing 
Heading 1 contains shading and font color with white. 
 
Currently Document editor doesn’t provide support for paragraph borders and shading. Hence font with white color is not visible. 
 
We have logged this feature in our database. You can track the status of the feature from below link. 
 
 
body text defaults to Times New Roman. 
We couldn’t reproduce this issue. body has been rendered properly with Calibri font. 
 
Please refer the attached video. 
 
Please share the video to reproduce the issue. It will be easier and provide solution at the earliest. 
 
                                                                          
Regards, 
Harini C 



BI bob ingham November 29, 2019 04:03 PM UTC

Hi Harini,

Thanks for all your help with this, I feel I'm getting closer.
I will put in some work this weekend on my sandbox project, the code for which will be made publicly available.
I will revert as soon as i have more news or questions.

Cheers,
Bob


HC Harini Chellappa Syncfusion Team December 2, 2019 06:16 AM UTC

Hi Bob, 

Okay. please get back to us if you need you any further assistance. 

Regards, 
Harini C 



BI bob ingham replied to Harini Chellappa January 10, 2020 01:17 PM UTC

Hi Bob, 

Okay. please get back to us if you need you any further assistance. 

Regards, 
Harini C 


I have started to look at your component again and although I can see the advantages I find the formatting unpredictable to say the least.
The attached two documents can be opened in Word and the table is formatted perfectly.  When converted to .sfdt the table appears to use "autofit".  If you open the document in Word and then select the table and choose "autofit" from the drop down menu you will see what I mean.
Is there any way to reserve table formatting through code or at least to be able to select the table and then apply something like this?

this.documentContainer.documentEditor.selection.tableFormat.preferredWidthType = 'Percent';
this.documentContainer.documentEditor.selection.tableFormat.preferredWidth = 100;
this.documentContainer.documentEditor.selection.cellFormat.preferredWidthType = 'Percent';
this.documentContainer.documentEditor.selection.cellFormat.preferredWidth = 100;
this.documentContainer.documentEditor.selection.rowFormat.allowBreakAcrossPages = false;

Attachment: Nuagecare_documentation_8919dd7e.zip


BI bob ingham January 10, 2020 01:29 PM UTC

Similarly when I have a Heading 1 set to break on a new page the formatting is not picked up, see the attached care plan.  I don't mind reformatting some things but it seems that unless the document is simple text the conversion to sfdt will probably be unsatisfactory.  Shame because I believe you have a unique product which appears to be the only viable alternative to a full blown WOPI implementation.  Can you have a look at this please?


Attachment: Care_plan[20191031152618379]_3158a97e.zip


BI bob ingham replied to bob ingham January 11, 2020 04:51 PM UTC

Hi Bob, 

Okay. please get back to us if you need you any further assistance. 

Regards, 
Harini C 


I have started to look at your component again and although I can see the advantages I find the formatting unpredictable to say the least.
The attached two documents can be opened in Word and the table is formatted perfectly.  When converted to .sfdt the table appears to use "autofit".  If you open the document in Word and then select the table and choose "autofit" from the drop down menu you will see what I mean.
Is there any way to reserve table formatting through code or at least to be able to select the table and then apply something like this?

this.documentContainer.documentEditor.selection.tableFormat.preferredWidthType = 'Percent';
this.documentContainer.documentEditor.selection.tableFormat.preferredWidth = 100;
this.documentContainer.documentEditor.selection.cellFormat.preferredWidthType = 'Percent';
this.documentContainer.documentEditor.selection.cellFormat.preferredWidth = 100;
this.documentContainer.documentEditor.selection.rowFormat.allowBreakAcrossPages = false;

Attachment: Nuagecare_documentation_8919dd7e.zip

Regards table formatting, I have found that pre-formatting the table in Word helps in displaying the table in the document editor.
I have tried to insert an image but I don't think it worked so I also attach the link:



AutomaticallyResizeToFitContents

So I am now left with problems with styling on headings:
  • If Word style has "Page break before" this doesn't work in the editor.
  • If Word heading has background bar this also doesn't display in the editor.



SM Suriya Murugan Syncfusion Team January 13, 2020 11:50 AM UTC

Hi Bob, 
  
Automatically resize to fit contents 
We can reproduce the reported issue. Currently, we are validating the issue and get back to you with more detaisl by Jan 17,2020. 
If Word style has "Page break before" this doesn't work in the editor. 
DocumentEditor doesn’t have support to preserve page break before. We have already logged the feature request for this requirement. 
 
Now, you can track the status of this feature through below feedback link:

https://www.syncfusion.com/feedback/10277/page-break-enhancements 
 
If Word heading has background bar this also doesn't display in the editor. 
DocumentEditor doesn’t have support to preserve border for paragraph. We have already logged the feature request for this requirement. 
 
Now, you can track the status of this feature through below feedback link: 
 
 
  
Regards, 
Suriya M. 


Loader.
Up arrow icon