Getting the expanded row columns values in a RadGrid when using the onHierarchyExpanded event

Here is the code for my RadGrid:

<telerik:RadGrid ID="ProductRanges_Grd" ShowHeaderWhenEmpty="true" runat="server"
                        AutoGenerateColumns="false" Width="100%" Height="250px" ShowHeader="true" Visible="false"
                         OnDetailTableDataBind="ProductRanges_Grd_DetailTableDataBind" OnItemCommand="ProductRanges_Grd_ItemCommand"
                          OnInsertCommand="ProductRanges_Grd_InsertCommand" OnUpdateCommand="ProductRanges_Grd_UpdateCommand" 
                          OnNeedDataSource="ProductRanges_Grd_NeedDataSource" OnDeleteCommand="ProductRanges_Grd_DeleteCommand"
                          OnItemDataBound="ProductRanges_Grd_ItemDataBound">
                        <ClientSettings>
                            <ClientEvents OnRowSelected="RowSelected"  OnHierarchyExpanded="HierarchyExpanded" />
                            <Scrolling AllowScroll="true" />
                            <Selecting AllowRowSelect="true" />
                        </ClientSettings>
                        <MasterTableView EditMode="EditForms" HierarchyLoadMode="Client" DataKeyNames="PROVIDER_ID,PROVIDER_NAME" 
                            HierarchyDefaultExpanded="false">
                            <NoRecordsTemplate>
                                <span></span>
                            </NoRecordsTemplate>
                            <Columns>
                                <telerik:GridBoundColumn UniqueName="PROVIDER_ID" DataField="PROVIDER_ID" Display="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn UniqueName="PROVIDER_NAME" DataField="PROVIDER_NAME" HeaderText="Provider">
                                </telerik:GridBoundColumn>
                            </Columns>
                            <DetailTables>
                                <telerik:GridTableView CommandItemDisplay="Top" DataKeyNames="PRODUCT_ID" Name="ProductTableView"
                                    ShowHeadersWhenNoRecords="true" EditMode="EditForms" ShowFooter="true" >

                                    <CommandItemTemplate>
                                        <table width="100%">
                                            <tr>
                                                <td align="left" style="padding-left: 8px;" valign="middle">
                                                    <asp:ImageButton ID="AddDetailTable_btn" CommandName="InitInsert"  runat="server"
                                                        ImageUrl="~/images/add.gif" />  Add
                                                </td>
                                            </tr>
                                        </table>
                                    </CommandItemTemplate>
                                    <Columns>
                                        <telerik:GridButtonColumn ButtonType="ImageButton" ImageUrl="../../../images/Erase12.png"
                                            HeaderText="Remove" CommandName="Delete">
                                        </telerik:GridButtonColumn>
                                        <telerik:GridEditCommandColumn ButtonType="ImageButton" EditImageUrl="../../../images/edit.gif">
                                        </telerik:GridEditCommandColumn>
                                        <telerik:GridBoundColumn UniqueName="ROW_ID" DataField="ROW_ID" Display="false">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn UniqueName="PRODUCT_ID" DataField="PRODUCT_ID" Display="false">
                                        </telerik:GridBoundColumn>

                                        <telerik:GridBoundColumn UniqueName="PRODUCT_NAME" DataField="PRODUCT_NAME" HeaderText="Products">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn UniqueName="Min_Quantity" DataField="MIN_QUANTITY" HeaderText="Minimum quantity">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn UniqueName="Max_Quantity" DataField="MAX_QUANTITY" HeaderText="Maximum quantity">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn UniqueName="Comission" DataField="DISCOUNT_VALUE"
                                            HeaderText="Commission">
                                        </telerik:GridBoundColumn>


   <script type="text/javascript">

   function HierarchyExpanded(sender,args)
  {
     // how can I access the expanded row's ProviderID in this function?
  }

Any help is appreciated

Answer №1

Feel free to experiment with the sample code provided below.

JavaScript

function DisplayHierarchyInfo(sender, eventArgs) {
            alert(eventArgs.get_gridDataItem().getDataKeyValue("ITEM_ID"));
        }

.html

<MasterTableView ClientDataKeyNames="ITEM_ID" HierarchyLoadMode="Client">

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

issue encountered when filling out a dropdown menu using a JSON data structure

Seeking assistance with populating a button dropdown in angularjs. Encountering the error message: "Unexpected end of expression: data.WotcSummary "|. Any ideas on what might be causing this issue? Here is the JavaScript file code snippet: WotcDashBoard ...

The error message that occurs when using angularjs $scope.$apply() is: Error: [$rootScope:inprog]

Having trouble updating text on a page within the $scope. Facing this error message: Error: [$rootScope:inprog] [http://errors.angularjs.org/1.2.15/$rootScope/inprog?p0=%24apply] at Error (native) at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/ ...

Struggling with handling multiple jQuery AJAX requests on a single webpage

Greetings, I am currently working on a PHP Project that involves loading requests using ajax. Below are the two functions in question: Function One: Upon clicking the showNotify event, an ajax request is made to retrieve content with a spinner displayed u ...

Approximately 20% of spoken words are not accurately conveyed by Speech Synthesis Google Voices, failing to adhere to the intended voice selection

When using speechSynthesis.speak(utterance) in Chrome with the "Google UK English Female" voice, there is an issue where a male voice is randomly spoken instead. Any thoughts on how to resolve this? Latest Update: July 26th, 2022 This appears to be a bug ...

Tips for executing gulp tasks in the command line

As a newcomer to Gulp, I've encountered an issue with executing a task named task1 in my gulp.js file. When I enter "gulp task1" in the command line, it opens the gulp.js file in Brackets editor instead of running the task as expected. Can anyone offe ...

Open the navigation menu by clicking on either the navigation links or anywhere outside of it

Seeking a solution for my mobile navigation menu that closes when clicking outside the links or on one of them, without using jQuery. How can I achieve this with JavaScript ES6? Current code snippet: const navSlide = () => { const burger = docum ...

retaining the scroll position of a window when refreshing a div

There's this issue that's been bothering me lately. I update the database via an ajax call, refresh the div, everything works fine, but it still scrolls to the top of the page. Here's what I have attempted: function postdislike(pid, user, ...

Extracting and retrieving data using JavaScript from a URL

After reviewing some code, I am interested in implementing a similar structure. The original code snippet looks like this: htmlItems += '<li><a href="show-feed.html?url=' + items[i].url + '">' + items[i].name + '& ...

Issues with the functionality of the shopping cart are causing a disruption

This is the coding for the online shopping cart: <!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8" /> <title>Online Shopping Cart</title> <script src="jquery-3.1.1.min.js"></script> ...

Extracting data from websites using Node.js

Currently, I am tackling a task involving web scraping. To give you some context, I take the URL from my webpage and extract the content located between the <body> tags. My objective is to then display this extracted content on my website. Through my ...

Leveraging the useRef hook to adjust the CSS styling of a React component

Currently, I am working on changing the style of a react component by utilizing the useRef hook. So far, I have implemented the useRef hook to reference the specific component whose style I want to modify when clicking on two buttons. Despite my efforts, I ...

Using Jquery to change an id with the .attr method may not always produce the desired results

I have a div element that functions as a button when clicked, with the ID of knight. Every time I click on any of the 3 buttons (including knight), it changes the ID of knight to elf (yes, I'm creating a game). I have a hover effect for knight usi ...

Storing a group of IWebElements as a collection in C# with Selenium by utilizing the [FindsBy] attribute

I'm struggling with setting multiple IWebElements to a collection using the [FindsBy] attribute from OpenQA.Selenium.Support.PageObjects. Specifically, I am trying to store all "li" elements in an instance variable called "MyElements". HTML <ul c ...

What is the best way to apply CSS styles to a child div element in Next.js?

I'm currently working on enhancing the menu bar for a website project. Utilizing nextjs for my application I am aiming to customize the look of the anchor tag, however, encountering some issues with it not rendering correctly. Here is a snippet of ...

Issues with date clicking on FullCalendar in Angular

I'm currently using version 4.4.0 of the FullCalendar plugin, but I am facing an issue where the dayClick event is not being triggered in my code. Below is a snippet of my code: calendar.component.html <full-calendar defaultView="dayGridMonth ...

How can we use JavaScript to retrieve an element with custom styling?

I've encountered a strange issue with my script where it seems to stack up borders and display a 2px border instead of the intended 1px border when switching elements on click. Here is the link code I am using: <li ><a href="plumbing.php"&g ...

Error encountered when using prisma findUnique with where clause

Trying to set up a Singup API using ExpressJS and Prisma is proving to be a bit challenging. The issue arises when I attempt to verify if a given email already exists in my database. Upon passing the email and password, an error is thrown stating Unknown ...

Combine the entities within the object

I need to combine two objects that contain other objects within them, similar to the following structure: let selections = { 123: { abc: {name: 'abc'}, def: {name: 'def'} }, 456: { ghi: {name: ' ...

Can anyone provide guidance on how to calculate the total sum of a JavaScript array within an asynchronous function?

Currently, I am working with Angularjs Protractor for end-to-end testing and faced an issue while trying to calculate the sum of values in a column. Although I am able to print out each value within the loop successfully, I am struggling to figure out ho ...

Update the div on the current page using externally retrieved information

Once again, I find myself stuck on a problem. Allow me to explain. Within this div, I have retrieved data using HTML SIMPLE DOM from another site. Like so: <div id="data">.....</div> Currently, the data refreshes whenever the user reloads th ...