[Solved] Getting the CheckBox ClientID

[Lakshman Venkat]

I have a RadGrid with two columns and I am using FormTemplate for editing (<EditFormSettings EditFormType="Template">) I have a CheckBox called chkIsAgentInformationAvailable. I want to add a following Javascript function to this checkbox. How do I do that
here is the function 

function chkIsAgentInformationAvailable_Clicked()
{
     var clicked = $('#<%=chkIsPurchasedThroughLender.ClientID%>:checked').val();
     if (clicked == 'on')
     {
          $('#<%=trAgentDetails.ClientID %>').show(); 
     } 
     else
     {
          $('#<%=trAgentDetails.ClientID %>').hide(); 
     }
}

Would really appreciate if you could tell me how to do that.

Thanks in Advance
Lakshman

[Shinu]

Hi Lakshman,

I am not quite sure about where you placed the checkbox 'chkIsAgentInformationAvailable'. You can attach the javascript function to chekbox as shown below.

ASPX::

<asp:CheckBox ID="CheckBox1" runat="server" onclick="getValue(this);" />

JavaScript:

<script type="text/javascript">
    function getValue(checkbox) {
        alert(checkbox.checked); // checkbox is client object which invoked the event
    }
</script>

-Shinu.

[Lakshman Venkat]

Hi Shinu,

Thanks for the quick response. Here is what I am trying to accomplish. Please see the code below and the 'chkIsAgentInformationAvailable' is highlighted. Whe the user clicks on the checkbox I need to show the 

 

 

the tr named "trAgentDetails" and vice-versa.

 

<telerik:RadGrid    ID="rgPICompany"
                                    runat="server"
                                    Width="98%"
                                    OnItemCommand="rgPICompany_ItemCommand"
                                    OnNeedDataSource="rgPICompany_NeedDataSource"
                                    OnItemDataBound="rgPICompany_ItemDataBound"
                                    AllowAutomaticDeletes="True"
                                    AllowAutomaticUpdates="True"
                                    AllowAutomaticInserts="true"
                                    AllowPaging="True"
                                    AllowSorting="True"
                                    AutoGenerateColumns="False"
                                    EnableAJAX="True"
                                    GridLines="Horizontal"  
                                    EnableAJAXLoadingTemplate="False"
                                    LoadingTemplateTransparency="0"
                                    PageSize="3">
                    <GroupingSettings CaseSensitive="false" />
                <ClientSettings>
                    <Scrolling AllowScroll="False" UseStaticHeaders="False" />
                        <Selecting AllowRowSelect="True" />
                </ClientSettings>
                <MasterTableView    Width="100%"
                                    GridLines="Horizontal"
                                    PageSize="3"
                                    AutoGenerateColumns="False"
                                    DataKeyNames="Key"
                                    EditMode="EditForms"
                                    CommandItemDisplay="TopAndBottom">
                    <CommandItemTemplate>
                        <table>
                            <tr>
                                <td width="30%">
                                    <asp:LinkButton ID="btnAdd" Text="Click to add a new" CommandName="InitInsert" runat="server" />
                                </td>
                            </tr>
                        </table>
                    </CommandItemTemplate>
                    <Columns>
                        <telerik:GridEditCommandColumn  ButtonType="ImageButton"
                                                        UpdateImageUrl="../App_Themes/Default/DataEditingImages/Edit.gif"
                                                        CancelImageUrl="../App_Themes/Default/DataEditingImages/Cancel.gif">
                        </telerik:GridEditCommandColumn>
                        <telerik:GridBoundColumn    DataField="Value.CompanyID" Groupable="False" HeaderText="PropertyInsuranceCompanyID"
                                                    UniqueName="CompanyIDColumn" ReadOnly="True" Visible="false">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn    DataField="Value.CompanyName" HeaderText="Company Name"
                                                    SortExpression="CompanyName" UniqueName="CompanyName" Visible="true">
                        </telerik:GridBoundColumn>
                       
                        <telerik:GridBoundColumn    DataField="Value.AgentName" HeaderText="Agent Name"
                                                    SortExpression="AgentName" UniqueName="AgentName" Visible="true">
                        </telerik:GridBoundColumn>
                       
                        <telerik:GridButtonColumn   ConfirmText="Are you sure you want to Delete this Information?"
                                                    ImageUrl="../App_Themes/Default/DataEditingImages/Delete.gif"
                                                    ButtonType="ImageButton"
                                                    CommandName="Delete"
                                                    Text="Delete"
                                                    UniqueName="DeleteColumn">
                                <HeaderStyle Width="20px" />
                        </telerik:GridButtonColumn>
                    </Columns>
                    <EditFormSettings EditFormType="Template">
                        <FormTemplate>
                            <table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="0" rules="none" style="border-collapse: collapse; background: white;">
                                <tr>
                                    <td colspan="2" style="font-size: small">
                                        <b>Property Insurance Company Details</b>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <table>
                                            <tr>
                                                <td/>
                                                <td/>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <asp:Label runat="server" ID="lblCompnayName" Text="Insurance Company Name" />
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="txtCompanyName" runat="server" Text="" />
                                                </td>
                                            </tr>

 

                                           <tr>

 

 

                                                <td>

 

 

                                                        <asp:Label runat="server" ID="lblIsAgentInformationAvailable" 
                                                                                                   Text="Is Insurance Agent Information Available"/>

 

 

                                             </td>

 

 

                                            <td>

 

 

                                                <asp:CheckBox runat="server" ID="chkIsAgentInformationAvailable" >

 

 

                                            </td>

 

 

                                        </tr>

 

                                            <tr id="trAgentDetails" runat="server" style="display:none">
                                                <td>
                                                    <table>
                                                        <tr>
                                                            <td>
                                                                <asp:Label runat="server" ID="lblAgentName" Text="Insurance Agent Name"/>
                                                            </td>
                                                            <td>
                                                                <asp:TextBox ID="txtAgentName" runat="server" Text=""/>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>                                                    
                                            </tr>                                                                           
                                            <tr>
                                                <td align="right" colspan="2">
                                                    <asp:Button ID="btnUpdate"
                                                                runat="server"
                                                                Text='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                                                CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'>
                                                    </asp:Button>&nbsp;
                                                    <asp:Button ID="btnCancel"
                                                                runat="server"
                                                                Text="Cancel" 
                                                                CausesValidation="False"
                                                                CommandName="Cancel">
                                                    </asp:Button>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>                                                                             
                            </table>                                
                        </FormTemplate>
                    </EditFormSettings>
                </MasterTableView>
            </telerik:RadGrid>

this is my javascript funtion I am trying to execute when the user clicks the checkbox

 function chkIsAgentInformationAvailable_Clicked()
        {
            var clicked = $('#<%=chkIsPurchasedThroughLender.ClientID%>:checked').val();

 

 

            if (clicked == 'on')
            {
                $('#<%=trAgentDetails.ClientID %>').show();

 

 

            }
            else
            {
                $("#<%=trAgentDetails.ClientID %>").hide();
            }
        }

Basically I get error on the highlighed portions since it is not able to find the chkIsPurchasedThroughLender as well as trAgentDetails
So my question how can I execute this javascript function when the user clicks on the checkbox and hide/show the trAgentDetails based on the user click.

Thanks In Advance
Lakshman

[Lakshman Venkat]

Hi Shinu/Anybody from Telerik,

Did you guys get a chance to look at my problem ? If there is an answer I would really appreciate it as we are reaching our deadline. I do use your product.

Thanks in Advance
Lakshman

[Sebastian]

Hello Lakshman,

I think that the information/sample from this code library thread will help you access the checkbox and the table row in the FormTemplate custom edit form and operate with them. You will need to adopt the code for your particular configuration.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.