New to Telerik UI for ASP.NET Core? Download free 30-day trial

Using Radio Buttons as Foreign Key Editor in the Grid


Product Telerik UI for ASP.NET Core Grid
Product Version 2019.1.220


I was wondering if there is a way to convert the foreign key column from a dropdown to radio buttons?


  • Define a new editor in Shared/EditorTemplates and pass the collection via the EditorViewData to it:
    columns.ForeignKey(x => x.NameCodeId, (System.Collections.IEnumerable)ViewData["NameCodes"], "Id", "Description")
        .Title("Foreign Key Column")
  • Get the ViewData, loop over it, creating the radio checkboxes. The must have a unique name which is translated to their id

    Radios demo

    The name HTML attribute is necessary so that the radios work as a group:

    // Radios.cshtml

    @model object
    @using ForeignKey.Models
        var options = (List<NameCode>)ViewData["NameCodes"];

        for (var i=0;i <options.Count; i++)
            @Html.Kendo().RadioButton().Name("radio" + options[i].Id.ToString()).Label(options[i].  Description).HtmlAttributes(new { @name = "NameCodeId" }).Value(options[i].Id)
  • In the case of in cell editing, every time you click on the edit cell, it closes. So you need to also add a mouse-down handler targeting the label as the input element is hidden:
    $(document).ready(function () {
        $("#grid").on("mousedown", ".k-radio-label", function (e) {

More ASP.NET Core Grid Resources

See Also

In this article