javascript - 如何在RadGrid的编辑表单中ajaxify控件

Question

我尝试使用(RadAjaxManager 或 RadAjaxManagerProxy)在 Rad grid 的 Edit Form 中 ajaxify RadNumericTextBox，但失败了。

我想做的是: 当文本更改为 (txt_CashAndEquivalents,txt_ShortTermInvestments) 时，将两个文本框的值相加，并将结果设置在 txt_OneTotal 中，而无需完全回发。

<小时/>

<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

您可以考虑的一种方法是利用 RadNumbericTextBox 控件的客户端事件 OnValueChanged，而不是服务器端事件。

例如，

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

以上代码只是演示这个想法，尚未经过测试。因此，尝试一下，看看它是否适合您。

有关可用客户端事件的更多详细信息，请参阅以下链接。

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