RadGrid Client Side Access to Edit Form

4 posts, 1 answers
  1. Robert
    Robert avatar
    6 posts
    Member since:
    Apr 2015

    Posted 08 May 2015 Link to this post

     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

  2. Robert
    Robert avatar
    6 posts
    Member since:
    Apr 2015

    Posted 12 May 2015 Link to this post

    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
    Your quote goes here
  3. Answer
    Angel Petrov
    Admin
    Angel Petrov avatar
    1095 posts

    Posted 13 May 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  4. Robert
    Robert avatar
    6 posts
    Member since:
    Apr 2015

    Posted 13 May 2015 in reply to Angel Petrov Link to this post

    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.

Back to Top