Client Template Handler not able to populate kendo dropdownlist.

1 Answer 39 Views

DropDownList Grid

1 Answer, 1 is accepted

Accepted

answered on 05 Aug 2025, 05:19 AM

Hello Anupriya,

When CSP is enabled, you need to use the Template component to define the DropDownList editor. That said, would you share the DropDownList editor declaration to review it?

For example, if the Grid is InLine editable, use the EditorTemplateComponentName() option to define the column's editor:

 columns.Bound(p => p.Studendetails).ClientTemplateHandler("getname").EditorTemplateComponentName("StudentEditor");

//~/Views/Shared/EditorTemplates/StudentEditor.cshtml
@model StudentViewModel

@(Html.Kendo().Template()
    .AddComponent(ddl => ddl
        .DropDownListFor(m => m)
            .DataValueField("StudentID")
            .DataTextField("Name")
            .HtmlAttributes(new { data_bind = "value: Studendetails" })
            .DataSource(ds => ds.Read(read => read.Action("Students", "Grid")))
    )
)

A similar example is demonstrated in the online demo.

If the Grid is InCell editable, follow the same approach, but decorate the "Studendetails" property with the UIHint attribute:

        [UIHint("StudentEditor")]
        public StudentViewModel Studendetails
        { 
            get; 
            set; 
        }

Looking forward to your reply.

Regards,
Mihaela
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Anupriya

commented on 14 Aug 2025, 02:20 PM

It worked. Thanks.

Anupriya

commented on 14 Aug 2025, 02:24 PM | edited

Similarly I have tried binding datepicker instead of dropdown in another page. But its showing csp in console. Could you please share if you have any idea on this

Editor Template having the below code:

@(Html.Kendo().Template()
.AddComponent(ddl => {
ddl
.DatePickerFor(m => m)
.Format("MM/dd/yyyy")
.HtmlAttributes(new { placeholder = "Enter Date" });
})
)

Mihaela

commented on 15 Aug 2025, 12:45 PM

Hi Anupriya,

You can pass a JavaScript function in the HtmlAttributes() method, which returns the placeholder:

@(Html.Kendo().Template()
    .AddComponent(ddl => {
        ddl
       .DatePickerFor(m => m)
.Format("MM/dd/yyyy")
.HtmlAttributes("addPlaceholder");
    })
    )


function statusColAttributes(data) {
    return { palceholder: "Enter Date" }
}

Anupriya

commented on 16 Aug 2025, 03:38 PM | edited

The datepicker isn't the issue, oncilck has binded with add new record button. That is causing .I resolved with js button binding.

Another Issue:

Whenever grid loading for the first time i.e) on page load I am getting the below error.

I think its because of pageable function used in grid. If i comment pageable, that error is not showing. could you provide any solution on this, how to remove this error from console. the functionality and all working fine. just need to remove this thing.

.Pageable(p => p
.PageSizes(new int[] { 5, 10, 25, 50, 100 })

Mihaela

commented on 20 Aug 2025, 09:37 AM

Hi Anupriya,

Would you please let me know which Telerik UI for ASP.NET MVC version you use? Also, would you share the content of the CSP at your end?

I have tested the following Grid configuration with the latest Telerik UI for ASP.NET MVC version (2025.3.812) and enabled CSP:

//_Layout.cshtml
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; script-src 'self' https://kendo.cdn.telerik.com https://code.jquery.com/ https://cdn.kendostatic.com https://unpkg.com https://cdn.jsdelivr.net; style-src 'self' https://kendo.cdn.telerik.com https://unpkg.com https://cdn.jsdelivr.net; font-src 'self' https://unpkg.com; connect-src ws: http: 'self';" />

    <link href="https://kendo.cdn.telerik.com/themes/11.3.2/default/default-ocean-blue.css" rel="stylesheet" type="text/css" />
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
    <script src="https://cdn.kendostatic.com/2025.3.812/js/kendo.all.min.js"></script>
    <script src="https://cdn.kendostatic.com/2025.3.812/js/kendo.aspnetmvc.min.js"></script>
</head>
<body class="k-content">
     ...
    @(Html.Kendo().DeferredScriptFile())
</body>

//Index.cshtml
        @(Html.Kendo().Grid<TelerikAspNetCoreApp142.Models.OrderViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.Freight);
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity);
            })
            .Pageable(p => p
            .PageSizes(new int[] { 5, 10, 25, 50, 100 }))
            .Sortable()
            .Scrollable()
            .Groupable()
            .Filterable()
            .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Orders_Read", "Grid"))
            )
        )

Result:

Best,
Mihaela

Anupriya

commented on 28 Aug 2025, 09:22 PM

Hi Mihaela,

Please refer the below,

csp = "script-src 'self' https://code.jquery.com https://cdn.kendostatic.com https://kendo.cdn.telerik.com https://unpkg.com https://cdnjs.cloudflare.com 'nonce"

Thanks,

Anupriya. R

Mihaela

commented on 02 Sep 2025, 06:00 AM

telerikmvcapp72.zip

Hello Anupriya,

Thank you for the provided CSP configuration.

I have prepared a runnable ASP.NET MVC application with enabled CSP (check out the "CSPFilterAttribute" class in the "Filters" folder) and installed Telerik UI for ASP.NET MVC version 2024.1.319. The app contains a Grid with specified PageSizes() option. You can find it attached.

Hopefully, the sample app will help you to resolve the CSP error at your end.

Best,
Mihaela

Anupriya

commented on 07 Sep 2025, 07:44 PM

I will try . Thanks.

Hi,

I am having a page which having the below structure,

<div>Panel Bar with dropdowns</div>

</div>

<div>Panel Bar with dropdowns</div>

</div>

@(Html.Kendo().DeferredScriptFile("nonce"))

Sample DropdownUsed:

@(Html.Kendo().DropDownList()
.Name("nameddl")
.HtmlAttributes(new { @class = "Class" })
.OptionLabel("Please Select")
.DataValueField("id")
.DataTextField("Text")
.DataSource(source => { source.Read(read => { read.Action("actionname", "controller"); }); })
.Events(e => { e.Select("onSelect"); })
)

I am currently placing the deferred script file under the two div. Buts dropdowns getting as textboxes. Could you give some solution on this.

Ivaylo

commented on 10 Sep 2025, 02:03 PM

Hi Anupriya,

I am Ivaylo, and I will be covering for my colleague Mihaela during her time off.

I am currently investigating the case, but I will need some additional time before I can provide feedback. I will get back to you once I have further details on the matter.

Thank you in advance for your patience.

Best,
Ivaylo

Ivaylo

commented on 11 Sep 2025, 07:18 AM

sampleappforanupriya.zip

Hi Anupriya,

Thank you for your patience.

Since Q4 2024, all components are compliant with Content Security Policy (CSP). Therefore, I recommend updating to the latest version.
You can find more details in the official documentation:

https://www.telerik.com/aspnet-mvc/documentation/html-helpers/helper-basics/content-security-policy#telerik-ui-for-aspnet-mvc-2024-q4-and-later

Regarding the issue where dropdowns are rendering as textboxes, this may indicate a JavaScript error.
To assist further, could you please open the Developer Tools (F12), navigate to the Console tab, and share any error messages displayed there?

Furthermore, I prepared a sample application from the previous response. Please let me know if this is the desired result.

I hope this information was helpful, and I look forward to your reply.

Regards,
Ivaylo