How/Can I add a data- attribute to a Kendo DatePicker?

Question

I have a requirement to add a data- attribute to a Kendo DataPicker object.

However, I do not see an intuitive way to do it. There's only 'name' and 'htmlattributes' which only appears to accept 'style', 'title', and 'id'.

I need this for jQuery operations so there is no other way around it.

Here's what I have so far:

<div>
@(Model.FieldLabel): @(Html.Kendo().DatePicker()
    .Name("valueToGet")
    .Value(Model.FieldValue)
    .HtmlAttributes(new { style = "width: 100%", title = Model.FieldLabel, id = Model.FieldId.ToString()})
    .Deferred()        
    )
</div>

score 6 · Accepted Answer · answered Mar 14 '18 at 13:04

You need to replace dashes (-) with underscores (_), the compiler will convert it appropriately.

<div>
@(Model.FieldLabel): @(Html.Kendo().DatePicker()
    .Name("valueToGet")
    .Value(Model.FieldValue)
    .HtmlAttributes(new { style = "width: 100%", title = Model.FieldLabel, id = Model.FieldId.ToString(), data_test = "Test Value"})
    .Deferred()        
    )
</div>

How/Can I add a data- attribute to a Kendo DatePicker?

1 Answers1