Applying custom CSS to a dropdown list in edit mode

2 posts, 0 answers
  1. Jon
    Jon avatar
    4 posts
    Member since:
    Sep 2016

    Posted 12 Oct Link to this post

    I'm really struggling to work this out. My grid columns are currently:

     

    columns.ForeignKey(c => c.CustomerId, (System.Collections.IEnumerable)ViewData["CustomersDropDown"], "Id", "Name").Title("Customer Name");
    columns.Bound(c => c.Filename).Title("File"));
    columns.Bound(c => c.Schema).Title("Schema"));//.EditorTemplateName("EnumDropDown");

     

    The ForeignKey field displays fine and I'm happy with it. The "Schema" field (last line) is an enumerated type. Now the way this dropdown looks when the grid is in edit mode is vastly different to what the ForeignKey dropdown looks like. OK, so I just want to apply the same CSS in edit mode. However, I can't seem to find out how. I've tried adding a template which I don't think I got right (code below, or at least my last attempt at it) in order to add the CSS. It seems, from searching, that my only recourse is to take the enumerated type, turn it into a selectlist in the back end simply so I can use the ForeignKey property of Kendo UI instead of Bound. This seems a little long way to go simply to apply some CSS while in edit mode. The grid, functionally works fine otherwise.

     

    My EnumDropDown as it stands now, though has gone through many previous edits in an effort to get it going. This current incarnation seems to format it, but displays no data.

     

    @model Common.Schema
     
    @(Html.Kendo().DropDownListFor(m => m)
        .BindTo(Enum.GetNames(typeof(Common.Schema)))
        .HtmlAttributes(new { style = "k-dropdown" })
    )
  2. Eyup
    Admin
    Eyup avatar
    3012 posts

    Posted 17 Oct Link to this post

    Hello Jon,

    Generally, you can use CSS to achieve this requirement. Or access the generated edit widgets to apply any desired settings manually:
    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

    Here is a basic sample:
    Copy Code
    Copy Code
    Copy Code
    .Events(events => events.Edit("onEdit"))
    JavaScript:
    Copy Code
    Copy Code
    Copy Code
    function onEdit(args) {
        if (args.model.isNew() != false) {
                // textbox
                $("#ShipName").attr("readonly", true);
                 
                // dropdownlist
                var kendoDdl = $("#ShipCountry").data("kendoDropDownList");
                kendoDdl.readonly(true);
        }
    }

    Alternatively, you can use custom template:
    http://demos.telerik.com/aspnet-mvc/grid/editing-custom

    I hope this will prove helpful.

    Regards,
    Eyup
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top