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
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 25 Mar 2015 Link to this post

    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
     

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

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top