访问孩子NestedViewTemplate radgrid控件页脚(Access child Ra

2019-10-21 02:05发布

我有一个可展开的行,其中每个扩展一个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}"/>

我把每个孩子radgrid控件在后面的代码的ItemDataBound事件的页脚文本:

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

现在我需要通过JavaScript来调整该合计值(以下简称“10.00”)时,任何文本框单元格对孩子radgrid控件失去焦点(因为用户已经改变量值)。 我可以成功调用与调用对象的单个输入参数的功能,但他们我不知道该怎么做:

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

举例来说,如果我有3个扩展行(所以3子radgrid控件的可见的),我从孩子第2行radgrid控件的文本框无焦点的,我怎么能在短短的那个孩子radgrid控件的页脚更新标签? 像所有的DOM功能getElementsByTagName状或Telerik的API函数get_nestedViews全部返回空或未定义或为空。

Answer 1:

我可以直接编辑HTML更新通过JavaScript页脚文本。 请记住,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");


文章来源: Access child RadGrid footer in NestedViewTemplate