Kendo Grid with Radio Yes No

[Gaysorn]

Hi there,

I'm working with MVC Core Razor pages using Grid mode GridEditMode.InCell, Batch(true), ServerOperation(false) to pull data from database,  modified and save back to database.

Two of columns I'm dealing with define as bit data type and users want to see in the grid as Yes and No radio that they need to pick one option. What is the better way to handle this requests. Any samples? Thank you.

 

[Stoyan]

Hi Gaysorn,

To use a RadioGroup when editing a Grid column bound to a boolean field edit the Boolean.cshtml template located in the Views/Shared/EditorTemplates directory of your project. There define the desired RadioGroup:

@(Html.Kendo().RadioGroup()
            .Name("radiogroup")
            .Items(i =>
            {
                i.Add().Label("Yes").Value("1");
                i.Add().Label("No").Value("2");
            })
            .Events(e => e.Change("onChange"))
        )

You'll notice that the items of the RadioGroup do not take boolean values as parameters. For this reason you need to subscribe to the Change Event of the RadioGroup to change the value of the Grid DataItem. To achieve this:

1. Get the row the changed RadioGroup item belongs to
2. Use the row to get the dataItem of the Grid
3. Use the Model API's set method to set the boolean value of the Model based on the value of the RadioGroup

        function onChange(e) {
            var row = e.sender.element.parent().parent();
            var grid = $("#grid").data("kendoGrid");
            var dataItem = grid.dataItem(row);
            //Arrived is the name of the boolean field of the Grid
            dataItem.set("Arrived",e.sender.value()==1)
        }

Finally, subscribe to the Edit Event of the Grid to set the initial value of the RadioGroup:

.Events(e=>e.Edit("onEdit"))

        function onEdit(e) {
            if ($("#Arrived_radiogroup").length>0) {
                var radioGroup = $("#Arrived_radiogroup").data("kendoRadioGroup");
                if (e.model.Arrived) {
                    radioGroup.value(1);
                } else {
                    radioGroup.value(2);
                }
            }
        }

I hope the information above is useful.

Regards,
Stoyan
Progress Telerik