This is a migrated thread and some comments may be shown as answers.

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

2 Answers 109 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Johnathan
Top achievements
Rank 1
Johnathan asked on 20 Dec 2010, 06:33 PM
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?

2 Answers, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 1
answered on 21 Dec 2010, 01:52 PM
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.
0
Johnathan
Top achievements
Rank 1
answered on 21 Dec 2010, 04:15 PM
Thanks,

Your code sample helped.  Hopefully Telerik will implement a simpler way to extract this in the future.
Tags
Grid
Asked by
Johnathan
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Johnathan
Top achievements
Rank 1
Share this question
or