How to access the RadGrid controls in javascript

3 posts, 1 answers
  1. Satbir
    Satbir avatar
    6 posts
    Member since:
    May 2013

    Posted 04 Jun 2013 Link to this post

    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
  2. Answer
    Andrey
    Admin
    Andrey avatar
    836 posts

    Posted 06 Jun 2013 Link to this post

    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

    Consider using RadControls for ASP.NET AJAX (built on top of the ASP.NET AJAX framework) as a replacement for the Telerik ASP.NET Classic controls, See the product support lifecycle here.


  3. Satbir
    Satbir avatar
    6 posts
    Member since:
    May 2013

    Posted 10 Jun 2013 Link to this post

    Hey Andrey,

    Thank you so much. It worked :)

    Thanks,
    Satbir
Back to Top