How to ajaxify controls in Edit Form of RadGrid

Question

I try to ajaxify RadNumericTextBoxs in Edit Form of Rad grid using (RadAjaxManager or RadAjaxManagerProxy) but i failed .

all i want to do is : when text changed of (txt_CashAndEquivalents,txt_ShortTermInvestments) sum the values of both text boxes and set the result in txt_OneTotal without full postback .

---

<EditFormSettings EditFormType="Template">
                        <EditColumn UniqueName="EditCommandColumn1" FilterControlAltText="Filter EditCommandColumn1 column">
                        </EditColumn>
                        <FormTemplate>
                            <div class="FinancePositioncontainers">
                                <div class="FinancePosition-container" id="decorationZone">
                                    <h4>Finance</h4>
                                    <fieldset>
                                        <legend>List</legend>
                                        <div class="formRow" style="padding-right: 10px; padding-left: 10px;">
                                            <h5>Bal</h5>
                                            <label for="txt_CashAndEquivalents">bal1:</label>
                                            <telerik:RadNumericTextBox ID="txt_CashAndEquivalents" runat="server" Text='<%# Eval("CashAndEquivalents")%>' Type="Number" DataType="System.Decimal" Width="160" NumberFormat-GroupSizes="3" AutoPostBack="True" TabIndex="1" OnTextChanged="txt_CashAndEquivalents_TextChanged"></telerik:RadNumericTextBox>

                                            <div>
                                                &nbsp;
                                            </div>
                                            <label for="txt_ShortTermInvestments">bal2:</label>
                                            <telerik:RadNumericTextBox ID="txt_ShortTermInvestments" runat="server" Text='<%# Eval("ShortTermInvestments")%>' Type="Number" DataType="System.Decimal" Width="160" NumberFormat-GroupSizes="3" TabIndex="2" AutoPostBack="True" OnTextChanged="txt_CashAndEquivalents_TextChanged"></telerik:RadNumericTextBox>

                                            <div>
                                                &nbsp;
                                            </div>

                                            <hr />
                                            <label for="txt_OneTotal">total  :</label>
                                            <telerik:RadNumericTextBox ID="txt_OneTotal" runat="server" ReadOnly="true" Type="Number" DataType="System.Decimal" Width="160" NumberFormat-GroupSizes="3"></telerik:RadNumericTextBox>

                                            <div>
                                                &nbsp;
                                            </div>
                                        </div>

                                    <asp:LinkButton ID="btnUpdate" runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                                        ValidationGroup="Main" CssClass="btn btn-primary btn-xs white_cr"><span class="glyphicon glyphicon-floppy-disk"></span> <%# (Container is GridEditFormInsertItem) ? "Uppdate" %>
                                    </asp:LinkButton>&nbsp;
                                        <asp:LinkButton ID="btnCancel" runat="server" CausesValidation="False" CommandName="Cancel"
                                            CssClass="btn btn-primary btn-xs white_cr"><span class="glyphicon glyphicon-ban-circle"></span>Cancel</asp:LinkButton>
                                    <br />
                                    <br />
                                </div>

                            </div>

                        </FormTemplate>
                    </EditFormSettings>

Answer 1

One approach you can consider is to utilise the client event, OnValueChanged of RadNumbericTextBox control, instead of the server side event.

For example,

<telerik:RadNumericTextBox ID="txt_CashAndEquivalents" runat="server" Text='<%# Eval("CashAndEquivalents")%>' Type="Number" DataType="System.Decimal" Width="160" NumberFormat-GroupSizes="3" TabIndex="1">
    <ClientEvents OnValueChanged="DoSum" />
</telerik:RadNumericTextBox>

<script type="text/javascript">
    function DoSum(sender, eventArgs)
    {
        var txt_ShortTermInvestments = $find('<%=txt_ShortTermInvestments.ClientID %>');
        var txt_OneTotal = $find('<%=txt_ShortTermInvestments.ClientID %>');
        var val_CashAndEquivalents = sender.get_value();
        var val_ShortTermInvestments = txt_ShortTermInvestments.get_value();
        txt_OneTotal.set_value(val_CashAndEquivalents + val_ShortTermInvestments);
    }
</script>

Above code is just demonstrating the idea and hasn't been tested. So give it a go and see if it works for you or not.

For more details on the available client side events, please refer to the following link.

http://docs.telerik.com/devtools/aspnet-ajax/controls/numerictextbox/client-side-programming/radnumerictextbox-client-object#radnumerictextbox-client-object