Currently my grid implementation is using the popup editor and a kendo template to render the markup. I was able to use the KendoEditor widget (rich-text editor) inside the popup by calling it inside the grid's Edit event. Making normal text changes does not pose a problem, but when I make changes using the KendoEditor features (bold, italics, bullets, etc.) the grid does not save, and the grid field in question (HeadLine) is marked as dirty. How do I get around this? Thank you.
Markup:
<body><div id="grid"></div><script id="popup-editor" type="text/x-kendo-template"> <form class="k-form k-form-vertical" id="headline-popup"> <div> <label class="k-edit-label" for="Headline">News Headline</label> <div class="k-edit-field"> <textarea id="headline-test" name="HeadLine" rows="4">#: HeadLine#</textarea> </div> </div> </form></script></body>
JavaScript:
$("#grid").kendoGrid({ dataSource: data, columns: [ { field: "Headline", title: "News Headline", width: "5%", headerAttributes: { "class": "font-weight-bold" } }, { command: ["edit"], width: "10%" } ], editable: { mode: "popup", template: kendo.template($("#popup-editor").html()), }, edit: function (e) { $("#headline-test").kendoEditor({}); },});2 Answers, 1 is accepted
Rank 1
This dojo accurately reproduces my problem: https://dojo.telerik.com/EKEGAqoq
If you update the ProductName will just plain text (no rich-text editor options), the grid updates fine, but as soon as you use one of the rich-text features (bold, italics, bullet, numbering, etc.), the grid does not update and the model is marked as "dirty".
Hi Noman,
Thank you for the provided code snippets and Dojo. It is correct that the grid is not being saved due to the fact that the Update requests have a return status of 500. This is the code for the internal server error.
In this case, the error is triggered because of the formatting - HTML elements are appended to the value. Hence, the server treats this as a threat for having the possibility of an XSS attack and rejects the request.
This can be confirmed by opening the dev tools of the browser, navigating to the Network tab, and then performing an update. You will notice that the request fails.
Perhaps the same exact behavior is observed in your application. This can be resolved by either disabling the validation on the server-side or escaping the HTML before saving it to the database.
I hope you find this helpful.
Kind regards,
Tsvetomir
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.