This is a migrated thread and some comments may be shown as answers.

KendoEditor Changes in Grid's Popup Editor Not Saving

2 Answers 690 Views

Grid

This is a migrated thread and some comments may be shown as answers.

noman asked on 31 Mar 2021, 03:29 PM

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>

</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

answered on 05 Apr 2021, 11:28 AM

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/.