Using rtf editor in grid causes problems with hotkeys

Question

HiI've got the following requirements:My clients wants a grid displaying data. one column in this grid should be a multiline textbox.With the "normal" multiline textbox i got the problem of line breaks. the only way i found to do it was to check each character for a line break (
 or ) and replace it with a html line break. this obviously is very slow for long texts.My second aproach was using a rtf editor. this works much better because its already html in the background. Here i also have the problem of users inputing html code. but i can fix this by using a sanitation function.Also sometimes i cant type in a rtf editor until i specifically set the line to edit mode. this behavior is not present in each line and i dont know what causes it.My main problem with the rtf solution are hotkeys.For example:When a user wants a new line they press enter. This adds a new line to the text but also the gri interprets it a save command.When a user wants to type a whitespace the grid sets focus on the rtf editor preventing further typing.Also arrow keys do change the cell and wont move the cursor.What is the best solution to my problem? is there another control you can suggest?I want either use the build in add/edit function of a grid or build one myself.

Renjith Singh Rajendran · Accepted Answer

Hi Simon, Query 1 : But isnt there the possibility that OnActionBegin is executed before OnKeyDown is? this would lead to undesired behaviour. The OnActionBegin event of Grid will be triggered only after the @onkeydown event bind for SfRichTextEditor, the @onkeydown will only be triggered first. We have also attached a working sample for your reference in our previous update. Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Grid_Template_RTE51834348 Please refer the above attached sample, and if you still need further assistance, then kindly share with us the detailed explanation of the problem you are facing with our suggested solution. Query 2 : On this page i cant type anything. also my described behaviour using space and the arrow keys are present here. We suggest you to define @onkeydown:stopPropagation as true for the parent div element of SfRichTextEditor to overcome this problem. Please refer and add the below highlighted code to overcome the reported problem.

@{ var project = (context as Project); }

...

Please get back to us if you need further assistance. Regards, Renjith Singh Rajendran

Renjith Singh Rajendran · Answer

Hi Simon,

Greetings from Syncfusion support.

Query 1 : When a user wants a new line they press enter. This adds a new line to the text but also the gri interprets it a save command.

We suggest you to bind @onkeydown event to SfRichTextEditor. Now based on the Enter key press we suggest you to cancel the save in OnActionBegin handler of Grid to overcome this behavior. Please refer the codes below,

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

<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" TextAlign="TextAlign.Center" Width="120" DisableHtmlEncode="false"> <EditTemplate> <SfRichTextEditor @ref="rteObj" @bind-Value=@(((Order) context).CustomerID) Placeholder="Enter Value" @onkeydown="onkeydown"> </SfRichTextEditor> </EditTemplate></GridColumn>public bool flag = false;public void onkeydown(KeyboardEventArgs args){ if (args.Key == "Enter") { flag = true; }}public async Task ActionBeginHandler(ActionEventArgs<Order> args){ if (args.RequestType == Syncfusion.Blazor.Grids.Action.Save && flag) { flag = false; args.Cancel = true; await rteObj.FocusIn(); }}

We are attaching the sample for your reference, please download the sample from the link below,

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

References :

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

https://blazor.syncfusion.com/documentation/datagrid/cell/#displaying-the-html-content

Query 2 & 3 : When a user wants to type a whitespace the grid sets focus on the rtf editor preventing further typing. Also arrow keys do change the cell and wont move the cursor.

We are not clear about this scenarios. We tried by pressing the space key and arrow keys, but the navigation works fine within the SfRichTextEditor in the sample from our side.

We are also attaching a video demo showing the behavior from our side.

Video : https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTEhotkeys2029354151

If we have misunderstood your requirement or if you are still facing difficulties, then the following details would be helpful for us to proceed further.

Share the video demo showing the replication of the problem you are facing.
Share the sample which you have tried from your side.
Share with us a detailed explanation of the problem you are facing.

Please get back to us if you need further assistance.

Regards,

Renjith Singh Rajendran

Simon Balling · Answer

Hi Renjith,Thanks for your reply. Query1:I understand what you are suggesting here. But isnt there the possibility that OnActionBegin is executed before OnKeyDown is? this would lead to undesired behaviour.Query 2:Here is the code of my test page. the behaviour I described is present here.@page "/Test"@if (Projects != null){

@{ var project = (context as Project); }

}@code{ Protocol protocol = new Protocol {ProjectId = 1, ProtocolId = 1, Text = "Test123"}; List Projects = new List { new Project {ProjectId = 1, Competitor = "comp1", Customer = "Cus1",}, new Project {ProjectId = 1, Competitor = "comp2", Customer = "Cus1",}, new Project {ProjectId = 1, Competitor = "comp3", Customer = "Cus3",}, new Project {ProjectId = 1, Competitor = "comp2", Customer = "Cus2",}, }; private class Project { public int ProjectId { get; set; } public string Competitor { get; set; } public string Customer { get; set; } } private class Protocol { public int ProjectId { get; set; } public int ProtocolId { get; set; } public string Text { get; set; } }}On this page i cant type anything. also my described behaviour using space and the arrow keys are present here.Please let me know if you need something else.

Simon Balling · Answer

Hi RenjithThanks for your help.I tried to fix both my problems using @onkeydown:stopPropagation. as far as i can tell it does exactly what i want it to do.Thank you for your help

Renjith Singh Rajendran · Answer

Hi Simon, 

We are glad to hear that the provided suggestion helped you in achieving this requirement. Please get back to us if you need further assistance. 

Regards, 
Renjith R

Simon Balling · Answer

Hi Renjithsorry to bother you again with this topic.Do you have an idea why the @onkeydown:stopPropagation="true" solution works on this page butz not on another? The only difference i can think of is on this other page my rtf box is used in a edittemplate. Like this:...

@{ var localAkquise = (context as Akquise); }

...I also tried the cancel method but even with this it will try to save the entered text (which it doesnt do because i cancel my own insert method)

Renjith Singh Rajendran · Answer

Hi Simon, 

When using SfRichTextEditor inside EditTemplate, then it is suggested to use the suggestion provided in March 10, 2021(Query 1) update when using in Grid. 
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Grid_Template_RTE51834348 
 
Kindly try the suggestion from your side, and if you are still facing difficulties, kindly share with us a video demo and sample showing the problem you are facing. This would be helpful for us to proceed further. 

Regards, 
Renjith R

Simon Balling · Answer

Hi Renjith,I implemented it again and now it seems to work :)Thanks

Renjith Singh Rajendran · Answer

Hi Simon, 

We are glad to hear that your requirement is achieved. Please get back to us if you need further assistance. 

Regards, 
Renjith R

Simon Balling · Answer

I got a new issue with the rtf editor.It worked just fine but now it doesnt. When i click inside the editor no cursor is shown. Also i cant type, so the cursor isnt just invisible.If i double click on thext to select it and click in the toolbar on bold, the text is changed to bold.If I take the editor and put it outside of the grid it works just fine.

@{ var project = (context as Project); ProjProtocol protocol = GetProtocol(project); }

@{ //var project = (context as Project); }

@* *@ Do you have an idea where the issue comes from?RegardsSimon

Renjith Singh Rajendran · Answer

Hi Simon, 

We tried reproducing the reported problem by creating a sample based on your shared codes, but we could not face the reported problem from our side. We are attaching the sample for your reference, please download the sample from the link below, 
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Grid_Template_RTE1195798230 
 
Kindly refer the above attached sample, and if you are still facing difficulties then the following details would be helpful for us to proceed further. 


Share a simple issue reproducing sample showing the problem you are facing.
Or if possible reproduce the problem with the above attached sample and share with us for further analysis.
Share with us the exact scenario or proper replication procedure.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 
Renjith R

Simon Balling · Answer

HiI also cant seem to reproduce the problem outside of this code.Here is a video showing the issue:https://youtu.be/M7NOt9nvAc0I put timestamps in the description to show what is happeningI thought it could be a stylesheet problem but I tried the default stylesheets and it still didnt work.Im really out of ideas about what causes this.RegardsSimon

Simon Balling · Answer

Some findings:I think it has something to do with focus.When clicking on the editor and pressing tab it jumps to the next row. When pressing SHIFT+Tab it jumps to the editors container and then to the above row.When clicking into the todo list and presing shift+tab a few times it jumps into the editor and I can type.This leads me to believe it is a focus problem:https://youtu.be/A_h9FYzIJokWhen copying your code into my solution, I have the excat same issue.Do these findings make sence to you?

Simon Balling · Answer

I cant believe im that stupid... the problem is firefox

using the same code it works in chrome or edge or opera

you do have an issue here but its far simpler than i thought.

the second issue with the editor reseting is most likely connected to my code. Ill keep you updated if I find something

Simon Balling · Answer

maybe you can speed up my debugging.the reset occurs because of this line of code: ProjProtocol protocol = GetProtocol(project);private ProjProtocol GetProtocol(Project project){    ProjProtocol projProtocol;    using (var context = _contextFactory.CreateDbContext())    {        projProtocol = context.Protocols.SingleOrDefault(p => p.ProjectId == project.ProjectId);    }    return projProtocol ?? new ProjProtocol(project);}for whatevery reason this code is called multiple times and also in random intervalls while typing. if it is run while typing it will get the protocol from the database and resets the editor. I just dont have any idea why it does run again and again

Renjith Singh Rajendran · Answer

Hi Simon, Query 1 : 00:15The Editor is randomly reset We are able to face this problem with our sample. We suggest you to update the value entered in SfRichTextEditor to the ProjProtocol model to overcome this reported problem. In the ValueChange event handler of SfRichTextEditor you can update the ProjProtocol with the content from Richtexteditor. And also add the stopPropagation for @onclick and @onmousedown events. Please download the modified sample from the link below, Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Grid_Template_RTE818100557 Please refer the codes below,

@{ var project = (context as Project); ProjProtocol protocol = new ProjProtocol() { Text = "RTEdata" }; }

...

public void ValueChange(Syncfusion.Blazor.RichTextEditor.ChangeEventArgs args) { RTEValue.Text = args.Value; } ProjProtocol RTEValue = new ProjProtocol() { Text = "RTEdata" }; public ProjProtocol GetProtocol(Project project) { return RTEValue; } Query 2 : the problem is firefox using the same code it works in chrome or edge or opera We have validated you query and have considered “Unable to edit the content in the Rich Text Editor when rendered inside a table in Firefox browser” as a bug from our end and logged the report for the same and the fix will be included in our patch release on 27th April. You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this https://www.syncfusion.com/feedback/24469 Regards, Renjith R

Simon Balling · Answer

Hi Renjith,your suggestion works for saving the data but it will still reset the cursor. Unfortunately that wont work for my requirementsDo you have any other idea of what to do?Why does this happen for the protocol and not for the todo list?RegardsSimon

Renjith Singh Rajendran · Answer

Hi Simon, 

We suggest you to check this scenario by fetching context.Protocols outside of GetProtocol method. You can fetch and assign the context.Protocols data to a List inside the OnInitialized method. Now you can use this Protocols list for fetching the projProtocol inside the GetProtocol method. Please refer and modify the codes in your application as like below, 





 
    List<ProjProtocol> Protocols { get; set; } 
    protected override void OnInitialized() 
    { 
        ... 
        using (var context = _contextFactory.CreateDbContext()) 
        { 
            //fetch the Protocols and assign to a list 
            Protocols = context.Protocols; 
        } 
    } 
    private ProjProtocol GetProtocol(Project project) 
    { 
        ProjProtocol projProtocol; 
        projProtocol = Protocols.SingleOrDefault(p => p.ProjectId == project.ProjectId); 
        return projProtocol ?? new ProjProtocol(project); 
    } 


We are also attaching a sample with dummy list based on the above suggestion, in which we could not face the cursor resetting problem after apply the above suggestion. Please download and refer the sample from the link below, 
Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Grid_Template_RTE-128094710 
 
Please get back to us if you need further assistance. 

Regards, 
Renjith R

Simon Balling · Answer

Hi Renjith,the rtf now works as expected after updating to the newest version. Thank you.I changed my code to only load the protocol withour creating a new instance of the object and now it wont reset the cursor.Thank you for your helpRegardsSimon

Renjith Singh Rajendran · Answer

Hi Simon, 

We are glad to hear that your requirement is achieved. Please get back to us if you need further assistance. 

Regards, 
Renjith R