Applying custom CSS to a dropdown list in edit mode

[Jon]

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" })
)

[Eyup]

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