访问孩子NestedViewTemplate radgrid控件页脚 [英] Access child RadGrid footer in NestedViewTemplate
问题描述
我有展开的行，其中每个扩展 NestedViewTemplate 包含一个radgrid控件radgrid控件。孩子RadGrids有一个明显的页脚和几列（我已经包含之一，DtlTransAmount）：
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}"/>
我设定每个孩子radgrid控件的页脚文本在他们的ItemDataBound事件背后的code：
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);
//...
这使得它如此每个孩子都有radgrid控件在他们的DtlTransAmount列类似
This makes it so every child RadGrid has at the bottom of their "DtlTransAmount" column something like
总金额：$ 10.00
Total Amount: $10.00
现在我需要通过JavaScript来调整这个总和值（以下简称10.00）时，在孩子radgrid控件的文本框细胞失去焦点（因为用户已经改变量值）。我可以成功调用与调用对象的单个输入参数的功能，但他们我不知道该怎么做：
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.
}
例如，如果我有3个扩展行（让3子radgrid控件的可见的），我从孩子第2行radgrid控件一个文本框，我怎么能在短短的那个小孩radgrid控件的页脚更新标签无焦点的方式？所有的DOM功能，如的getElementsByTagName 或类似 get_nestedViews Telerik的所有API函数返回空或未定义或为空。
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.
推荐答案
我能够直接编辑HTML来更新通过JavaScript页脚文本。请记住，radgrid控件实际上只是一个HTML表，一些造型。我radgrid控件看起来像在源头如下：
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> </td><td>Total Amount: $</td><td>123.45</td>
<td>Remaining: $</td><td>0.00</td><td> </td><td> </td>
</tr>
</tfoot>
...
关键是有孩子radgrid控件的HTML节点，并从那里找到注脚。有很多方法可以得到主节点，但这里就是我如何在我的功能做到了：
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;
您可以访问页脚的HTML和下面得到的值：
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();
而现在的变量 amountTotal 为10.00。
最后，在HTML替换值，交换的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");
这篇关于访问孩子NestedViewTemplate radgrid控件页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
