Radio Button Group

[DogBizPro]

I can insert radio button using the form button on the RadEditor tool bar. How do you put then into a group. Radio buttons are not very useful if you can select them all and they are not grouped....

[Danail Vasilev]

Hello Stephanie,

You can place the following workaround below the editor declaration:

ASPX:

<telerik:RadEditor ID="RadEditor1" runat="server"></telerik:RadEditor>
<script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList.InsertFormElement = function (commandName, editor, args) {
        var value = args.value;
        value = value.toLowerCase();

        var element = null;


        switch (value) {
            case "form":
                if (editor.get_contentAreaMode() == Telerik.Web.UI.EditorContentAreaMode.Div) {
                    alert("Error! Form elements are only supported when the content area is set to Iframe!");
                    args.set_cancel(true);
                    return false;
                }
                else {
                    element = editor.createElement("form", "150px", "150px");
                    element.innerHTML = " "; //Otherwise there exists a problem with typing in the form in mozilla
                }
                break;

            case "textarea":
                element = editor.createElement("textarea");
                break;
            case "select":
                element = editor.createElement("select", "100px", "22px");
                break;
            case "checkbox":
            case "radio":
                element = editor.createElement("input");
                element.setAttribute("type", value);
                var name = window.prompt("Set Radio Button Group:");
                element.setAttribute("name", name);
                break;
            case "button":
            case "reset":
            case "submit":
                element = editor.createElement("input", "50px", "22px");
                element.setAttribute("type", value);
                break;
            case "hidden":
            case "password":
            case "text":
                element = editor.createElement("input", "100px", "22px");
                element.setAttribute("type", value);
                break;
        }

        if (element) {
            var id = Telerik.Web.UI.Editor.Utils.getUniqueID();
            element.setAttribute("id", id);

            var html = Telerik.Web.UI.Editor.Utils.getOuterHtml(element);
            editor.pasteHtml(html, commandName);

            var insertedElem = editor.get_document().getElementById(id);
            if (insertedElem) {
                insertedElem.removeAttribute("id");
                if (insertedElem.setActive) insertedElem.setActive();
                return false;
            }
        }
    };
</script>

Where the highlighted text is the new lines added to the existing code.

Regards,
Danail Vasilev
Telerik