Telerik DatePicker id conflict with partial views

Question

I'm working on a project that uses the Telerik DatePicker. The app switches through partial views that share the same field name. DatePicker requires the name specified by Name() to be the name of the field in the data model. (As far as I can tell the call to .Value(Model.DataField) is redundant.)

@(Html.Telerik().DatePicker()
    .Name("DataField")
    .ShowButton(true)
    .Value(Model.DataField))

What happens is that the control is created with the id of DataField. So with two partials for the same field name there are two identical ids. One works (the first one shown) and the other is dead.

I've tried adding .HtmlAttributes(new { id="DataField_wrapper" }) to the lineup but it doesn't change the problematic id. This id shows up in a dev that wraps the control:

<div class="t-widget t-datepicker" id="DataField_wrapper">
    <div class="t-picker-wrap">
        <input class="t-input" .... id="DataField" name="DataField" type="text">

Using jQuery to grab the elements via #DataField, one will have a .data("tDatePicker") and the other will not.

Is there a decent way to get both of these controls working?

Answer 1

Calling HtmlAttributes to set the id sets the value for a wrapper div. InputHtmlAttributes is what is needed! This affects the actual input control so that a unique id can be assigned.

@(Html.Telerik().DatePickerFor(x => Model.DataField)
    .InputHtmlAttributes(new {id="UniqueID"}))

This yields:

<div class="t-widget t-datepicker">
    <div class="t-picker-wrap">
        <input class="t-input" .... id="UniqueID" name="DataField" type="text">

and works as desired.