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

3 posts, 1 answers
  1. Johnathan
    Johnathan avatar
    21 posts
    Member since:
    Jul 2010

    Posted 20 Dec 2010 Link to this post

    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. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Dec 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Johnathan
    Johnathan avatar
    21 posts
    Member since:
    Jul 2010

    Posted 21 Dec 2010 Link to this post

    Thanks,

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