This is a migrated thread and some comments may be shown as answers.

Applying custom CSS to a dropdown list in edit mode

1 Answer 47 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 12 Oct 2016, 02:40 PM

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

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 17 Oct 2016, 11:11 AM
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.
Tags
Grid
Asked by
Jon
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or