Client Template Handler not able to populate kendo dropdownlist.

1 Answer 20 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