在 NestedViewTemplate 中访问子 RadGrid 页脚答案

【问题标题】：Access child RadGrid footer in NestedViewTemplate在 NestedViewTemplate 中访问子 RadGrid 页脚
【发布时间】：2014-11-27 18:02:19
【问题描述】：

我有一个带有可扩展行的 RadGrid，其中每个扩展的 NestedViewTemplate 包含一个 RadGrid。子 RadGrids 有一个可见的页脚和几列（我已经包括了一个，“DtlTransAmount”）：

<NestedViewTemplate>
    <asp:Panel ID="pnDetailItems" runat="server" >
        <telerik:RadGrid ID="rgDetailItems" runat="server" ShowFooter="true" Width="1675px" AutoGenerateColumns="false" AllowPaging="false" 
        OnItemDataBound="rgDetailItems_ItemDataBound" ... >
            <MasterTableView>
                <Columns>
                    <telerik:GridBoundColumn HeaderText="Amount" DataField="DtlTransAmount" UniqueName="DtlTransAmount" SortExpression="DtlTransAmount"
                    HeaderStyle-Width="20px" ItemStyle-Width="20px" FilterControlWidth="20px" DataFormatString="{0:$0.00}"/>

我在后面的代码中的 ItemDataBound 事件中设置了每个子 RadGrid 的页脚文本：

private void rgDetailItemsItemDataBound(object sender, GridItemEventArgs e)
{
    var foot = e.Item as GridFooterItem;
    var r = sender as RadGrid;
    foot["DtlTransAmount"].Text = "Total Amount: $" + GetMainSumFromDetailRadGrid(r);
    //...

这使得每个子 RadGrid 的“DtlTransAmount”列底部都有类似

总金额：$10.00

现在，当子 RadGrid 中的任何文本框单元格失去焦点时（因为用户更改了数量值），我需要通过 JavaScript 调整这个总和值（“10.00”）。我可以使用调用对象的单个输入参数成功调用函数，但是我不确定该怎么做：

function detailAmountUpdate(obj) {
    // alert("Made it here at least...");
    // no idea what to do now.
}

例如，如果我有 3 个展开的行（因此 3 个子 RadGrid 可见）并且我从第二行的子 RadGrid 中的文本框取消焦点，我如何更新该子 RadGrid 的页脚中的标签？所有 DOM 函数（如 getElementsByTagName）或 Telerik API 函数（如 get_nestedViews）都返回空、未定义或 null。

【问题讨论】：

标签： javascript c# asp.net telerik radgrid

【解决方案1】：

我可以通过 JavaScript 直接编辑 HTML 来更新页脚文本。请记住，RadGrid 实际上只是一个带有一些样式的 HTML 表格。我的 RadGrid 的源代码如下所示：

<div tabindex="0" class="RadGrid RadGrid_Default" 
id="ucP_RadGrid1_ctl00_ctl05_rgDetailItems" style="width: 1675px;">
    <table class="rgMasterTable" id="ucP_RadGrid1_ctl00_ctl05_rgDetailItems_ctl00" 
    style="width: 100%; table-layout: auto; empty-cells: show;">
        ...
        <tfoot>
            <tr class="rgFooter">
                <td>&nbsp;</td><td>Total Amount: $</td><td>123.45</td>
                <td>Remaining: $</td><td>0.00</td><td>&nbsp;</td><td>&nbsp;</td>
            </tr>
        </tfoot>
        ...

关键是要有子 RadGrid 的 HTML 节点并从那里找到页脚。有很多方法可以获得该主节点，但这是我在函数中的做法：

var rgNode = obj.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;

您可以访问页脚的 HTML 并通过以下方式获取值：

var markup = rgNode.getElementsByTagName("tfoot")[0].innerHTML;
var amountTotal = markup.split("<td>")[3].replace("</td>", "").trim();

现在变量amountTotal 是“10.00”。

最后，替换 HTML 中的值，将“10.00”替换为某个新值。这很丑，但它有效：

rgNode.getElementsByTagName("tfoot")[0].innerHTML = 
    markup.replace("Amount: $</td><td>" + amountTotal, "Amount: $</td><td>15.00");

【讨论】：