Kendo Dropdown List Inside Panel Bar Not Initializing After CSP

[Anupriya]

Problem:
After enabling Content Security Policy (CSP), Kendo DropDownLists inside a PanelBar fail to initialize. On page load:
• The DropDownList renders as a plain input box.
• PanelBar items appear empty, and data binding does not happen.
• JavaScript access to the DDL fails.

Scenario:
• ASP.NET MVC Razor.
• Dropdown Lists inside PanelBar content templates.
• Worked fine before CSP; now initialization and binding fail.

 

Expected Behavior:
• DDL should initialize and bind data on content load even with CSP.
• PanelBar items should display properly.

 

Example:

@(
                     Html.Kendo().PanelBar()
                     .Name("panelbar")
                     .ExpandMode(PanelBarExpandMode.Multiple)
                     .Items(panelbar =>
                     {
                         panelbar.Add().Text("Note : Please fill all the input")
                         .Content(@<text>
        @(Html.Kendo().DropDownList()
                                            .Name("dropdown")
                                            .OptionLabel("Please Select")
                                            .OptionLabelTemplate("<span style='color:dimgrey;font-size:10px;font-weight:bold'>Please Select</span>")
                                            .DataValueField("id")
                                            .DataTextField("Text")
                                            .Template("#:id # - #:datacolumn # - #:datecolumn #")
.DataSource(source=>{source.Read(read=>{read.Action("action","controller");});})
.Events(e=>{e.Select("onselect");})
                                            )
   </text>
   );

 

Thanks,

Anupriya. R

[Anupriya]

Note: When commenting the template fileds, 

like the below

1. optionalLabelTemplate
2. Template 

its working fine. help me on this how to implement these with csp.

 

 

 

 

[Anton Mironov]

Hi Anupriya,

Thank you for the details provided.

The issue is caused by the use of inline client templates (such as OptionLabelTemplate and Template) in your DropDownList configuration. Strict Content Security Policy (CSP) settings block inline JavaScript, which is used internally by these template strings.

How to implement DropDownList templates with CSP:

• Define templates externally:
  Move your template code into <script type="text/x-kendo-template"> blocks in your Razor view. Assign a unique ID to each template.

• Reference templates by ID:
  Use the .OptionLabelTemplateId("templateId") and .TemplateId("templateId") methods in your DropDownList configuration instead of passing template strings.

Example:

<script id="optionLabelTemplate" type="text/x-kendo-template">
    <span style='color:dimgrey;font-size:10px;font-weight:bold'>Please Select</span>
</script>
<script id="dropdownItemTemplate" type="text/x-kendo-template">
    #: id # - #: datacolumn # - #: datecolumn #
</script>

@(Html.Kendo().DropDownList()
    .Name("dropdown")
    .OptionLabel("Please Select")
    .OptionLabelTemplateId("optionLabelTemplate")
    .DataValueField("id")
    .DataTextField("Text")
    .TemplateId("dropdownItemTemplate")
    .DataSource(source => {
        source.Read(read => { read.Action("action", "controller"); });
    })
    .Events(e => { e.Select("onselect"); })
)

Reference:

• https://www.telerik.com/aspnet-mvc/documentation/html-helpers/helper-basics/content-security-policy

This approach ensures your DropDownList and PanelBar components will work correctly under CSP, with templates rendered and data bound as expected. You can also try to use the nonce approach from the article above.

I hope this infromation helps.

 

Kind Regards,
Anton Mironov
Progress Telerik