How to find button control in form template using javascript?

7 posts, 1 answers
  1. Cem
    Cem avatar
    2 posts
    Member since:
    May 2012

    Posted 02 May 2012 Link to this post

    Hi,

    Can anyone help me how to find button control in form template using javascript?

    I have tried  $('[id$="btnUpdate"]') and  $telerik.$( $find("<%=RadGrid1.ClientID %>").get_masterTableView().get_element()).find('input[id*="txtUsername"]')[0]; but nothing changed.

     $(document).ready(function () {
                    $('[id$="btnUpdate"]').click(function (e) {
                        var grid = $find("<%=RadGrid1.ClientID %>");
                        var MasterTable = grid.get_masterTableView();
                        var row = MasterTable.get_dataItems()[0];
                        var txtUsername = $telerik.$(MasterTable.get_element()).find('input[id*="txtUsername"]')[0];

                        $.ajax({
                            url: "Handler1.ashx",
                            data: { 'username': txtUsername },
                            type: "POST",
                            async: false,
                            cache: false,
                            success: function (response) {
                                if (response != 0) {
                                    alert('this user already exist!');
                                    return false;
                                }
                                else {
                                    return true;
                                }
                            },
                            error: function () {
                                alert('Error!');
                                return false; 
                            }
                        });
                     }); 
                });
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 02 May 2012 Link to this post

    Hello Cem,

    Try the following code to access controls in FormTemplate.
    C#:
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
     if ((e.Item is GridEditFormItem && e.Item.IsInEditMode))
     {
       GridEditFormItem item = (GridEditFormItem)e.Item;
       Button btn = (Button)item.FindControl("btnUpdate");
       RadGrid1.Controls.Add(new LiteralControl("<script type='text/javascript'>window['btn'] = '" + btn.ClientID + "';</script>"));
     }
    }
    JS:
    function OnClientClick()
    {
     var btn = document.getElementById(window['btn']);
    }

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Cem
    Cem avatar
    2 posts
    Member since:
    May 2012

    Posted 02 May 2012 Link to this post

    Hi Princy,


    Unfortunately this way doesn't work. I added ItemCreated method to my code but it seems window['btn'] doesn't created.




    For example:


     $(document).ready(function () {
                    $('#' + window['btn']).click(function (e) {
                        alert('1');
    });
    });


    It doesn't react.
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 03 May 2012 Link to this post

    Hello Cem,

    I have created a sample code based on your scenario. I have directly attached the OnClientClick event to the button and access the controls in FormTemplate as shown below.
    aspx:
    <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" AutoGenerateEditColumn="true" DataSourceID="SqlDataSource1" OnItemCreated="RadGrid1_ItemCreated">
      <MasterTableView CommandItemDisplay="Top" DataKeyNames="EmployeeID">
        <Columns>
          <telerik:GridBoundColumn DataField="EmployeeID" UniqueName="EmployeeID" HeaderText="EmployeeID"></telerik:GridBoundColumn>
       </Columns>
       <EditFormSettings EditFormType="Template">
          <FormTemplate>
              <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
              <asp:Button ID="btnUpdate" runat="server" Text="Button" OnClientClick="UpdateClick();" />
          </FormTemplate>
      </EditFormSettings>
     </MasterTableView>
    </telerik:RadGrid>
    C#:
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
      if ((e.Item is GridEditFormItem && e.Item.IsInEditMode))
      {
        GridEditFormItem item = (GridEditFormItem)e.Item;
        Button btn = (Button)item.FindControl("btnUpdate");
        TextBox txtBox = (TextBox)item.FindControl("TextBox1");
        RadGrid1.Controls.Add(new LiteralControl("<script type='text/javascript'>window['txtBox'] = '" + txtBox.ClientID + "';</script>"));
      }
    }

    JS:
    <script type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></script>
    <script type="text/javascript">
        function UpdateClick() {
            $(document).ready(function () {
                var txtBox = document.getElementById(window['txtBox']);
                alert(txtBox.value);
            });
        }
    </script>

    Thanks,
    Princy.
  6. Chrisbarm
    Chrisbarm avatar
    5 posts
    Member since:
    Nov 2008

    Posted 21 Jul 2015 Link to this post

    Princy, 

    I haver implemented the above code and it works really well in my project and allows me to achieve my goal.  

    However, when I add a RadAjaxManger to the page I can no longer find my button using JavaScript to retrieve the value and I receive the error in the console "Uncaught TypeError: Cannot read property 'value' of null"

     Any help would be appreciated.

    Regards 

    Chris

     

     

     

  7. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 23 Jul 2015 Link to this post

    Hello Chrisbarm,

    With enabled AJAX you should use the approach documented in the following help article for executing script after an AJAX request:
    However, I would recommend that you use the $telerik.findElement method from the Telerik Static Client Library instead:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function UpdateClick() {
                var grid = $find("<%=RadGrid1.ClientID%>");
                var txtBox = $telerik.findElement(grid.get_element(), "TextBox1");
                alert(txtBox.value);
            }
        </script>
    </telerik:RadCodeBlock>
     
    <telerik:RadAjaxPanel runat="server">
        <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" AutoGenerateEditColumn="true" OnNeedDataSource="RadGrid1_NeedDataSource">
            <MasterTableView CommandItemDisplay="Top">
                <Columns>
                    <telerik:GridBoundColumn DataField="EmployeeID" UniqueName="EmployeeID" HeaderText="EmployeeID"></telerik:GridBoundColumn>
                </Columns>
                <EditFormSettings EditFormType="Template">
                    <FormTemplate>
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        <asp:Button ID="btnUpdate" runat="server" Text="Button" OnClientClick="UpdateClick();" />
                    </FormTemplate>
                </EditFormSettings>
            </MasterTableView>
        </telerik:RadGrid>
    </telerik:RadAjaxPanel>

    Hope this helps.


    Regards,
    Konstantin Dikov
    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
  8. Chrisbarm
    Chrisbarm avatar
    5 posts
    Member since:
    Nov 2008

    Posted 24 Jul 2015 in reply to Konstantin Dikov Link to this post

    Thank you Konstantin, that worked.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017