Javascript to control checkbox display on Rad button toggle change

4 posts, 0 answers
  1. Rachana
    Rachana avatar
    2 posts
    Member since:
    Oct 2012

    Posted 07 Feb 2013 Link to this post

    Hello,

    I have the following code on my aspx page

    <table width="800px"><tr><td align="right">
            <telerik:RadButton ID="ToggleResponseView" OnCommand="OnToggleResponseView" AccessKey="1" runat="server" ButtonType="StandardButton" ToggleType="CustomToggle">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="SVIEW" />
                    <telerik:RadButtonToggleState Text="FRECORD" />
                </ToggleStates>
            </telerik:RadButton>
            </td>
            <td>
            <asp:CheckBox ID="chkisSummary" runat="server" AutoPostBack="true" OnClientToggleStateChanged="chkSummaryAll" OnCheckedChanged="ViewSummaryAll" Checked="false" Visible="true" text="Show All"/>
            </td></tr></table>
      
    <script type="text/javascript">
        function chkSummaryAll(sender, args) {
            switch (args.get_currentToggleState().get_text()) {

                case "SVIEW":
                    document.getElementById("chkisSummary").checked = false;
                    alert("RadButton was clicked.");
                    break;}
            }   
    </script>


    I want to hide the check box 'chkisSummary' when the toggle button ttext is 'SVIEW'. However for somne reason the checkbox object is coming as Null and the javascript does not work.

    Please suggest.

  2. Arun
    Arun avatar
    19 posts
    Member since:
    Jan 2012

    Posted 08 Feb 2013 Link to this post

    .
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 08 Feb 2013 Link to this post

    Hi Rachana

    Try the following aspx and JS to hide checkbox when text is SVIEW.Hope this helps.
    aspx:
    <table width="800px">
                <tr>
                    <td align="right">
                        <telerik:RadButton ID="ToggleResponseView" AccessKey="1" OnClientLoad="OnClientLoad"
                            runat="server" ButtonType="StandardButton" ToggleType="CustomToggle">
                            <ToggleStates>
                                <telerik:RadButtonToggleState Text="SVIEW" />
                                <telerik:RadButtonToggleState Text="FRECORD" />
                            </ToggleStates>
                        </telerik:RadButton>
                    </td>
                    <td>
                        <asp:CheckBox ID="chkisSummary" runat="server" AutoPostBack="true" Checked="false"
                            Visible="true" Text="Show All" />
                    </td>
                </tr>
    </table>
    JS:
    <script type="text/javascript">
    function OnClientLoad(sender, args)
    {
            var button = $find("ToggleResponseView");
            var text = button.get_selectedToggleState().get_text();
            if (text = "SVIEW")
            {
                var chk = document.getElementById("chkisSummary");
                chk.disabled = true;
            }
        }
    </script>

    Thanks
    Princy.
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 12 Feb 2013 Link to this post

    Hi all,

    I will make a small correction on the comparison operator in Princy's code:

    if (text = "SVIEW")
    should be
    if (text == "SVIEW")

    Greetings,
    Danail Vasilev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top