RadGrid Client Side Access to Edit Form

[Robert]

 Hello,

 I am trying to access some controls in the EditItemTemplate of a RadGrid EditForm.  Two of the columns are GridTemplateColumns and have RadTextBoxes in the EditItemTemplates, one column is a GridDropDownColumn.

 I have a LinkButton that launches a popup window for edit and add records.  I want to pass the contents of the controls to the form and use the results that come back to change the value in one of the RadTextBoxes.

 I can pop the window up just fine, but I am unable to retrieve the values from the edit controls to put in the querystring of the popup window url.

 I have followed every example that I can find online and I am unable to retrieve the values from the RadTextBoxes or the RadComboBox on the client.  I have tried finding the controls by their ID, as well as the column's UniqueName.  All to no avail.

 Can any one help me please?

 The grid markup is:
 (The columns that I want to capture are:  UniqueName="Program", UniqueName="LicenseNum", UniqueName="ApplicantName")

       <telerik:RadGrid ID="gvwFunds" ShowStatusBar="True" runat="server" AutoGenerateColumns="False"
         PageSize="7" AllowPaging="True" Skin="Bootstrap" Visible="False" GroupPanelPosition="Top">
         <PagerStyle Mode="NumericPages"></PagerStyle>
         <MasterTableView Name="gtvPrograms" DataKeyNames="Programs_UID" EditMode="InPlace" CommandItemDisplay="Top" InsertItemPageIndexAction="ShowItemOnCurrentPage" ClientDataKeyNames="Program, License_Num, ApplicantName">
           <CommandItemTemplate>
             &nbsp;<asp:LinkButton ID="lbAddProgram" CommandName="InitInsert" runat="server">&nbsp;&nbsp;&nbsp;&nbsp;<img style="border:0px;vertical-align:middle;" alt="" src="../../Custom/Images/AddRecord.png"/>&nbsp;&nbsp;Add New Program</asp:LinkButton>
           </CommandItemTemplate>
           <DetailTables>
             <telerik:GridTableView Name="gtvFunds" DataKeyNames="Funds_UID" Width="100%" runat="server" EditMode="InPlace" CommandItemDisplay="Top">
               <CommandItemTemplate>
                 &nbsp;<asp:LinkButton ID="lbAddFund" CommandName="InitInsert" runat="server">&nbsp;&nbsp;&nbsp;&nbsp;<img style="border:0px;vertical-align:middle;" alt="" src="../../Custom/Images/AddRecord.png"/>&nbsp;&nbsp;Add New Fund</asp:LinkButton>
               </CommandItemTemplate>
               <Columns>
                 <telerik:GridDropDownColumn UniqueName="ddlFiscalCode" ListTextField="FiscalCode" ListValueField="FiscalCode"
                   ListDataMember="FiscalCodes" DataField="FiscalCode" HeaderText="Fiscal Code" DropDownControlType="RadComboBox" />
                 <telerik:GridTemplateColumn UniqueName="Fund" HeaderText="Fund">
                   <ItemTemplate>
                   </ItemTemplate>
                   <EditItemTemplate>
                     <telerik:RadTextBox ID="txtFund" Skin="Bootstrap" runat="server" Enabled="False" ReadOnly="True">
                     </telerik:RadTextBox>
                   </EditItemTemplate>
                 </telerik:GridTemplateColumn>
                 <telerik:GridTemplateColumn UniqueName="ObjectCode" HeaderText="Object Code">
                   <ItemTemplate>
                   </ItemTemplate>
                   <EditItemTemplate>
                     <telerik:RadTextBox ID="txtObjectCode" Skin="Bootstrap" runat="server" Enabled="False" ReadOnly="True">
                     </telerik:RadTextBox>
                   </EditItemTemplate>
                 </telerik:GridTemplateColumn>
                 <telerik:GridBoundColumn HeaderText="Amount" DataField="Amount" UniqueName="Amount" DataFormatString="{0:#,##0.00}" ItemStyle-HorizontalAlign="Right" FooterStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right">
                   <FooterStyle HorizontalAlign="Right" />
                   <HeaderStyle HorizontalAlign="Right" />
                   <ItemStyle HorizontalAlign="Right" />
                 </telerik:GridBoundColumn>
                 <telerik:GridEditCommandColumn ButtonType="LinkButton" UpdateText="Update" CancelText="Cancel" EditText="Edit">
                 </telerik:GridEditCommandColumn>
               </Columns>
               <EditFormSettings>
                 <EditColumn FilterControlAltText="Filter EditCommandColumn1 column" UniqueName="EditCommandColumn1">
                 </EditColumn>
               </EditFormSettings>
             </telerik:GridTableView>
           </DetailTables>
           <Columns>
             <telerik:GridDropDownColumn UniqueName="Program" ListTextField="DESCR" ListValueField="CODE"
               ListDataMember="ProgramList" DataField="ProgramCode" HeaderText="Program" DropDownControlType="RadComboBox">
             </telerik:GridDropDownColumn>
             <telerik:GridTemplateColumn UniqueName="LicenseNum" HeaderText="License #">
               <ItemTemplate>
               </ItemTemplate>
               <EditItemTemplate>
                 <telerik:RadTextBox ID="txtLicenseNum" Skin="Bootstrap" runat="server">
                 </telerik:RadTextBox>
               </EditItemTemplate>
             </telerik:GridTemplateColumn>
             <telerik:GridTemplateColumn UniqueName="ApplicantName" HeaderText="Applicant Name">
               <ItemTemplate>
               </ItemTemplate>
               <EditItemTemplate>
                 <telerik:RadTextBox ID="txtApplicantName" Skin="Bootstrap" runat="server">
                 </telerik:RadTextBox>
               </EditItemTemplate>
             </telerik:GridTemplateColumn>
             <telerik:GridEditCommandColumn ButtonType="LinkButton" UpdateText="Update" CancelText="Cancel" EditText="Edit">
             </telerik:GridEditCommandColumn>
           </Columns>
         </MasterTableView>
       </telerik:RadGrid> 
 Thanks,

 Bob

[Robert]

I have made significant progress towards my goal.  I have been able to get the text from one of the RadTextBoxes in the EditItemTemplates and pass it to my popup window.  However, I am still unable to get the text from the selected item in the GridDropDownColumn so I can pass it to the popup window.  When I attempt to use the get_selectedItem method in my script, the following error is generated:  TypeError: Object doesn't support property or method 'get_selectedItem'.What am I doing wrong???I have created the script to gather the data and popup the window here:
(The variable _sProgramClientID is declared at the class level and has it's value set in the ItemCreated event of the grid)  Protected Sub Page_PreRender1(sender As Object, e As EventArgs) Handles Me.PreRender
    Dim sbScript As New StringBuilder    sbScript.AppendLine("    <script type=""text/javascript""> ")
    sbScript.AppendLine("      function ShowEditForm() { ")
    sbScript.AppendFormat("        var grid = $find(""{0}""); {1}", gvwFunds.ClientID, ControlChars.CrLf)
    sbScript.AppendLine("            var progB; ")
    sbScript.AppendLine("            if (grid) {")
    sbScript.AppendLine("              var EditItems = grid.get_editItems(); ")
    sbScript.AppendLine("              for (var i = 0; i < EditItems.length; i++) { ")
    sbScript.AppendLine("                var editItem = EditItems[i].get_element(); ")
    sbScript.AppendLine("                if (editItem) {")
    sbScript.AppendLine("                  var textbox1 = $telerik.findElement(editItem, ""txtLicenseNum""); ")
    sbScript.AppendFormat("                  var combobox1 = $telerik.findElement(editItem, ""{0}""); {1}", _sProgramClientID, ControlChars.CrLf)
    sbScript.AppendLine("                  if (textbox1) {")
    sbScript.AppendLine("                    try { ")
    sbScript.AppendLine("                      licB = textbox1.value;")
    sbScript.AppendLine("                    } ")
    sbScript.AppendLine("                    catch (e) { ")
    sbScript.AppendLine("                      alert(e); ")
    sbScript.AppendLine("                    } ")
    sbScript.AppendLine("                  } ")
    sbScript.AppendLine("                  if (combobox1) {")
    sbScript.AppendLine("                    try { ")
    sbScript.AppendLine("                      progB = combobox1.get_selectedItem().get_value(); ")
    sbScript.AppendLine("                    } ")
    sbScript.AppendLine("                    catch (e) { ")
    sbScript.AppendLine("                      alert(e); ")
    sbScript.AppendLine("                    } ")
    sbScript.AppendLine("                  } ")
    sbScript.AppendLine("                } ")
    sbScript.AppendLine("              } ")
    sbScript.AppendLine("            } ")
    sbScript.AppendLine("            var wnd = window.radopen(""ApplicantNameList.aspx?prog="" + progB + ""&lic="" + licB, ""RadWindow1""); ")
    sbScript.AppendLine("            wnd.set_modal(true); ")
    sbScript.AppendLine("            wnd.setSize(530, 280); ")
    sbScript.AppendLine("            wnd.add_pageLoad(function(){wnd.set_status(""  ""); }); ")
    sbScript.AppendLine("            wnd.set_behaviors(Telerik.Web.UI.WindowBehaviors.Move + Telerik.Web.UI.WindowBehaviors.Close); ")
    sbScript.AppendLine("            return false; ")
    sbScript.AppendLine("          } ")
    sbScript.AppendLine("    </script> ")    RadCodeBlock1.Controls.Add(New LiteralControl(sbScript.ToString()))
  End Sub
The ItemCreated event for the grid is here:  Private Sub gvwFunds_ItemCreated(sender As Object, e As GridItemEventArgs) Handles gvwFunds.ItemCreated
    If TypeOf e.Item Is GridDataItem AndAlso e.Item.IsInEditMode Then
      Select Case e.Item.OwnerTableView.Name
        Case "gtvPrograms" 'Master Table
          Dim oDataItem As GridDataItem = CType(e.Item, GridDataItem)
          Dim cboPrograms As RadComboBox = TryCast(oDataItem("Program").Controls(0), RadComboBox)
          Dim txtLicenseNum As RadTextBox = DirectCast(oDataItem("LicenseNum").FindControl("txtLicenseNum"), RadTextBox)
          'Dim oLinkButton As LinkButton = New LinkButton
          Dim oLink As HyperLink = New HyperLink          With cboPrograms
            .Focus()
            _sProgramClientID = .ClientID
          End With          With oLink
            .Text = "Look Up Name"
            .Attributes("href") = "javascript:void(0);"
            .Attributes("onclick") = "return ShowEditForm();"
          End With          oDataItem("ApplicantName").Controls.Add(New LiteralControl("<br />"))    '"&nbsp;&nbsp;&nbsp;"))
          oDataItem("ApplicantName").Controls.Add(oLink)        Case "gtvFunds" 'Detail Table
          'Do nothing
         
      End Select
    End If
  End Sub
Any assistance would be greatly appreciated.Thanks,Bob[quote]Your quote goes here[/quote]

[Angel Petrov]

Hi,

For obtaining a reference to the combo drop down which is rendered as an editor for the GridDropDownColumn one should use findControl instead of findElement. The first method should be used when searching for control that has a client-side object related to them(IScriptControls) whereas the second for normal ASP.NET control. Considering the aforementioned you should be able to locate the combo by modifying the code as demonstrated below.

JavaScript:

var combobox1 = $telerik.findControl(editItem, "RCB_ddlFiscalCode");

One other thing which I want to point out. The grid has built-in popup editing that can be used with both a custom control/template of with the default edit form that it will render. In both cases when the built-in editing is used the editor values will get automatically extracted from the edit form and passed to the grid without the need manual coding. Considering this I recommend examining this demo and this article.

Regards,
Angel Petrov
Telerik

[Robert]

Thank you Angel!!!

 

That did the trick.  When I had tried to use the findControl method, I had used the wrong ID.

 

Again, many thanks.