New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Edit an InCell Editable Grid using Radio Buttons

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I edit a specified field using a radio buttons in an InCell editable Grid?

Solution

You can achieve this requirement using the following implementation:

Define a template column that contains radio buttons and set its checked attribute based on the value of the Role field:

Razor

@(Html.Kendo().Grid<Person>()
    .Name("persons")
    .Columns(columns =>
    {
        columns.Template(@<text></text>)
        .ClientTemplate(@"<input name='name#=PersonID#' type='radio' value='0' #= Role==0 ? checked='checked':'' # />
        <input name='name#=PersonID#' type='radio' value='1' #= Role==1 ? checked='checked':'' # />
        <input name='name#=PersonID#' type='radio' value='2' #= Role==2 ? checked='checked':'' # />");
        ... // Additional columns.
    })
    .Editable(ed=>ed.Mode(GridEditMode.InCell))
    ... // Additional configuration.
)

Handle the click event of each radio button and update the Role field based on the respective radio button state:

    $(function () {
        $('#persons').on('click', ':radio', function () {
            var checked = $(this).is(':checked');
            var grid = $('#persons').data().kendoGrid;
            var dataItem = grid.dataItem($(this).closest('tr'));
            dataItem.set('Role', $(this).val());
        });
    });

To review the complete example, refer to the project on how to create a template Grid column with radio buttons that update the underlying model when their state changes.

Edit an InCell Editable Grid using Radio Buttons

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also