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;
}
});
});
});
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;
}
});
});
});
6 Answers, 1 is accepted
0
Accepted

Princy
Top achievements
Rank 2
answered on 02 May 2012, 11:54 AM
Hello Cem,
Try the following code to access controls in FormTemplate.
C#:
JS:
Thanks,
Princy.
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>"
));
}
}
function
OnClientClick()
{
var
btn = document.getElementById(window[
'btn'
]);
}
Thanks,
Princy.
0

Cem
Top achievements
Rank 1
answered on 02 May 2012, 12:34 PM
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.
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.
0

Princy
Top achievements
Rank 2
answered on 03 May 2012, 11:56 AM
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:
C#:
JS:
Thanks,
Princy.
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
>
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.
0

Chrisbarm
Top achievements
Rank 1
answered on 21 Jul 2015, 11:14 AM
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
0
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:
Hope this helps.
Regards,
Konstantin Dikov
Telerik
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
0

Chrisbarm
Top achievements
Rank 1
answered on 24 Jul 2015, 07:39 AM
Thank you Konstantin, that worked.