How to access the RadGrid controls in javascript

[Satbir]

Hi,

I have a scenario where in edit mode when user selects a particular value of control radCmbAxis ,checkbox cbIsSameAxis should be disabled and i want to implement it through javascript. Following is my javascript function and grid.

I am unable to figure how to access the checkbox through this method and make it disable. 

function OnClientSelectedIndexChangedEventHandler(sender, eventArgs) {
                 var selectedAxis=sender.get_selectedItem().get_text();

                 // how to access the checkbox control here???????

        }

<telerik:RadGrid ID="rgXAxisDetails" Skin="Windows7" GridLines="Both" runat="server"
               AutoGenerateColumns="False" SelectedItemStyle-BackColor="blue" OnUpdateCommand="rgXAxisDetails_UpdateCommand"
               OnItemCommand="rgXAxisDetails_ItemCommand" OnEditCommand="rgXAxisDetails_EditCommand"
               OnItemDataBound="rgXAxisDetails_ItemDataBound" OnNeedDataSource="rgXAxisDetails_NeedDataSource" OnInsertCommand="rgXAxisDetails_InsertCommand" OnItemCreated="rgXAxisDetails_ItemCreated">
               <MasterTableView InsertItemDisplay="Bottom" HorizontalAlign="NotSet" EditMode="InPlace"
                   TableLayout="Fixed" CommandItemDisplay="Bottom">
                   <Columns>
                       <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditColumn">
                           <ItemStyle CssClass="MyImageButton" />
                       </telerik:GridEditCommandColumn>
                       <telerik:GridTemplateColumn UniqueName="tcColumnName" HeaderText="Column Name">
                           <ItemTemplate>
                               <asp:Label ID="lblColumnName" runat="server"></asp:Label>
                           </ItemTemplate>
                           <EditItemTemplate>
                               <telerik:RadComboBox ID="radCmbColumnName" runat="server" >
                               </telerik:RadComboBox>
                               <asp:RequiredFieldValidator ID="rfvColName" runat="server" ErrorMessage="*" ControlToValidate="radCmbColumnName" InitialValue="--Select--"></asp:RequiredFieldValidator>
                           </EditItemTemplate>
                       </telerik:GridTemplateColumn>
                       <telerik:GridTemplateColumn UniqueName="tcAxis" HeaderText="Axis">
                           <ItemTemplate>
                               <asp:Label ID="lblAxis" runat="server"></asp:Label>
                           </ItemTemplate>
                           <EditItemTemplate>
                               <telerik:RadComboBox ID="radCmbAxis" runat="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChangedEventHandler">
                                   <Items>
                                       <telerik:RadComboBoxItem Text="--Select--" Value="--Select--" />
                                       <telerik:RadComboBoxItem Text="Primary Top" Value="Primary Top" />
                                       <telerik:RadComboBoxItem Text="Primary Bottom" Value="Primary Bottom" />
                                       <telerik:RadComboBoxItem Text="Secondary Top" Value="Secondary Top" />
                                       <telerik:RadComboBoxItem Text="Secondary Bottom" Value="Secondary Bottom" />
                                   </Items>
                               </telerik:RadComboBox>
                               <asp:RequiredFieldValidator ID="rfvAxis" runat="server" ErrorMessage="*" ControlToValidate="radCmbAxis" InitialValue="--Select--"></asp:RequiredFieldValidator>
                           </EditItemTemplate>
                       </telerik:GridTemplateColumn>
                       <telerik:GridTemplateColumn UniqueName="tcIsSameAxis" HeaderText="Is Same Axis">
                           <ItemTemplate>
                               <asp:CheckBox ID="cbIsSameAxisDisplay" runat="server" Enabled="false" />
                           </ItemTemplate>
                           <EditItemTemplate>
                               <asp:CheckBox ID="cbIsSameAxis" runat="server" />
                           </EditItemTemplate>
                       </telerik:GridTemplateColumn>
                   </Columns>
                     <CommandItemTemplate>
                       <table class="rgXAxisCommandTable">
                           <tr>
                               <td align="left">
                                   <asp:Button ID="AddNewRecordButton" CommandName="InitInsert" runat="server" CssClass="rgAdd" />
                                   <asp:LinkButton ID="lnkAddNewRow" runat="server" CommandName="InitInsert" Text="Add new record"></asp:LinkButton>

                               </td>
                           </tr>
                       </table>
                   </CommandItemTemplate>

                   <PagerStyle AlwaysVisible="True" />
                   <HeaderStyle Font-Bold="True" BackColor="#BDBDBD" ForeColor="Black" />
               </MasterTableView>
               <SelectedItemStyle BackColor="Blue" />

           </telerik:RadGrid>

Thanks in advance.

Satbir

[Andrey]

Hello,

Thank you for contacting us.

In order to achieve your goal you could use the ID of the ComboBox control and replace the CheckBox server ID in the ComboBox ClientID, this will give you the ClientID of the CheckBox control. Once you have the client ID you could find the control using $get() function:

function OnClientSelectedIndexChangedEventHandler(sender, eventArgs) {
         var selectedAxis=sender.get_selectedItem().get_text();
         var comboID = sender.get_id();
         //Since both the checkbox and the ComboBox controls are in the same row
         //they have similar ClientIDs...
         var checkBoxID = comboID.replace("radCmbAxis", "cbIsSameAxis");
         var checkBox = $get(checkBoxID);
}

Give this approach a try and you should not have problems.

Regards,
Andrey
Telerik

[Satbir]

Hey Andrey,

Thank you so much. It worked :)

Thanks,
Satbir