How to pass DocumentEditorModule from Child to Parent Component

[Charles]

I'm using SfDocumentEditorContainer with SfTab like below.

<SfTab @bind-SelectedItem="selectedTab">

    <TabItems>

        <TabItem>

            <ChildContent>

                <TabHeader Text="General"></TabHeader>

            </ChildContent>

            <ContentTemplate>

                <div class="row">

                    <div class="col-4">

                        <!-- Phone -->

                        <SfTextBox Placeholder="Phone"

                                    FloatLabelType="@FloatLabelType.Auto"

                                    @bind-Value="@currentEmployee.Phone">

                        </SfTextBox>

                    </div>

                </div>

            </ContentTemplate>

        </TabItem>

        <TabItem>

            <ChildContent>

                <TabHeader Text="Notes"></TabHeader>

            </ChildContent>

            <ContentTemplate>

                <div class="row">

                    <div class="col-12">

                        <SfDocumentEditorContainer EnableToolbar=false

                                                    @ref="docEditor"

                                                    LayoutType="LayoutType.Continuous"

                                                    ShowPropertiesPane="false">

                            <DocumentEditorEvents Created="@OnLoadEditor" ContentChanged="@OnSaveEditor"></DocumentEditorEvents>

                        </SfDocumentEditorContainer>

                    </div>

                </div>

            </ContentTemplate>

        </TabItem>

    </TabItems>

</SfTab>

@code {

    public SfDocumentEditorContainer docEditor;

    #region [Notes]

    private async Task OnSaveEditor()

    {

        DocumentEditorModule editor = docEditor.GetDocumentEditor();

        string base64Data = await editor.SaveAsBlob(FormatType.Docx);

        byte[] data = Convert.FromBase64String(base64Data);

        currentEmployee.Notes = data;

    }

    private void OnLoadEditor()

    {

        if (currentEmployee.Notes == null) return;

        byte[] byteArray = (byte[])currentEmployee.Notes;

        Stream stream = new MemoryStream(byteArray);

        WordDocument doc = WordDocument.Load(stream, ImportFormatType.Docx);

        string json = JsonConvert.SerializeObject(doc);

        doc.Dispose();

        stream.Dispose();

        DocumentEditorModule editor = docEditor.GetDocumentEditor();

        editor.Open(json);

    }

    #endregion

}

*. My questions.

1. How to pass docEditor object from Child to Parent Component.

     - Parent Component using SfDialog that call Child Component.  Child Component using SfDocumentEditorContainer to get context.
     - I want to save editor contents to database from Parent Component after click OK button from Dialog Window. 

[Harini Chellappa]

Hi Charles, 

 

Syncfusion Greetings! 

 

Can you please confirm whether you are maintaining separate pages for parent and child components or parent component and child component placed in same page? 

 

Can you please explain it clearly or share the simple sample on how you need to get the document editor component reference? 

 

Or expecting like below, where the provided tab component is placed inside sfDialog component. 

 

<SfDialog Width="335px" Target="#target" IsModal="true"> 

    <DialogTemplates> 

        <Header> Header </Header> 

        <Content> 

            <SfTab> 

                <TabItems> 

                    <TabItem> 

                        <ChildContent> 

                            <TabHeader Text="General"></TabHeader> 

                        </ChildContent> 

                        <ContentTemplate> 

                            <div class="row"> 

                                <div class="col-4"> 

                                    <!-- Phone --> 

                                    @*<SfTextBox Placeholder="Phone" 

                                                   FloatLabelType="@FloatLabelType.Auto" 

                                                   @bind-Value="@currentEmployee.Phone"> 

                                        </SfTextBox>*@ 

                                </div> 

                            </div> 

                        </ContentTemplate> 

                    </TabItem> 

 

                    <TabItem> 

                        <ChildContent> 

                            <TabHeader Text="Notes"></TabHeader> 

                        </ChildContent> 

                        <ContentTemplate> 

                            <div class="row"> 

                                <div class="col-12"> 

                                    <SfDocumentEditorContainer EnableToolbar=false 

                                                               @ref="docEditor" 

                                                               LayoutType="LayoutType.Continuous" 

                                                               ShowPropertiesPane="false"> 

                                        <DocumentEditorEvents Created="@OnLoadEditor" ContentChanged="@OnSaveEditor"></DocumentEditorEvents> 

                                    </SfDocumentEditorContainer> 

                                </div> 

                            </div> 

                        </ContentTemplate> 

                    </TabItem> 

                </TabItems> 

            </SfTab> 

        </Content> 

    </DialogTemplates> 

    <DialogButtons> 

        <DialogButton Content="OK" IsPrimary="true" OnClick="@OnSaveEditor" /> 

    </DialogButtons> 

    <DialogAnimationSettings Effect="@DialogEffect.None"></DialogAnimationSettings> 

</SfDialog> 

 

And on dialog ok button called saveEditor method. 

 

Kindly check it and let us know. 

 

Regards, 

 

Harini C 

 

[Charles]

Thank you for your quick reply.

I attached file to explain my request.

- I want to save context on Parent Component(Employee.razor)

Attachment: flow_d43336d0.zip

[Harini Chellappa]

Hi Charles,  

 

Thank you for the update. 

 

You can get the child component reference by setting @ref in child component. 

 

Sample code snippet 

 

<SfDialog Width="335px" Target="#target" IsModal="true"> 

    <DialogTemplates> 

        <Header> Heading </Header> 

        <Content> 

        <EmployeeEdit @ref=”EmpEditRef”/>        </Content> 

    </DialogTemplates> 

    <DialogButtons> 

        <DialogButton Content="OK" IsPrimary="true" OnClick="@OnSave" /> 

    </DialogButtons> 

    <DialogAnimationSettings Effect="@DialogEffect.None"></DialogAnimationSettings> 

</SfDialog> 

 

@code{ 

 

Public EmployeeEdit EmpEditRef; 

 

private async Task OnSave() 

{ 

        await EmpEditRef.OnSaveEditor(); // make sure to define the OnSaveEditor method as public in child razor page. So that you can access here. 

} 

} 

 

Kindly check the above and let us know whether this satisfies. 

 

Regards, 

 

Harini C 

[Charles]

Thank you, Harini.

I test you advise but I have another problem.

I attached error screen.

As you know, 

I have two Tab in my Dialog and I explain situations.

 1. Select "Notes" Tab,  edit context and Click "OK" button is no problem.

 2. I had an error

1. Select "Notes" Tab.
   
2. Edit context
3. Select "General" Tab
4. Click "OK" button

*.SfDocumentEditorContainer initialized when i select other tab during editing context.

*.I'm using Created event which event should i use to solve this problem?

Attachment: flow2_dd757e7d.zip

[Harini Chellappa]

Hi Charles, 

 

By default, when switching tabs, existing tab content will be removed from DOM. Hence, we couldn’t get the document editor component reference. To maintain the other tab components while switching, please refer the below UG. 

 

https://blazor.syncfusion.com/documentation/tabs/content-render-modes/#on-demand-rendering-or-lazy-loading  

 

Sample code snippet 

 

<SfTab LoadOn="ContentLoad.Demand"> 

    <TabItems> 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="General"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                <div class="row"> 

                    <div class="col-4"> 

                        <!-- Phone --> 

                        @*<SfTextBox Placeholder="Phone" 

                                       FloatLabelType="@FloatLabelType.Auto" 

                                       @bind-Value="@currentEmployee.Phone"> 

                            </SfTextBox>*@ 

                    </div> 

                </div> 

            </ContentTemplate> 

        </TabItem> 

 

        <TabItem> 

            <ChildContent> 

                <TabHeader Text="Notes"></TabHeader> 

            </ChildContent> 

            <ContentTemplate> 

                <div class="row"> 

                    <div class="col-12"> 

                        <SfDocumentEditorContainer EnableToolbar=false 

                                                   @ref="docEditor" 

                                                   LayoutType="LayoutType.Continuous" 

                                                   ShowPropertiesPane="false"> 

                            <DocumentEditorEvents Created="@OnLoadEditor" ContentChanged="@OnSaveEditor"></DocumentEditorEvents> 

                        </SfDocumentEditorContainer> 

                    </div> 

                </div> 

            </ContentTemplate> 

        </TabItem> 

    </TabItems> 

</SfTab> 

 

Kindly check the above and let us know whether this resolves the issue. 

 

Regards, 

 

Harini C 

[Charles]

Thank you so much Harini.

It's perfect.