How to find button control in form template using javascript?

[Cem]

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; 
                        }
                    });
                 }); 
            });

[Princy]

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.

[Cem]

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.

[Princy]

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.

[Chrisbarm]

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

 

 

 

[Konstantin Dikov]

Hello Chrisbarm,

With enabled AJAX you should use the approach documented in the following help article for executing script after an AJAX request:

• Executing JavaScript Code from Server

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

[Chrisbarm]

Thank you Konstantin, that worked.