Retrieve the footer of a RadGrid nested within a NestedViewTemplate for a child

I am working with a RadGrid that has expandable rows, each of which contains a RadGrid within a NestedViewTemplate. These child RadGrids have visible footers and a few columns, one of which is "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}"/>

The footer text for each child RadGrid is set in the 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 results in each child RadGrid displaying something like the following in the footer of the "DtlTransAmount" column:

Total Amount: $10.00

Now, I need to update this sum value (the "10.00") via JavaScript when a textbox cell in a child RadGrid loses focus due to a user changing amount values. I can successfully call a function with a single input parameter (the calling object), but I'm unsure of what to do next:

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

For instance, if there are three expanded rows and I unfocus from a textbox in the child RadGrid of the second row, how can I update the labels in the footer of just that specific child RadGrid? DOM functions like getElementsByTagName and Telerik API functions like get_nestedViews are returning empty, undefined, or null values.

Answer №1

By making direct edits to the HTML via JavaScript, I successfully updated the footer text. It's important to note that the RadGrid essentially functions as an HTML table with some added styling. Here is a snippet of the source code for my 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>
        ...

To target the footer, I navigated through the child RadGrid's HTML node. While there are multiple ways to reach the main node, I achieved it in my function using the following code:

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

Subsequently, I accessed the HTML content of the footer to retrieve specific values like so:

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

As a result, the variable amountTotal held the value "10.00".

Lastly, I replaced the existing value in the HTML by substituting "10.00" with a new value. While the method may seem inelegant, it served its purpose effectively:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Embed an array within a div using JavaScript

I'm looking to make a small adjustment to this code, acknowledging that it's far from perfect. Instead of simply writing the array contents into a single div, I'd like to create a new div for each number in the array and then add it to the c ...

Using a JavaScript callback function as a parameter for the addJavascriptInterface method in Java

Can Java interact with arbitrary functional objects in JavaScript by calling them as callbacks? For example, if we have a function called 'access' that is registered to invoke a Java function: access(function(blabla){ ... }); Are there eff ...

Error 504 'FUNCTION_INVOCATION_TIMEOUT' encountered on NextJS/Vercel deployment

Encountering an error on one of my pages after deploying to vercel, everything functions properly in dev mode. I suspect the issue lies with one of my fetch/APIs as it utilizes the data from the initial fetch request as the URL for the subsequent fetch re ...

Creating stylish error labels using Materialize CSS

While Materialize has built-in support for validating input fields like email, I am looking to implement real-time validation for password inputs as well. This would involve dynamically adding error or success labels using JavaScript. Unfortunately, my at ...

The most basic method for monitoring changes in an object

An application needs to immediately update all clients with a large object when it changes. What is the most basic method to monitor changes in a Node.js object? Consider the following object: var obj = { num: 3, deep: { num: 5 } } A functi ...

Learning to Use jQuery to Send JSON Requests in Rails

I am attempting to send a JSON post request to a Rails 3 server. Here is the AJAX request I have set up: $.ajax({ type: 'POST',<br> contentType: "application/json",<br> url: url, ...

Trouble with Material-UI's useMediaQuery not identifying the accurate breakpoint right away

While utilizing the MUI useMediaQuery hook in my React app, I encountered a bug that resulted in errors being thrown due to the initial failure of the hook to recognize the correct breakpoint. Eventually, the page re-renders and displays the correct value. ...

Enhance your Angular2 Directive

Looking to customize the angular2-clipboard npm package by extending its functionalities. Specifically, I aim to access and modify its ngOnInit() function to cater to a specific copying use case. Being new to angular2, I am uncertain about the process of ...

Is there a preferred library or tool for reducing noise in Gaussian?

Looking for a way to Denoise Gaussian in .NET - any recommendations for a library or code? ...

Is it possible to use just one <map> tag for multiple images in jQuery or JavaScript?

I have multiple images on my website <img usemap="#slideMap_branches" src="branches.png" width="890" height="270" alt="Slide 4"> <img usemap="#slideMap_order" src="order.png" width="890" height="270" alt="Slide 2"> <img usemap="#slideMap_c ...

Enhancing quiz results with intricate input forms using JavaScript

I am currently working on an online quiz and the code is functioning properly. However, I would like to display the scores of each user. As a beginner in Javascript, I have been developing this quiz for a friend, and it has been a learning experience for m ...

Displaying dynamic text using radio buttons utilizing React

Currently, I am in the process of developing a multiple choice quiz where each question is presented with various options displayed as radio buttons. My main objective is to show specific text related to the option selected by the user when they make a ch ...

show pictures in a grid section

My gridview is set up to display images in each row, but I'm encountering issues with binding an imagecolumn to a dynamic URL. In the codebehind, I populate a datatable with records, define the gridview columns programmatically (as it cannot be done i ...

Module child-process not found

Why is it that when I try to run "require('child-process')" in the node shell, I receive an error saying "Cannot find module 'child-process'"? It seems like "child-process" should be a default library in Node. Any insights on what could ...

Tips for hiding a soft keyboard with jQuery

Here is a text button: <input type="text" class="field" id="something" name="something" placeholder="text" autofocus /> I want to prevent the android soft keyboard from popping up and keep the focus on this field. I only want to do this for this ...

Error: Trying to send FormData to ajax results in an Illegal Invocation TypeError being thrown

Successfully sending a file to the server for processing using the code below: var formData = new FormData(); formData.append('file', $('#fileUpload')[0].files[0]); options = JSON.stringify(options); // {"key": "value"} $.ajax({ ...

Issue: Entering data in the input field for each row results in the same value being copied to the qty field

Currently, I have a field where users can enter the quantity for each row. Everything was functioning properly until I decided to add another input field for the pick option. Unfortunately, now it seems that whatever is entered in one field gets duplicated ...

MongoDB and Node.js encounter unexpected outcomes due to undefined variables

I am trying to retrieve data from my collection called students within the pool database in MongoDB. Despite having a successful connection to the database, when I use console.log(result.lastname), it returns undefined. Below is an excerpt from my server ...

I am receiving an error stating "Page not found" when making an AJAX request. What could be causing

Whenever I attempt a POST request, I consistently receive the 'Requested page not found. [404]' error message. I am unable to identify the root cause of this issue, so please provide your guidance and advice. I have developed a web API using ASP ...

Transition the object in smoothly after the slide has changed

How can I make the h4 tags fade in after the divs slide into view, while also adding the class "current" to each visible slide? Check out the example on JSFiddle here. <div class="slider"> <div class="slides"> <div class="slide ...