Radio Button Group

2 posts, 0 answers
  1. Stephanie
    Stephanie avatar
    139 posts
    Member since:
    Aug 2013

    Posted 24 Mar 2015 Link to this post

    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....
  2. Danail Vasilev
    Danail Vasilev avatar
    1476 posts

    Posted 25 Mar 2015 Link to this post

    Hello Stephanie,

    You can place the following workaround below the editor declaration:

    <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!");
                        return false;
                    else {
                        element = editor.createElement("form", "150px", "150px");
                        element.innerHTML = " "; //Otherwise there exists a problem with typing in the form in mozilla
                case "textarea":
                    element = editor.createElement("textarea");
                case "select":
                    element = editor.createElement("select", "100px", "22px");
                case "checkbox":
                case "radio":
                    element = editor.createElement("input");
                    element.setAttribute("type", value);
                    var name = window.prompt("Set Radio Button Group:");
                    element.setAttribute("name", name);
                case "button":
                case "reset":
                case "submit":
                    element = editor.createElement("input", "50px", "22px");
                    element.setAttribute("type", value);
                case "hidden":
                case "password":
                case "text":
                    element = editor.createElement("input", "100px", "22px");
                    element.setAttribute("type", value);
            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) {
                    if (insertedElem.setActive) insertedElem.setActive();
                    return false;

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

    Danail Vasilev

    See What's Next in App Development. Register for TelerikNEXT.

  3. DevCraft R3 2016 release webinar banner
Back to Top