Access child RadGrid footer in NestedViewTemplate

问题:

I have a RadGrid with expandable rows, where each expanded NestedViewTemplate contains a RadGrid. The child RadGrids have a visible footer and a few columns (I've included one, "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}"/>

I set the footer text of each child RadGrid in their ItemDataBound event in the code behind:

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);
    //...

This makes it so every child RadGrid has at the bottom of their "DtlTransAmount" column something like

Total Amount: $10.00

Now I need to adjust this sum value (the "10.00") via JavaScript when any textbox cell in the child RadGrid loses focus (because the user has changed amount values). I can successfully call a function with a single input parameter of the calling object, but them I'm not sure what to do:

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

For example, if I have 3 expanded rows (so 3 child RadGrid's visible) and I unfocus from a textbox in the child RadGrid of the 2nd row, how can I update the labels in the footer of just that child RadGrid? All DOM functions like getElementsByTagName or Telerik API functions like get_nestedViews all return empty or undefined or null.

回答1:

I was able to update the footer text via JavaScript by editing the HTML directly. Remember that the RadGrid is really just an HTML table with some styling. My RadGrid looks like the following at its source:

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

The key is to have the child RadGrid's HTML node and find the footer from there. There are many ways you can get that main node, but here's how I did it in my function:

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

You can access the HTML of the footer and get values with the following:

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

And now the variable amountTotal is "10.00".

Finally, replace the value in the HTML, swapping the "10.00" to some new value. It's ugly, but it works:

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