Style MVC DropDownListFor Helper to look like Kendo ComboBox

11 posts, 0 answers
  1. Landon
    Landon avatar
    66 posts
    Member since:
    Nov 2010

    Posted 19 Apr 2013 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 22 Apr 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Darius
    Darius avatar
    10 posts
    Member since:
    Sep 2013

    Posted 16 Sep 2013 Link to this post

    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
  5. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 16 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Darius
    Darius avatar
    10 posts
    Member since:
    Sep 2013

    Posted 16 Sep 2013 Link to this post

    Thx, it works.
  7. Darius
    Darius avatar
    10 posts
    Member since:
    Sep 2013

    Posted 17 Sep 2013 Link to this post

    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?
  8. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 18 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Darius
    Darius avatar
    10 posts
    Member since:
    Sep 2013

    Posted 18 Sep 2013 Link to this post

    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.


  10. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 18 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Darius
    Darius avatar
    10 posts
    Member since:
    Sep 2013

    Posted 18 Sep 2013 Link to this post

    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
  12. Dimo
    Admin
    Dimo avatar
    8332 posts

    Posted 18 Sep 2013 Link to this post

    No, the field names must match.


    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready