Kendo grid Edit Popup Not opening with CSP

[Anupriya]

I have a asp.net mvc kendo grid with Edit option in each row, on click it brings the data from Editor Template(its having a kendo dropdown in it) I have implemented CSP globally. Grid having Deferred() in it.  Grid works fine with its basic get records.

After CSP . Edit click is not opening the popup. Shows console error with invalid template. 

 

followed by the entire page html code.

How to eliminate this. How to use Edit with CSP.

Grid Example:

@(Html.Kendo().Grid((IEnumerable<test>)Model)
    .Name("test")
    .DataSource(datasource => datasource.Ajax().Read(read => read.Action("GetRecords", "Test").Type(HttpVerbs.Get)))
    .Columns(columns =>
    {
        columns.Command(command => { command.Edit().Text("Edit"); }).Width(75);
        columns.Bound(p => p.Id).Title("ID").Width(130);
        columns.Bound(p => p.Name).Title("Name").Width(130);
        columns.Bound(p => p.Date).Title("Date").Width(150);
    })
     .Editable(editable =>
 {
     editable.Mode(GridEditMode.PopUp).TemplateName("Edit_Details");
 })
    .Pageable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(p => p.Id);
        })
         .Update(update => update.Action("EditDetails", "Test").Type(HttpVerbs.Post))
    )
    .Deferred()
)

 

 

Thanks,

Anupriya. R

 

[Nikolay]

Hello Anupriya,

To make the Kendo UI for ASP.NET MVC controls work without 'unsafe-inline' and 'unsafe-eval', you need to ensure that every inline script generated by Kendo and your custom code has a nonce and that no dynamic code evaluation is used. Here’s how you can achieve a global solution:

Deferred Initialization for Global CSP Compliance

For strict CSP, enable global deferred initialization for all Kendo controls:
- In Global.asax.cs, set DeferToScriptFiles = true.
- Configure a HttpModule in Web.config to ensure deferred scripts are handled for every request.
- In your main layout view (e.g., _Layout.cshtml), call @Html.Kendo().DeferredScriptFile() after all component declarations.
- This ensures all initialisation scripts are moved to external files, which do not require a nonce.

Example for Global.asax.cs:

protected void Application_Start()
{
    // other code...
    Telerik.Web.Mvc.Kendo.MvcDeferredScripts.DeferToScriptFiles = true;
}

Example for _Layout.cshtml:

@Html.Kendo().DeferredScriptFile()

Nonce Handling

Your NonceResponseFilter approach is a good start, but ensure it adds the nonce to all inline <script> tags, including those rendered by Kendo and your own code.
Also, check if any inline scripts are generated dynamically or by third-party libraries, as these will also need a nonce.

Kendo Templates

Old Kendo template syntax like # if (...) { # ... # } # or #: field # triggers the legacy template engine. Replace it with a functional string‑literal template and compile with kendo.template:

@* Views/Shared/EditorTemplates/Edit_Details.cshtml *@
@model YourNamespace.Test

<div class="k-edit-form-container">
  <label for="Name">Name</label>
  <input id="Name" name="Name" class="k-textbox" value="@Model.Name" />

  <label for="Status">Status</label>
  <input id="Status" name="Status" />

  <script>
    // CSP-safe template/function (no #= ... #, no eval)
    (function () {
      var htmlEncode = kendo.htmlEncode;

      // Example: initialize DropDownList without inline event handlers
      $("#Status").kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
          { text: "Active", value: "A" },
          { text: "Inactive", value: "I" }
        ]
      });
    })();
  </script>
</div>

Regards,
Nikolay
Progress Telerik