How can I hide radio button using style with formdecorator

2 posts, 1 answers
  1. Rizwan
    Rizwan avatar
    30 posts
    Member since:
    Mar 2009

    Posted 16 Apr 2009 Link to this post

    Hi
       I have created an application where I need to use html input radio type control. on load it has style='display:none' but if formdecorator is on form then it makes it displays it without considering display:none property. Any Solutions ?
    This is my form,  Version of Telerik is Q1 2009 ( latest released)


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="FormDecoratorTest.aspx.cs" Inherits="FormDecoratorTest" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
                   <asp:ScriptManager runat="server" ID="smTest"></asp:ScriptManager>        
       <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" Skin="Office2007" />
            <input type="radio" id="test" value="true"  groupname="1" />
            <input type="radio" id="Radio1" checked  groupname="1" style="display:none;" /> Should see only one radiobutton
        </div>
        </form>
    </body>
    </html>
  2. Answer
    Jose
    Jose avatar
    49 posts
    Member since:
    Aug 2008

    Posted 16 Apr 2009 Link to this post

    Hi Rizwan.

    The behavior is expected due the fact that RadFormDecorator overwrites completely the style of the element. You could try something like this: Change the markup of the radio buttons to this:

    <input type="radio" value="0"  name="radios" /> 
    <input type="radio" value="1" name="radios" /> Should see only one radiobutton   
     
    This is because the properties "groupname" and "checked" doesn't work here because they are HTML controls, not ASP.NET controls. Now add a RadCodeBlock with the following script:

        <script type="text/javascript">  
            function pageLoad() {  
                document.forms[0].radios[0].display='none';  
            }  
        </script> 

    The behavior won't be as expected because it will cause the radio button to be disabled.
    My suggestion would be to enclose the radio you want to hide into a span element and manipulate the span like this:

    <input type="radio" value="0"  name="radios" /> 
    <span id="hiddenRadio" style="display:none;"><input type="radio" value="1" name="radios" /></span> Should see only one radiobutton  
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">  
    <script type="text/javascript">  
        function pageLoad() {  
            $get("hiddenRadio").style.display = 'none';  
        }  
    </script> 
    </telerik:RadCodeBlock> 

    Hope this helps.
    If it does, please mark it as answer.

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