I am having trouble getting access to the fields inside of an EditItemTemplate within a RadGrid. What I am trying to do should be relatively simple. My RadGrid has RadTextBox fields inside of the edit row of the grid. In one of the columns I have an image icon, that when I click on it, I have a popup where you can enter an additional field. When I close that popup I want it to do a calculation and write something to the subsequent RadTextBox field inside the edit row of the grid.
The trouble is that I cannot seem to directly access the fields from the client-side API like I can when they are ouside of the grid. I have tried several coding methods, but none of them worked, and could not find information in the documentation on how to do it. Here is a sample of the current code:
The portion of the grid looks like this:
Initially, I was trying to do it exclusively from the client-side, but I tried to do some server-side code (that matches the above) to make it work as well:
(The NumericTextBox is just a wrapper for the RadTextBox, but I changed one of the fields to be just a RadTextBox and the problem is the same)
How can I access and manipulate the fields from javascript?
The trouble is that I cannot seem to directly access the fields from the client-side API like I can when they are ouside of the grid. I have tried several coding methods, but none of them worked, and could not find information in the documentation on how to do it. Here is a sample of the current code:
<
script
type
=
"text/javascript"
>
var weightField;
var momentField;
$(document).ready(function()
{
armPopup = $('#arm-prompt').dialog
({
autoOpen: false,
resizable: false,
closeOnEscape: true,
modal: true,
width: 50,
height: 65,
title: 'Enter ARM:'
});
});
function openArm(field, wf, mf)
{
weightField = $(wf);
momentField = $(mf);
var myDialogX = $(field).position().left;
var myDialogY = $(field).position().top - $(document).scrollTop() - $(field).outerHeight() - 60;
armPopup.dialog( 'option', 'position', [myDialogX, myDialogY] );
armPopup.dialog( 'open' );
}
function performCalc()
{
momentField.set_value(weightField.get_value() * $('arm').value);
armPopup.dialog('close');
}
</
script
>
The portion of the grid looks like this:
<
telerik:GridTemplateColumn
DataField
=
"Weight"
HeaderText
=
"Weight"
UniqueName
=
"Weight"
ItemStyle-HorizontalAlign
=
"Right"
ItemStyle-BorderWidth
=
"1"
ItemStyle-BorderColor
=
"#cccccc"
HeaderStyle-Width
=
"57px"
HeaderStyle-HorizontalAlign
=
"Right"
>
<
ItemTemplate
>
<
asp:Label
ID
=
"lblWeight"
runat
=
"server"
/>
</
ItemTemplate
>
<
EditItemTemplate
>
<
telerik:RadTextBox
ID
=
"txtWeight"
runat
=
"server"
ToolTip
=
"Enter Weight Here"
MaxLength
=
"10"
Text='<%#Bind("Weight") %>'
Skin="Simple" Width="50px" runat="server"></
telerik:RadTextBox
>
</
EditItemTemplate
>
</
telerik:GridTemplateColumn
>
<
telerik:GridTemplateColumn
DataField
=
"Moment"
HeaderText
=
"Moment"
UniqueName
=
"Moment"
ItemStyle-HorizontalAlign
=
"Right"
ItemStyle-BorderWidth
=
"1"
ItemStyle-BorderColor
=
"#cccccc"
HeaderStyle-Width
=
"79px"
HeaderStyle-HorizontalAlign
=
"Right"
>
<
ItemTemplate
>
<
asp:Label
ID
=
"lblMoment"
runat
=
"server"
/>
</
ItemTemplate
>
<
EditItemTemplate
>
<
asp:Image
ID
=
"imgCalculate"
ImageUrl
=
"~/Images/calculator_20.png"
ToolTip
=
"Calculate moment based on new ARM"
AlternateText
=
"Calculate moment based on new ARM"
ImageAlign
=
"Middle"
runat
=
"server"
/>
<
wyle:NumericTextBox
ID
=
"txtMoment"
runat
=
"server"
ToolTip
=
"Enter Moment Here"
MaxLength
=
"10"
MaxValue
=
"9999999999.9"
Skin
=
"Simple"
DecimalPlaces
=
"1"
Width
=
"50px"
Text='<%#Bind("Moment") %>' />
</
EditItemTemplate
>
</
telerik:GridTemplateColumn
>
Initially, I was trying to do it exclusively from the client-side, but I tried to do some server-side code (that matches the above) to make it work as well:
if (e.Item.Edit)
{
GridEditableItem gridItem = (GridEditableItem)e.Item;
if (!(e.Item is GridDataInsertItem))
{
((RadTextBox)e.Item.FindControl("txtTitle")).Enabled = false;
}
((Image)e.Item.FindControl("imgCalculate")).Attributes.Add("onclick", string.Format("javascript:openArm(this,'{0}','{1}_txtField');",
((RadTextBox)e.Item.FindControl("txtWeight")).ClientID, ((NumericTextBox)e.Item.FindControl("txtMoment")).ClientID));
}
How can I access and manipulate the fields from javascript?