handle check box oncheckedchange event inside a radgridview client side.

[Aneesh]

Hi,


  I'm using read grid to bind records, its bing record from datatable, from codebehind. In this rad gridview i'm using rad combo box, check box and aspx label controls etc. So I want to handle the check boxes on selection changed event , while selecting the combox box (inside rad event) selection changed event I want to get value from that combox and  label (also in rad grid) and do some calculations and again need to display in that label. Currently I 'm not getting value from label in that row. . Here I including the code, I want to use code only in client side not server side to do the events of the drop downs in rad grid.

 Please help ....


   <tr><td >
    <asp:UpdatePanel runat="server" id="UpdatePanel">
    <ContentTemplate>
     <telerik:radgrid ID="grdFinalizedInvoice" runat="server"  Width="100%" Height="200px"
            AutoGenerateColumns ="False" AllowPaging="True"    ondeletecommand="grdFinalizedInvoice_DeleteCommand"
            AllowSorting="True" CellSpacing="0" Skin="Office2007" GridLines="None" DataKeyNames="ID" 
           >
            <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
        <MasterTableView EnableColumnsViewState ="false" TableLayout ="Fixed"  >
<CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
 
<RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>


<ExpandCollapseColumn Visible="True" UniqueName="DeleteItem" FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>
        <Columns>
        <telerik:gridclientdeletecolumn ConfirmText="Are you sure you want to delete this row?" CommandName ="Delete"
                        HeaderStyle-Width="25px" ButtonType="ImageButton" />
                       
     <telerik:gridtemplatecolumn  UniqueName="tmpxfer" HeaderText ="Job Number" 
                DataField ="ExchCompleteDate" DataType="System.String" >
                       <HeaderStyle Width ="50px"  />
                       <ItemStyle  />
                        <ItemTemplate>
                       
                        <%# PrepareJobNumber()%>  
                       
                        </ItemTemplate>
                    </telerik:gridtemplatecolumn>


          <telerik:gridtemplatecolumn  UniqueName="tmpToName" HeaderText ="Technique"  >
                  <HeaderStyle Width ="105px" />
                         <ItemStyle />
                         <ItemTemplate>
                             
                          
                             <telerik:radcombobox ID="ddlTechnique" runat="server"  Width="90px" Height="150" 
                                        DropDownWidth="130px" ShowDropDownOnTextboxClick="true" 
                                   MarkFirstMatch="true"  AutoPostBack ="true"  Skin="Vista"  
                                        ShowToggleImage="false" AppendDataBoundItems="true"   DataSource ="<%# BindDropDownTechnique() %>"
                                        DataValueField="TechniqueID" DataTextField="Description" SelectedValue='<%# Bind("TechniqueID") %>'
                                        AllowCustomText="false" 
                                   OnSelectedIndexChanged="ddlTechnique_OnSelectedIndexChanged" > 
                                    <Items> 
                                        <telerik:radcomboboxitem Text="" /> 
                                    </Items> 
                                </telerik:radcombobox> 
                                <asp:HiddenField ID="hdnGridTechniqueID" runat ="server" Value ='<%# Bind("TechniqueID") %>' />
                        
                         </ItemTemplate>
                    </telerik:gridtemplatecolumn>
                    <telerik:gridtemplatecolumn DataField="InstrumentGroup" 
                HeaderStyle-Width ="100px" HeaderText="InstrumentGroup" 
                UniqueName="InstrumentGroup">
                       <HeaderStyle Width ="100px" />
                        <ItemTemplate>
                            <telerik:radcombobox ID="rcbInstrumentGroup" 
                                runat="server"  DropDownWidth="130px" Width="85px" 
                                ShowDropDownOnTextboxClick="true" MarkFirstMatch="true" 
                                AutoPostBack="true" AppendDataBoundItems="true"  ShowToggleImage="false"
                                Skin="Vista"  Text='<%# GetInstrumentGroupID(Convert.ToString(DataBinder.Eval(Container.DataItem, "InstrumentGroupDescription"))) %>'
                                DataTextField="Description"   OnSelectedIndexChanged="rcbInstrumentGroup_OnSelectedIndexChanged"
                                DataValueField="InstrumentGroupID"
                              >  
                                                       
                            </telerik:radcombobox>
                        </ItemTemplate>
                    </telerik:gridtemplatecolumn>

                     <telerik:GridTemplateColumn DataField="Instrument" HeaderStyle-Width ="100px" HeaderText="Instrument" UniqueName="Instrument">
                      
                       <HeaderStyle Width ="100px" />
                        <ItemTemplate>
                      <asp:HiddenField ID="hdnInstruemtGrpID" runat ="server" Value ='<%# Bind("InstrumentGroupID") %>' />
                            <telerik:RadComboBox ID="rcbInstrument"   
                                runat="server"  DropDownWidth="130px" Width="85px"  MarkFirstMatch="true" 
                                AutoPostBack="true" ShowToggleImage="false"         
                                Skin="Vista" AppendDataBoundItems="true"                                 
                                DataTextField="Description" ShowDropDownOnTextboxClick="true"  Text='<%# GetInstrumentGroupID(Convert.ToString(DataBinder.Eval(Container.DataItem, "InstrumentDescription"))) %>'
                                DataValueField="InstrumentID"  
                              >     
                                                      
                            </telerik:RadComboBox>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>


                     <telerik:GridTemplateColumn   UniqueName="tmpGridDesc"  HeaderStyle-Width ="300px"  DataType ="System.String" >
                        <HeaderTemplate>
                       <label id="lb1" style ="text-align:center;">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Description <br /> <font size=1>(check box to add text that will replace the standard description)</font></label>
                    </HeaderTemplate>
                       <ItemStyle  />
                        <ItemTemplate>
                      
                        <telerik:RadComboBox ID="cmbGridDescription"  ClientIDMode ="Static" runat="server" Width="250px"  DataTextField="Description" 
                         DataSource ='<%# BindDropDownPriceListDesc(Convert.ToString(DataBinder.Eval(Container.DataItem, "TechniqueID"))) %>'  >
                        <HeaderTemplate>
                            <ul>
                                <li >Description &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</li>
                                <li >Rate</li>
                            </ul>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <ul>
                                <li>
                                    <%# DataBinder.Eval(Container.DataItem, "Description")%></li>
                                <li>
                                    <%# DataBinder.Eval(Container.DataItem, "Amount")%></li>
                            </ul>
                        </ItemTemplate>
                        </telerik:RadComboBox>
                        <asp:CheckBox ID="chkShowDesc" runat ="server"   Checked= "false" />
                 
                        <asp:TextBox ID="txtInternalNotes" rows=2 cols=160  Width="240px" TextMode=MultiLine Visible ="false" runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                      <telerik:GridTemplateColumn  HeaderStyle-Width ="95px"  UniqueName="tmpOccured1"   DataType ="System.String" >
                       <HeaderTemplate >
                       <label id="lb" style ="text-align:center;">&nbsp&nbsp&nbsp Units</label>                       
                        <a id="linkLookup" rel="tooltip" title="Hover to see Lookup" >(Lookup)</a>
                        
                    
                       </HeaderTemplate>
                       <ItemStyle  />
                        <ItemTemplate>
                         <%# PrepareUnitsTextBoxLineItems(Eval("Quantity"))%> 
                         <asp:DropDownList ID="ddl_s" runat="server" SelectedValue='<%# GetChargeUnitsID(Convert.ToString(DataBinder.Eval(Container.DataItem, "ChargeUnitsID"))) %>' >
                          <asp:ListItem Text="U" Value="U"></asp:ListItem>
                          <asp:ListItem Text="H" Value="H"></asp:ListItem>
                          <asp:ListItem Text="S" Value="S"></asp:ListItem>
                          <asp:ListItem Text="M" Value="M"></asp:ListItem>
                          <asp:ListItem Text="I" Value="I"></asp:ListItem>
                          <asp:ListItem Text="D" Value="D"></asp:ListItem>
                          <asp:ListItem Text="E" Value="E"></asp:ListItem>
                          <asp:ListItem Text="L" Value="L"></asp:ListItem>
                          <asp:ListItem Text="B" Value="B"></asp:ListItem>
                          <asp:ListItem Text="C" Value="C"></asp:ListItem>
                          <asp:ListItem Text="V" Value="V"></asp:ListItem>
                          <asp:ListItem Text="A" Value="A"></asp:ListItem>
                          <asp:ListItem Text="P" Value="P"></asp:ListItem>
                          <asp:ListItem Text="R" Value="R"></asp:ListItem>
                          <asp:ListItem Text="X" Value="X"></asp:ListItem>
                          <asp:ListItem Text="T" Value="T"></asp:ListItem>
                        </asp:DropDownList>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn  UniqueName="tmpToName2" HeaderStyle-Width ="50px"   >         
                        <HeaderTemplate >
                        <label id="lblHeadRate" style ="text-align:center;">&nbsp Rate <br />&nbsp USD</label>
                       </HeaderTemplate>
                         <ItemStyle />
                        <ItemTemplate>
                           <%# PrepareRateTextBoxLineItems( Eval("Rate"))%> 
                       
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                       <telerik:GridTemplateColumn   UniqueName="tmpOccured3" HeaderStyle-Width ="80px"  HeaderText ="% RTA"  DataType ="System.String" >
                       <ItemStyle  />
                        <ItemTemplate>
                      
                        <telerik:RadComboBox ID ="ddl_Percentage" ClientIDMode ="Static" runat ="server" Width="65px" onclientselectedindexchanging="AllowSelectionChange" >
                          <Items >
                             <telerik:RadComboBoxItem Text ="none" Value= "1" runat ="server"  />
                             <telerik:RadComboBoxItem Text ="20%" Value ="20" runat ="server" />
                             <telerik:RadComboBoxItem Text ="25%" Value ="25" runat ="server" />
                             <telerik:RadComboBoxItem Text ="30%" Value ="30" runat ="server" />
                             <telerik:RadComboBoxItem Text ="35%" Value ="35" runat ="server" />
                             <telerik:RadComboBoxItem Text ="40%" Value ="40" runat ="server" />
                             <telerik:RadComboBoxItem Text ="50%" Value ="50" runat ="server"/>
                             <telerik:RadComboBoxItem Text ="75%" Value ="75" runat ="server"/>
                     
                             <telerik:RadComboBoxItem Text ="100%" Value ="100" runat ="server" />
                             <telerik:RadComboBoxItem Text ="200%" Value ="200" runat ="server"/>
                             <telerik:RadComboBoxItem Text ="300%" Value ="300" runat ="server"/>
                          </Items>
                        </telerik:RadComboBox>
                       
                      
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>   
                       <telerik:GridTemplateColumn  UniqueName="tmpOccured4" HeaderText ="% Discount (incl. RTA)"   DataType ="System.String" >
                       <HeaderStyle Width ="65px" />
                       <ItemStyle  />
                        <ItemTemplate>
                        
                         <%# PreparePerDiscountTextBoxLineItems(Eval("PercentDiscount100"))%> 
                        </ItemTemplate>
                        
                    </telerik:GridTemplateColumn>


                    <telerik:GridTemplateColumn UniqueName="EntendedPrice" HeaderText ="Extended Price" HeaderStyle-Width ="60px"  DataType ="System.String" >
                       <HeaderStyle />
                       <ItemStyle  />
                        <ItemTemplate>
                         <asp:Label id="lblExtdPrice" runat ="server" ClientIDMode ="Static" Text='<%# ExtendedPrice(Eval("DBStatus").ToString(), Eval("Quantity"), Eval("Rate"), Eval("PercentRTA"), Eval("PercentDiscount"), Eval("DiscountAppliesToRTA"))%>'></asp:Label>
                        <asp:HiddenField ID="hdnExtendedPriceItem" runat ="server" ClientIDMode ="Static" Value ='<%# ExtendedPrice(Eval("DBStatus").ToString(), Eval("Quantity"), Eval("Rate"), Eval("PercentRTA"), Eval("PercentDiscount"), Eval("DiscountAppliesToRTA"))%>' />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                     
                   
                      <telerik:GridTemplateColumn UniqueName="tmpJCSiteID"  HeaderText ="Site"  DataField ="JCSiteID" HeaderStyle-Width ="30px" >
                          <ItemStyle />
                        <ItemTemplate>
                         <%# PrepareColumnText(Eval("DBStatus").ToString(), Eval("JCSiteID").ToString())%> 
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                      <telerik:GridTemplateColumn UniqueName="tmpRevenueCode"  HeaderText ="Revenue Code & Cost Center"  DataField ="JobNumber" HeaderStyle-Width ="135px" >
                          <ItemStyle />
                        <ItemTemplate>
                        <asp:Label runat ="server" ID="lblRevenueCost"></asp:Label>
                         <%# PrepareHiddenItems(Eval("DBStatus").ToString(), "EstimateAccountingCode", Eval("AccountingCode").ToString())%>   
                         <%# PrepareHiddenItems(Eval("DBStatus").ToString(), "EstimateCostCenterCode", Eval("CostCenterCode").ToString())%>   
                         <%--<%# PrepareRevenueCost(Eval("DBStatus").ToString(), Eval("AccountingCode").ToString(), Eval("CostCenterCode").ToString())%> --%>
                         <%# PrepareSiteAccountingCodeLabelBox()%> 
                         <%# PrepareItemAccountingCodeTextBox(Eval("AccountingCode"))%> 
                         <%# PrepareSiteAccountDivisionLabelBox()%> 
                         <%# PrepareCostCenterCodeTextBox(Eval("CostCenterCode"))%> 
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
      </Columns>
     
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
</EditFormSettings>
    </MasterTableView>
            <HeaderStyle BackColor="Silver" Font-Bold="True" Font-Names="Calibri" 
                Font-Size="Larger" />


<FilterMenu  EnableImageSprites="False"></FilterMenu>
<ClientSettings AllowDragToGroup="True">
<ClientEvents OnRowSelected ="RowSelected"/> 
                <Selecting AllowRowSelect="True"></Selecting>
                <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="275px"></Scrolling>
                <ClientMessages DragToGroupOrReorder="Drag to group" />
            </ClientSettings>
        </telerik:RadGrid>
        </ContentTemplate>
       </asp:UpdatePanel>
        </td></tr>

[Jayesh Goyani]

Hello,

Please check below link for reference/demo.
Access Another control which was in same level or in row
How to access the control from itemtemplate in Radgrid on client side
Access RadGrid on client


For checkbox:

function myclick(obj) {

               var senderId = obj.id;
// for remaining logic please check above links.

           }

<telerik:GridTemplateColumn>
                       <ItemTemplate>
                           <asp:CheckBox ID="CheckBox1" onclick="myclick(this);" runat="server" />
                       </ItemTemplate>
                   </telerik:GridTemplateColumn>

Thanks,
Jayesh Goyani

[Aneesh]

Hi Jayesh,

        Thanks for your comments. But I want, when  myclick() method  calling from checkbox  selection changes, need to access another textbox control and visible should make to false for the text box .



Please help.

[Jayesh Goyani]

Hello,

Try with below code snippet.

function myclick(obj) {
               var senderId = obj.id;
               var mytxt = $("#" + senderId.replace("chkShowDesc", "txtInternalNotes")).get(0);
               if (obj.checked == true) {
                   mytxt.value = "jayesh";
               }
               else {
                   mytxt.value = "";
               }
           }

<telerik:GridTemplateColumn>
                       <ItemTemplate>
                           <asp:CheckBox onclick="myclick(this);" ID="chkShowDesc" runat="server" Checked="false" />
                           <asp:TextBox ID="txtInternalNotes" Rows="2" cols="160" Width="240px" TextMode="MultiLine"
                               Style="display: none;" runat="server"></asp:TextBox>
                       </ItemTemplate>
                   </telerik:GridTemplateColumn>

Please used below style inplace of visible=false.

Style="display: none;"

Visible ="false" control are not rendered at client side / in browser.

so we are not able to access by js.

Thanks,
Jayesh Goyani