How do I get and set the textboxes for in-place edit fields?

[Johnathan]

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:

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

(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?

[Princy]

Hello Johnathan,

Following is one sample code to access the value in RadNumericTextBox from client side.

ASPX:

<telerik:GridTemplateColumn>
   <EditItemTemplate>
        <telerik:RadNumericTextBox runat="server" ID="RadNumericTextBox"
            DbValue='<%#Bind("Count") %>'>
        </telerik:RadNumericTextBox>
   </EditItemTemplate>
</telerik:GridTemplateColumn>

You need to use the index accordingly(based on RadNumericTextBox) .

Java Script:

var grid = $find("<%=RadGrid1.ClientID %>");
var value = $telerik.$(".rgEditRow", grid.get_masterTableView().get_element())[0].getElementsByTagName("input")[0].value; // if EditMode is 'Inplace'
var value = $telerik.$(".rgEditForm", grid.get_masterTableView().get_element())[0].getElementsByTagName("input")[0].value; // if EditMode is 'EditForms'

Also refer the following code library  which provides an example of how to retrieve editor values on client:
Retrieving grid editor value client side

Thanks,
Princy.

[Johnathan]

Thanks,

Your code sample helped.  Hopefully Telerik will implement a simpler way to extract this in the future.