Style MVC DropDownListFor Helper to look like Kendo ComboBox

[Landon]

Hi,

I've browsed through the Kendo Styling documentation and found many simple ways to style my regular, hum-drum forms. However, I was wondering if there is a way to apply the ComboBox styles to  MVC Helpers like DropDownListFor() and so on? I use MVC Helpers on a lot of my forms and would like to be able to standardize my Text and Dropdown lists to look the same.

I've tried applying the Kendo classes to my DropDownList's directly like this:

@Html.DropDownListFor(model => model.AccountTypeID, new SelectList((System.Collections.IEnumerable)ViewBag.AccountTypesDD, "Key", "Value"),
new { @class = "k-combobox" })

I've attempted to attach classes like "k-combobox, k-dropdown-wrap ect." but nothing styles the DropDownList to mimic the Style of a Kendo ComboBox. 

I understand that this is probably because most of the Kendo Styles require layered <span/> tags to apply properly, but was wondering if there is an out-of-the-box way to apply them to MVC Helpers?

Thanks
Landon

[Dimo]

Hi Landon,

<select> elements are practically impossible to style. If you need consistent look, please use Kendo UI DropDownLists (or ComboBoxes) everywhere.

Regards,
Dimo
the Telerik team

[Darius]

Can you please tell me how to use the Kendo Dropdown in the way we can use DropDownListFor? (I mean, take data form list and bind it to the model)

Thanks

[Dimo]

Hi Darius,

Kendo.DropDownListFor() is used in exactly the same fashion as Kendo.DropDownList() with two exceptions:

1. you must have a lambda, which points to the model property, e.g. DropDownListFor(m => m.Property)

2. you must not set widget .Name().

Regards,
Dimo
Telerik

[Darius]

Thx, it works.

[Darius]

Ok, but what can I do if I want to build a three dropdowns with cascade, the first and the second one need to be with Dropdownlistfor. If i specify the name then it would not work.

Solutions?

[Dimo]

Hello Darius,

You don't have to specify a Name. The CascadeFrom() method requires a client ID, which in your case would be the same as the corresponding model property.

If you will be using the cascading comboboxes for different models, including nested ones (which will change the DropdownLists' Names, depending on the exact case), you can specify custom IDs (instead of Names) via HtmlAttribuites() and use them in CascadeFrom().

Regards,
Dimo
Telerik

[Darius]

Hello, thanks for an answer. Two more quesitons:

1. can you give me an example for your answer?
2. I have the following case:

<tr>
<td>Companie</td>
<td>
@(Html.Kendo().DropDownListFor(model => model.CustomDocumentModel.CompanyId)
 .BindTo(new SelectList(Model.Companies, "Id", "Name"))
 )
</td>
</tr>

<tr>
<td>Departament</td>
<td>
@(Html.Kendo().DropDownListFor(model => model.CustomDocumentModel.CompanyDepartmentId)
.BindTo(new SelectList(Model.CompanyDepartments, "Id", "Name"))
 )
</td>
</tr>

Can I use it in this way (with BindTo) and still get cascade? I want to show only the departments from the selected company, what I need to do?

Thanks.

[Dimo]

Hello Darius,

1. 

Html.Kendo().DropDownListFor(model => model.Property1)
    .HtmlAttributes(new {id = "myCustomID"})

//...

Html.Kendo().DropDownListFor(model => model.Property2)
    .CascadeFrom("myCustomID")

2. Using cascading comboboxes (or dropdownlists) with BindTo is possible only if the parent master datasource has a fieldname (its ID), which matches a fieldname in the child datasource. For example:

Master data (parent DropDownList)
ParentID, Field1, Field2

Child data (child DropDownList)
ID, Field3, Field4, ParentID

It seems that you are not fulfilling this requirement currently. Alternatively, use the approach demonstrated in the Kendo UI MVC offline examples. The source code is visible in the code viewer at:

http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html

You can refer to the following page for more information on how cascading dropdownlists work. It is targeted at the client-side Kendo UI widgets, but the logic is the same:

http://docs.kendoui.com/getting-started/web/combobox/cascading

Regards,
Dimo
Telerik

[Darius]

I have one id that matches the parent id.

In the child (CompanyDepartments) I have CompanyId that matches the Id in the Company. Can be done like this?

Thanks

[Dimo]

No, the field names must match.

Regards,
Dimo
Telerik