Grid template editing not displayed data nor allow editing when using SfRichTextEditor

[Sao]

Hello,

I add the template editing to my grid following the example give at https://blazor.syncfusion.com/documentation/datagrid/template-editing by using SfRichTextEditor to display and edit data.

The controls come up nicely but 2 issues occurred

1 – The field value from the database has not been binded to the SfRichTextEditor

2 – I cannot type anything in the SfRichTextEditor

Video is attached for your reference

  <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="Syncfusion.Blazor.Grids.EditMode.Dialog"

                      ShowDeleteConfirmDialog="true">

        <HeaderTemplate>

            @{

                var text = GetHeader((context as Horoscope));

                <span>@text</span>

            }

        </HeaderTemplate>

        <FooterTemplate>

            <SfButton OnClick="@Save" IsPrimary="true">@ButtonText</SfButton>

            <SfButton OnClick="@Cancel">Cancel</SfButton>

        </FooterTemplate>

        <Template>

            @{

                var H = (context as Horoscope);

                <div>

                    <div class="form-row">

                        <div class="form-group col-md-6">

                            <label class="e-float-text e-label-top">1: ID</label>

                            <SfNumericTextBox ID="OrderID" @bind-Value="@(H.ID)"

                                          ShowSpinButton="false" Enabled="@((H.ID == null)? true: false)">

                            </SfNumericTextBox>

                        </div>

                        <div class="form-group col-md-6">

                            <label class="e-float-text e-label-top">2: Dates</label>

                            <SfDatePicker ID="HDate" @bind-Value="@(H.Dates)"></SfDatePicker>

                        </div>

                        <div class="form-group col-md-6">

                            <label class="e-float-text e-label-top">Horo 1</label>

                            <SfRichTextEditor ID="H1" @bind-Value="@(H.Horo1)" Height="150">

                            </SfRichTextEditor>

                        </div>

                        <div class="form-group col-md-6">

                            <label class="e-float-text e-label-top">Horo 2</label>

                            <SfRichTextEditor ID="H2" @bind-Value="@(H.Horo2)" Height="150">

                            </SfRichTextEditor>

                        </div>

                        <div class="form-group col-md-6">

                            <label class="e-float-text e-label-top">Horo 3</label>

                            <SfRichTextEditor ID="H3" @bind-Value="@(H.Horo3)" Height="150">

                            </SfRichTextEditor>

                        </div>

                    </div>

                </div>

            }

        </Template>

    </GridEditSettings>

Attachment: Media1_102c13da.rar

[Monisha Saravanan]

Hi Sao,

Greetings from Syncfusion support.

We have checked your query and prepared an sample as per your requirement . But we could not able to replicate the reported issue at our end on using RichTextEditor. Kindly check the attached sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1850684193.zip

If the reported issue still persists then kindly share the below details to validate further at our end.

1. Share us the entire Grid code snippet along with model class.
2. Share us the Syncfusion Nuget version used.
3. Kindly ensure whether you have enabled IsPrimarykey column to an unique column.
4. If possible kindly share us the issue reproduceable sample or try to reproduce the reported issue on the above mentioned sample.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,

Monisha

[Sao]

Hello Monisha,

I can still not input the entry in SFRichtext control when editing or adding a new record after following your sample link provided. I would like to point out that before implementing SFRichtext, I can edit and add new records as usual.

I have attached the entire Grid code snippet along with model class, Syncfusion Nuget version, and proof to ensure whether you have enabled IsPrimarykey column to an unique column for your review

Best regards

Sao

Attachment: IssueSFRichEdit_cd7fbc3b.rar

[Monisha Saravanan]

Hi Sao,

Thanks for the update.

Query: “I can still not input the entry in SFRichtext control when editing or adding a new record after following your sample link provided. I would like to point out that before implementing SFRichtext, I can edit and add new records as usual.”

We have checked your query and we suggest you to use external SfDialog instead of using default GridEditDialog. We have prepared an simple sample based on your shared reference. Kindly check the attached sample and code snippet for your reference.

 

<SfGrid @ref="Grid" ID="Grid" DataSource="@Orders" AllowPaging="true"  Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" Height="315">

    <GridEvents OnActionBegin="BeginHandler" TValue="Order"></GridEvents>

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog" Dialog="DialogParams"></GridEditSettings>

</SfGrid>

 

<SfDialog Visible="@DialogVisibility" ShowCloseIcon="true" Height="500" Width="500">

    <DialogEvents Opened="DialogOpen" Closed="OnClose"></DialogEvents>

    <DialogTemplates>

        <Header> Dialog </Header>

        <Content>

         

                <div class="form-row">

                    <div>

                        <label>Name</label>

                        <SfRichTextEditor @ref="RTEObj" ID="Question" @bind-Value="@SelectedItem.CustomerID" Height="300" Width="450">

                        </SfRichTextEditor>

                    </div>

                </div>

               

          

        </Content>

    </DialogTemplates>

    <DialogButtons>

        <DialogButton Content="@btnText" IsPrimary="true" OnClick="@(() => DialogClose(btnText))" />

        <DialogButton Content="Cancel" OnClick="@(() => DialogClose("Cancel"))" />

    </DialogButtons>

</SfDialog>

 

 

@code{

   

 

    public SfRichTextEditor RTEObj;

 

    public async Task DialogOpen()

    {

 

        await RTEObj.RefreshUI();

 

    }

}

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1731950323.zip

Kindly get back to us if you face any difficulties or if you have further queries.

Regards,

Monisha

[Daniel Guimarães Scatigno]

Hi, I'm also facing this problem, there should exists an event for the Dialog Opened when editing an item on the Grid.

[Monisha Saravanan]

Hi Daniel,

We suspect that you are expecting to trigger an event when performing dialog editing in DataGrid. If so we would like to inform that ActionBegin/Action complete event will be triggered after performing CRUD operation and we can get details in the action event argument. Kindly check the below UG for your reference.

Reference: https://blazor.syncfusion.com/documentation/datagrid/events#onactionbegin

https://blazor.syncfusion.com/documentation/datagrid/events#onactioncomplete

If we misunderstood your query then kindly share the below details to proceed further at our end.

1. Share us some more details about your exact requirement in detail.
2. Share us the entire Grid code snippet.
3. Share us the video demonstration of the issue.
4. If possible share us an simple issue reproduceable sample.

Above requested details will be very helpful in validating the reported query at our end and provide solution as early as possible.

Regards,

Monisha