Use Radio Buttons as Custom Grid Editor

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	Tested up to version 2017.2 621

Description

How can I use radio buttons as a custom editor in the Kendo UI Grid?

Solution

To create an editor with radio buttons:

1. Configure a columns.editable function that will always return false.
2. Configure a columns.template function.
   1. Get the current value based on the dataItem.
   2. Add a radio button for every value in an array.
   3. Based on the current value, select the relevant radio button.
3. Subscribe to the click event of the buttons.
4. In the click event handler, set the new value of the dataItem.

<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js" type="text/javascript"></script>
<div id="example">
    <div id="grid"></div>

    <script>
        var categories = [{
            "value": 1,
            "text": "Beverages"
        }, {
            "value": 2,
            "text": "Condiments"
        }, {
            "value": 3,
            "text": "Confections"
        }, {
            "value": 4,
            "text": "Dairy Products"
        }, {
            "value": 5,
            "text": "Grains/Cereals"
        }, {
            "value": 6,
            "text": "Meat/Poultry"
        }, {
            "value": 7,
            "text": "Produce"
        }, {
            "value": 8,
            "text": "Seafood"
        }];

        $(document).ready(function() {
            var dataSource = new kendo.data.DataSource({
                pageSize: 20,
                data: products,
                autoSync: true,
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: {
                                editable: false,
                                nullable: true
                            },
                            ProductName: {
                                validation: {
                                    required: true
                                }
                            },
                            CategoryID: {
                                editable: true,
                                field: "CategoryID",
                                type: "number",
                                defaultValue: 1
                            },
                            UnitPrice: {
                                type: "number",
                                validation: {
                                    required: true,
                                    min: 1
                                }
                            }
                        }
                    }
                }
            });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                filterable: true,
                groupable: true,
                pageable: true,
                height: 540,
                toolbar: ["create"],
                columns: [{
                        field: "ProductName",
                        title: "Product Name"
                    },
                    {
                        field: "CategoryID",
                        width: "200px",
                        title: "Category",
                        template: templateFunction,
                        editable: function() {
                            return false
                        }
                    },
                    {
                        field: "UnitPrice",
                        title: "Unit Price",
                        format: "{0:c}",
                        width: "200px"
                    },
                    {
                        command: "destroy",
                        title: " ",
                        width: "150px"
                    }
                ],
                editable: true
            });
        });

        function templateFunction(dataItem) {
            var cell = "";
            var category = dataItem.CategoryID - 1;

            for (var i = 0; i < categories.length; i++) {
                var item = "";

                item += "<label>"
                 if (category === i) {
                    item += "<input type='radio' class='k-radio k-radio-md' name='" + dataItem.uid + "' onclick='setDataItem(this);' checked=checked />";
                } else {
                    item += "<input type='radio' class='k-radio k-radio-md' name='" + dataItem.uid + "' onclick='setDataItem(this);'/>";
                }
                item += categories[i].text;
                item += "</label>"
                item += "</br>";

                cell += item;
            }
            return cell;
        };

        function setDataItem(item) {
            var grid = $("#grid").data("kendoGrid");
            var row = $(item).closest("tr");
            var dataItem = grid.dataItem(row);
            var category = $(item)[0].labels[0].innerText;
            var ID;

            for (var i = 0; i < categories.length; i++) {
                if (categories[i].text === category) {
                    ID = i;
                    break;
                }
            };

            dataItem.set("CategoryID", ID + 1);
        };
    </script>
</div>

See Also

• Demo on Custom Editing in the Grid