Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Disable Textboxes on Checkbox Click Inside FormTemplate

8 Answers 551 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Darin
Top achievements
Rank 1
Darin asked on 18 Aug 2011, 06:49 PM
I have one checkbox and two textboxes inside a FormTemplate. I need to disable the textboxes whenever the checkbox is set to true onclick. I would prefer this to happen on the client side, yet I keep getting the "control not registered" javascript error for the checkbox and textboxes whenever my javascript function runs.

Please advise.

8 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 18 Aug 2011, 07:46 PM
Hello,

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" Inherits="TelerikTest.Web.WebForm4" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function SetVisibilityOfTextBox(CheckBox1, TextBox1, TextBox2) {
 
            var tempCheckBox1 = document.getElementById(CheckBox1);
            var tempTextBox1 = document.getElementById(TextBox1);
            var tempTextBox2 = document.getElementById(TextBox2);
 
            if (tempCheckBox1.checked) {
                tempTextBox1.disabled = true;
                tempTextBox2.disabled = true;
            }
            else {
                tempTextBox1.disabled = false;
                tempTextBox2.disabled = false;
            }
 
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadGrid ID="RadGrid1" runat="server" GridLines="None" AllowPaging="True"
            AllowSorting="True" AutoGenerateColumns="False" AllowFilteringByColumn="True"
            OnNeedDataSource="RadGrid1_NeedDataSource"
            onitemdatabound="RadGrid1_ItemDataBound">
            <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
            <MasterTableView DataKeyNames="ID" EditMode="EditForms">
                <Columns>
                    <telerik:GridBoundColumn DataField="ID" HeaderText="ID" UniqueName="ID" SortExpression="ID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name" SortExpression="Name">
                    </telerik:GridBoundColumn>
                    <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
                </Columns>
                <EditFormSettings EditFormType="Template">
                    <FormTemplate>
                    <asp:CheckBox ID="CheckBox1" runat="server" />
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                    </FormTemplate>
                </EditFormSettings>
            </MasterTableView>
        </telerik:RadGrid>
    </div>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
 
namespace TelerikTest.Web
{
    public partial class WebForm4 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
 
        }
 
        protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
            if (e.Item.IsInEditMode)
            {
                GridEditFormItem editItem = e.Item as GridEditFormItem;
                CheckBox CheckBox1 = (CheckBox)editItem.FindControl("CheckBox1");
                TextBox TextBox1 = (TextBox)editItem.FindControl("TextBox1");
                TextBox TextBox2 = (TextBox)editItem.FindControl("TextBox2");
                CheckBox1.Attributes.Add("onclick", "SetVisibilityOfTextBox('" + CheckBox1.ClientID + "','" + TextBox1.ClientID + "','" + TextBox2.ClientID + "');");
 
            }
        }
 
        protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            dynamic data = new[] {
                new { ID = 1, Name ="Name1"},
                new { ID = 2, Name = "Name2"},
                new { ID = 3, Name = "Name3"},
                new { ID = 4, Name = "Name4"},
                new { ID = 5, Name = "Name5"},
                new { ID = 6, Name ="Name6"},
                new { ID = 7, Name = "Name7"},
                new { ID = 8, Name = "Name8"},
                new { ID = 9, Name = "Name9"},
                new { ID = 10, Name = "Name10"},
                new { ID = 11, Name ="Name11"},
                new { ID = 12, Name = "Name12"},
                new { ID = 13, Name = "Name13"},
                new { ID = 14, Name = "Name14"},
                new { ID = 15, Name = "Name15"}
            };
 
            RadGrid1.DataSource = data;
        }
    }
}


Let me know if any concern.

Thanks,
Jayesh Goyani
0
Darin
Top achievements
Rank 1
answered on 18 Aug 2011, 07:53 PM
Jayesh,

Thank you for your speedy reply.

My checkbox and textboxes are in a FormTemplate, which I believe is causing me the pain and suffering.  Does this make sense?

The errors I am receiving with your code are:

Error 1 'SetVisibilityOfTextBox' is not a member of 'ASP.admin_admin_csrsetup_aspx'. C:\Documents and Settings\us1dmolnar\My Documents\CC Pages\Webroot\Admin\Admin-CSRSetup.aspx 175
Error 2 Name 'GeneratePasswordCheckBox' is not declared. C:\Documents and Settings\us1dmolnar\My Documents\CC Pages\Webroot\Admin\Admin-CSRSetup.aspx 175
Error 3 Name 'NewPassword' is not declared. C:\Documents and Settings\us1dmolnar\My Documents\CC Pages\Webroot\Admin\Admin-CSRSetup.aspx 175
Error 4 Name 'ConfirmPassword' is not declared. C:\Documents and Settings\us1dmolnar\My Documents\CC Pages\Webroot\Admin\Admin-CSRSetup.aspx 175
Error 5 'NewPassword' is not declared. It may be inaccessible due to its protection level. C:\Documents and Settings\us1dmolnar\My Documents\CC Pages\Webroot\Admin\Admin-CSRSetup.aspx 1 1 C:\...\Webroot\
Error 6 'ConfirmPassword' is not declared. It may be inaccessible due to its protection level. C:\Documents and Settings\us1dmolnar\My Documents\CC Pages\Webroot\Admin\Admin-CSRSetup.aspx 1 1 C:\...\Webroot\

 Thanks, Darin
0
Jayesh Goyani
Top achievements
Rank 2
answered on 18 Aug 2011, 07:55 PM
Hello,

Are you able to solve your problem or not?

Thanks,
Jayesh Goyani
0
Darin
Top achievements
Rank 1
answered on 18 Aug 2011, 07:57 PM
Jayesh,

No - please see my edited post above.

Thanks, Darin
0
Jayesh Goyani
Top achievements
Rank 2
answered on 18 Aug 2011, 07:59 PM
Hello,

Please provide your code.

Thanks,
Jayesh Goyani
0
Darin
Top achievements
Rank 1
answered on 18 Aug 2011, 08:00 PM
<%@ Page Language="VB" MasterPageFile="~/Admin/Adminmain.master" AutoEventWireup="false" CodeFile="Admin-CSRSetup.aspx.vb" Inherits="Admin_CSRSetup" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ MasterType VirtualPath="~/Admin/Adminmain.master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <script type="text/javascript">
        function SetVisibilityOfTextBox(CheckBox1, TextBox1, TextBox2) {


            var tempCheckBox1 = document.getElementById(CheckBox1);
            var tempTextBox1 = document.getElementById(TextBox1);
            var tempTextBox2 = document.getElementById(TextBox2);


            if (tempCheckBox1.checked) {
                tempTextBox1.disabled = true;
                tempTextBox2.disabled = true;
            }
            else {
                tempTextBox1.disabled = false;
                tempTextBox2.disabled = false;
            }


        }
    </script>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" 
                        LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
<div>
<telerik:RadGrid ID="AdminCSRGrid" runat="server" Skin="Black" CellSpacing="0" 
    width="750px" height="600px" OnItemCommand="AdminCSRGrid_ItemCommand"
    OnItemDataBound="AdminCSRGrid_ItemDataBound" OnNeedDataSource="AdminCSRGrid_NeedDataSource"
    OnInsertCommand="AdminCSRGrid_InsertCommand" 
    OnUpdateCommand="AdminCSRGrid_UpdateCommand" OnDeleteCommand="AdminCSRGrid_DeleteCommand"
    GridLines="None" AllowPaging="True" AutoGenerateColumns="False">
    <ClientSettings>
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
    </ClientSettings>
<MasterTableView EditMode="EditForms" CommandItemDisplay="Top" CommandItemSettings-AddNewRecordText="Add New User">
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>


<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
<HeaderStyle Width="20px"></HeaderStyle>
</RowIndicatorColumn>


<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
<HeaderStyle Width="20px"></HeaderStyle>
</ExpandCollapseColumn>


    <Columns>
        <telerik:GridEditCommandColumn FilterControlAltText="Filter EditCommandColumn column" 
            ButtonType="ImageButton">
            <HeaderStyle Font-Bold="True" Font-Names="Arial" />
        </telerik:GridEditCommandColumn>
        <telerik:GridTemplateColumn DataField="username" 
            FilterControlAltText="Filter Username column" HeaderText="Username" 
            UniqueName="Username">
            <ItemTemplate>
                <asp:Label ID="usernameLabel" runat="server" Text='<%# Eval("username") %>'></asp:Label>
            </ItemTemplate>
            <HeaderStyle Font-Bold="True" Font-Names="Arial" />
            <ItemStyle Font-Names="Arial" />
        </telerik:GridTemplateColumn>
        <telerik:GridBoundColumn FilterControlAltText="Filter FirstName column" 
            HeaderText="First Name" UniqueName="FirstName" DataField="firstname">
            <HeaderStyle Font-Bold="True" Font-Names="Arial" />
            <ItemStyle Font-Names="Arial" />
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn FilterControlAltText="Filter LastName column" 
            HeaderText="Last Name" UniqueName="LastName" DataField="lastname">
            <HeaderStyle Font-Bold="True" Font-Names="Arial" />
            <ItemStyle Font-Names="Arial" />
        </telerik:GridBoundColumn>
        <telerik:GridBoundColumn DataField="email" 
            FilterControlAltText="Filter Email column" HeaderText="Email" 
            UniqueName="Email">
            <HeaderStyle Font-Bold="True" Font-Names="Arial" />
            <ItemStyle Font-Names="Arial" />
        </telerik:GridBoundColumn>
        <telerik:GridTemplateColumn FilterControlAltText="Filter Admin column" 
            HeaderText="Admin" UniqueName="Admin">
            <ItemTemplate>
                <asp:Checkbox ID="AdminCheckbox" runat="server"/>
            </ItemTemplate>
            <HeaderStyle Font-Bold="True" Font-Names="Arial" />
        </telerik:GridTemplateColumn>
        <telerik:GridButtonColumn ButtonType="ImageButton" UniqueName="Delete" 
            CommandName="Delete" ConfirmText="Delete this user?" ConfirmTitle="Delete User?">
            <HeaderStyle Font-Bold="True" Font-Names="Arial" />
        </telerik:GridButtonColumn>
        <telerik:GridTemplateColumn DataField="admintype" 
            FilterControlAltText="Filter admintype column" UniqueName="admintype" 
            Visible="False">
            <ItemTemplate>
                <asp:Label ID="admintypeLabel" runat="server" Text='<%# Eval("admintype") %>'></asp:Label>
            </ItemTemplate>


            <HeaderStyle Font-Bold="True" Font-Names="Arial" />
            <ItemStyle Font-Names="Arial" />
        </telerik:GridTemplateColumn>
        <telerik:GridBoundColumn DataField="userid" 
            FilterControlAltText="Filter UserID column" UniqueName="UserID" Visible="False">
        </telerik:GridBoundColumn>
    </Columns>
<EditFormSettings EditFormType="Template">
    <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
    <FormTemplate>
        <p />
        &nbsp;&nbsp;&nbsp;&nbsp;
        <asp:Label ID="UserLabel" runat="server" Font-Bold="true" ForeColor="White" 
            Text='<%# IIf( DataBinder.Eval(Container, "OwnerTableView.IsItemInserted"), "Add New User", "Edit User") %>' /><p />
        <table>
            <tr>
                <td>
                </td>
                <td>
                    <asp:CheckBox ID="AdminCheckBox" Font-Names="Arial" ForeColor="White" runat="server" Text="Admin" /><p />
                </td>
            </tr>
            <tr>
                <td align="right" valign="top">
                    <asp:Label ID="UsernameLabel" runat="server" Text="Username" ForeColor="White" Font-Names="Arial" />
                </td>
                <td>    
                    <asp:TextBox ID="Username"
                        runat="server" MaxLength="50" CausesValidation="false" Font-Names="Arial" 
                        Text='<%# IIf(DataBinder.Eval(Container, "OwnerTableView.IsItemInserted"), "", Eval("Username")) %>' /><p />
                </td>
            </tr>
            <tr>
                <td align="right" valign="top">
                    <asp:Label ID="FirstNameLabel" runat="server" Text="First Name" ForeColor="White" Font-Names="Arial" />
                </td>
                <td>    
                    <asp:TextBox ID="FirstName" runat="server" MaxLength="50" CausesValidation="false" Font-Names="Arial" 
                    Text='<%# IIf(DataBinder.Eval(Container, "OwnerTableView.IsItemInserted"), "", Eval("FirstName")) %>' /><p />
                </td>
                <td align="right" valign="top">
                    <asp:Label ID="LastNameLabel" runat="server" Text="Last Name" ForeColor="White" Font-Names="Arial" />
                 <td>
                    <asp:TextBox ID="LastName" runat="server" MaxLength="50" CausesValidation="false" Font-Names="Arial" 
                    Text='<%# IIf(DataBinder.Eval(Container, "OwnerTableView.IsItemInserted"), "", Eval("LastName")) %>' /><p />
                </td>
            </tr>
            <tr>
                <td align="right" valign="top">
                    <asp:Label ID="EmailLabel" runat="server" Text="Email" ForeColor="White" Font-Names="Arial" />
                </td>
                <td colspan="4">
                    <asp:TextBox ID="Email" runat="server" MaxLength="150" CausesValidation="false" Font-Names="Arial" Width="392" 
                    Text='<%# IIf(DataBinder.Eval(Container, "OwnerTableView.IsItemInserted"), "", Eval("Email")) %>' /><p />
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td colspan="2">
                    <asp:CheckBox ID="NotifyUserCheckBox" Font-Names="Arial" ForeColor="White" runat="server"
                        Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Notify user of account creation", "Notify user of account change") %>' />
                </td>
            </tr>
            <tr>
                <td></td>
                <td colspan="4">
                    <asp:CheckBox ID="GeneratePasswordCheckBox" Font-Names="Arial" ForeColor="White" runat="server" Visible='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "True", "False") %>'
                        Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Generate random password", "Reset password with randomly generated password") %>' AutoPostBack="true" OnCheckedChanged="SetVisibilityOfTextBox(GeneratePasswordCheckBox, NewPassword, ConfirmPassword)" /><p />
                </td>
            </tr>
            <tr>
                <td align="right" valign="top">
                    <asp:Label ID="NewPasswordLabel" runat="server" Text="New Password" ForeColor="White" Font-Names="Arial" Visible='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "True", "False") %>' />
                </td>
                <td>
                    <asp:TextBox ID="NewPassword" TextMode="Password" runat="server" MaxLength="50" CausesValidation="false" Font-Names="Arial" Visible='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "True", "False") %>' /><p />
                </td>
            </tr>
            <tr>
                <td align="right" valign="top">
                    <asp:Label ID="ConfirmPasswordLabel" runat="server" Text="Confirm Password" ForeColor="White" Font-Names="Arial" Visible='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "True", "False") %>' />
                </td>
                <td>
                    <asp:TextBox ID="ConfirmPassword" TextMode="Password" runat="server" MaxLength="50" CausesValidation="false" Font-Names="Arial" Visible='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "True", "False") %>' /><p />
                </td>
            </tr>
        </table>
        <asp:HiddenField runat="server" ID="UserID" Value='<%# IIf(DataBinder.Eval(Container, "OwnerTableView.IsItemInserted"), "", Eval("userid")) %>' />
        <Telerik:RadButton ButtonType="LinkButton" ID="btnUpdate" Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Insert", "Update") %>'
            runat="server" CommandName='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "PerformInsert", "Update")%>' />
        &nbsp;<telerik:RadButton ButtonType="LinkButton" ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel" Font-Names="Arial" />
    </FormTemplate>
</EditFormSettings>
    <FooterStyle BackColor="Black" ForeColor="White" Font-Names="Arial" />
       <NoRecordsTemplate>  
       <div style="color:White;font-family:Arial;font-weight:bold">  
            No Admin or CSR records to display.  
       </div>  
   </NoRecordsTemplate> 
</MasterTableView>


<FilterMenu EnableImageSprites="False"></FilterMenu>


<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Black"></HeaderContextMenu>
        </telerik:RadGrid>
    </div>
</asp:Content>
0
Jayesh Goyani
Top achievements
Rank 2
answered on 18 Aug 2011, 08:08 PM
Hello,

please check again my below code and let me know if you not understand.

If you not understand my code then provide your itemDataBound event code and please explain in which chcekbox which textbox should hide.

<script type="text/javascript">
        function SetVisibilityOfTextBox(CheckBox1, TextBox1, TextBox2) {
 
            var tempCheckBox1 = document.getElementById(CheckBox1);
            var tempTextBox1 = document.getElementById(TextBox1);
            var tempTextBox2 = document.getElementById(TextBox2);
 
            if (tempCheckBox1.checked) {
                tempTextBox1.disabled = true;
                tempTextBox2.disabled = true;
            }
            else {
                tempTextBox1.disabled = false;
                tempTextBox2.disabled = false;
            }
 
        }
    </script>
<EditFormSettings EditFormType="Template">
                   <FormTemplate>
                     
                           <asp:CheckBox ID="CheckBox1" runat="server" />
                           <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                           <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                       
                    
                   </FormTemplate>
               </EditFormSettings>
protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
        {
       
 
 
            if (e.Item.IsInEditMode)
            {
 
 
 
                GridEditFormItem editItem = e.Item as GridEditFormItem;
 
                CheckBox CheckBox1 = (CheckBox)editItem.FindControl("CheckBox1");
                TextBox TextBox1 = (TextBox)editItem.FindControl("TextBox1");
                TextBox TextBox2 = (TextBox)editItem.FindControl("TextBox2");
                CheckBox1.Attributes.Add("onclick", "SetVisibilityOfTextBox('" + CheckBox1.ClientID + "','" + TextBox1.ClientID + "','" + TextBox2.ClientID + "');");
 
            }
        }



Thanks,
Jayesh Goyani
0
Darin
Top achievements
Rank 1
answered on 18 Aug 2011, 08:45 PM

Server Error in '/Webroot' Application.

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error: 

Line 57:             Dim TextBox2 As TextBox = TryCast(editItem.FindControl("ConfirmPassword"), TextBox)
Line 58: 
Line 59:             CheckBox1.Attributes.Add("onclick", "SetVisibilityOfTextBox('" + CheckBox1.ClientID + "','" + TextBox1.ClientID + "','" + TextBox2.ClientID + "');")
Line 60:         End If
Line 61:     End Sub

In my AdminCSRGrid_ItemDataBound:
       
  If TypeOf (e.Item) Is GridEditFormItem And Not e.Item.IsInEditMode And e.Item.OwnerTableView.IsItemInserted Then
            Dim editItem As GridEditFormItem = TryCast(e.Item, GridEditFormItem)
            Dim CheckBox1 As CheckBox = TryCast(editItem.FindControl("GeneratePasswordCheckBox"), CheckBox)
            Dim TextBox1 As TextBox = TryCast(editItem.FindControl("NewPassword"), TextBox)
            Dim TextBox2 As TextBox = TryCast(editItem.FindControl("ConfirmPassword"), TextBox)

            CheckBox1.Attributes.Add("onclick", "SetVisibilityOfTextBox('" + CheckBox1.ClientID + "','" + TextBox1.ClientID + "','" + TextBox2.ClientID + "');")
        End If
Tags
Grid
Asked by
Darin
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Darin
Top achievements
Rank 1
Share this question
or