How to add additional htmlattributes in extension for Kendo DatePicker - asp.net

Question

I m trying to add html attribute in extension method for kendo's datetime picker
public static DatePickerBuilder Readonly(this DatePickerBuilder builder, bool isReadOnly)
{
if (isReadOnly)
{
var dic = new Dictionary<string, object>();
dic.Add("readonly", "readonly");
builder.HtmlAttributes(dic);
}
return builder;
}
The code above is working. But its unnecessary creating dictionary. The HtmlAttribute method takes object as parameter, how do i make a use of it so i don't have to create dictionary?
Note: I do not want to use razor syntax to add readonly attribute
Update 1
So i solved the above issue by changing the code like below
public static DatePickerBuilder Readonly(this DatePickerBuilder builder, bool isReadOnly)
{
if (isReadOnly)
{
var comp = builder.ToComponent();
comp.HtmlAttributes.Add("readonly", "readonly");
}
return builder;
}
However i have to make sure in razor i call readonly() extension method as the last method in the chain.
Code blow does not work
#(Html.Kendo().DatePickerFor(x => x.Deadline)
.Format("MM/dd/yyyy")
.Readonly(Model.IsEnabled)
.HtmlAttributes(new { data_inherit_value = Model.InheritDeadline }))
I think its a issue with Kendo date picker control. It overwrites existing htmlattributes
If i change the order and use readonly at the end then code blow works.
#(Html.Kendo().DatePickerFor(x => x.Deadline)
.Format("MM/dd/yyyy")
.HtmlAttributes(new { data_inherit_value = Model.InheritDeadline })
.Readonly(Model.IsEnabled))

Answer 1

They actually clear the HtmlAttributes collection before they Merge, the now cleared, HtmlAttributes collection with whatever attributes you are passing in. I'd call it a bug...
/// <summary>Sets the HTML attributes.</summary>
/// <param name="attributes">The HTML attributes.</param>
/// <returns></returns>
public virtual TBuilder HtmlAttributes(object attributes)
{
return this.HtmlAttributes(attributes.ToDictionary());
}
/// <summary>Sets the HTML attributes.</summary>
/// <param name="attributes">The HTML attributes.</param>
/// <returns></returns>
public virtual TBuilder HtmlAttributes(IDictionary<string, object> attributes)
{
this.Component.HtmlAttributes.Clear();
Kendo.Mvc.Extensions.DictionaryExtensions.Merge(this.Component.HtmlAttributes, attributes);
return this as TBuilder;
}
One way to get around this is to create a MergeHtmlAttributes extension for each control you are using:
public static TextBoxBuilder<T> MergeHtmlAttributes<T>(this TextBoxBuilder<T> builder, object attributes)
{
Kendo.Mvc.Extensions.DictionaryExtensions.Merge(builder.ToComponent().HtmlAttributes, attributes);
return builder;
}
...and in your view:
#(Html.Kendo().TextBoxFor(m => m.FirstName)
.Enable(Model.IsViewEditable)
.MergeHtmlAttributes(new {#class = "k-textbox"}))

Answer 2

Consider this one, in order do not cumulate multiple readonlies
public static DropDownListBuilder Readonly(this DropDownListBuilder builder, bool isReadOnly)
{
const string Readonly = "readonly";
var comp = builder.ToComponent();
comp.HtmlAttributes.Remove(Readonly);
if (isReadOnly)
comp.HtmlAttributes.Add(Readonly, isReadOnly);
return builder;
}