Retrieve the data from a specific row of a RadGrid on the client side

Hi everyone, I've been struggling with this issue and would appreciate any help or advice you can offer. I've spent the last day and a half trying to figure it out!

I'm working on a module for a DotNetNuke portal where I need to populate a Telerik RadGrid with data. Despite following numerous tutorials and examples, I keep getting errors like "object Object", "null", or "undefined".

Specifically, I am looking to: 1) Retrieve the value of the "BookingID" column for each selected row 2) Pass that value as part of a URL string that will open in a RadWindow.

I've been attempting to achieve this using JavaScript, but I'm open to any other suggestions at this point. Below is the current JavaScript code along with a simplified version of the RadGrid:

 ///JavaScript///

function gup(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexS = "[\\?&]" + name + "=([^&]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(window.location.href);
    if (results == null) return "";
    else return results[1];
}
    function ShowEditForm() {
        var tab = gup('tabid')
        var mid = gup('mid').replace(/#/, '')
        var masterTableView = $find("perDiemBookingsRadGrid").get_masterTableView();
        var id = masterTableView.get_selectedItems()[0].getDataKeyValue('BookingID');

        window.radopen("/Default.aspx?tabid=" + tab + "&ctl=multiEdit&mid=" + mid + "&SkinSrc=[G]Skins/Blue-NCPP/Plain&BIDs=" + id, "RadWindow3");
    }

Answer №1

To retrieve the key for a selected row, you can use the code snippet below. Instead of displaying RadWindow when a row is selected, I prefer to have users click on an image or button to open RadWindow.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
 <!--
    function SelectRow(sender, args)
    {
      var key = args.getDataKeyValue("Key");
      window.radopen('Details.aspx?key=' + key, "RadPopupWindow");
    }   
    -->
</script>
</telerik:RadCodeBlock>
<telerik:RadGrid ID="RadGrid1" runat="server" >
  <MasterTableView ClientDataKeyNames="Key" />
     <ClientSettings>
        <Selecting AllowRowSelect="true" />
        <ClientEvents OnRowSelected="SelectRow" />
        </ClientSettings>
  </telerik:RadGrid>

<%-- RadWindowManager --%>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Modal="true" Behaviors="Default"
 VisibleTitlebar="true" VisibleStatusbar="false" InitialBehavior="Reload" Style="z-index: 7001"
  Skin="Default" DestroyOnClose="true" Width="750px" Height="500px" >
   <windows>
  <telerik:RadWindow ID="RadPopupWindow" runat="server">
    </telerik:RadWindow>
  </windows>
</telerik:RadWindowManager>

Answer №2

let gridElement = $find("<%=perDiemBookingsRadGrid.ClientID%>")

You can iterate through the rows in grid.MasterTableView.SelectedRows and access the values like so:

for(let i = 0; i < gridElement.MasterTableView.SelectedRows.length; i++)
{
    let selectedRow = gridElement.MasterTableView.SelectedRows[i];
    let id = selectedRow.KeyValues["BookingID"];
    // implement your code logic here.
}

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

parsing and building a sophisticated JSON object

i have a complex array structure as shown below, array=[ { 'mm': '1', exp: 'exp1' }, { 'mm': '2', exp: 'exp2' }, { 'mm': [ '1', '3', '7' ], exp: &ap ...

I'm having trouble using the splice() function to insert a substring into an array. What could be

Forgive me for the trivial question, but this is really bothering me. I'm trying to replicate the example on Mozilla's site: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice Could someone clarify why t ...

Tips for leveraging rxjs debounceTime with React Native's textInput component

I recently came across an example in Angular that showed how to replicate the debounceTime functionality from rxjs: fromEvent(this.input.nativeElement, 'keyup') .pipe( map(event => event.target.value), debounceTime(40 ...

Using mongoDB to insert data followed by processing it with the process.next

Currently, I am in the process of inputting a list of 50k entries into my database. var tickets = [new Ticket(), new Ticket(), ...]; // 50k of them tickets.forEach(function (t, ind){ console.log(ind+1 + '/' + tickets.length); Ticket.find ...

In search of an effective strategy to troubleshoot Javascript amidst a complex scenario?

I've been assigned the task of figuring out why a jquery slider isn't working properly. I remember it was functioning fine right after installation because I checked on different browsers. The most plausible reason I can think of is that there mi ...

Exploring ways to access an array from a nested array in node js

I am currently learning about node js and have encountered an issue with a controller function. I am trying to create my own object and arrays within this function, but I am having trouble accessing the final array outside of the loop. Additionally, I have ...

Reactjs is retrieving several items with just one click on individual items

I am having trouble getting only a single sub-category to display. Currently, when I click on a single category, all related sub-categories are showing up. For example, in the screenshot provided, under the Electronic category, there are two subcategories: ...

The Mysteries of MySQL and Node.JS Post Requests

As a beginner in networking, I have successfully used this code with a REST API like Postman to achieve my desired outcome: router.post('/', function(req,res,next){ var reqObj = req.body; console.log(reqObj); req.getConnection(fu ...

What is the proper way to incorporate an if statement within a new instance?

After creating a new instance, I am looking to disable the pagination based on the variable enablePagination = false. However, I am unsure of how to set the if condition within that instance. If the condition is true, then it should be operational. var ...

All nodes within the Angular ivh-treeview will automatically expand upon loading

Looking to optimize my AngularJS ivh-treeview. I am aiming to have all child nodes expanded without the need for manual expansion. Presently, the tree structure looks like this: $rootScope.nodes= [{ label: 'node1', value: &apo ...

How to open a blank PDF in a new window using AngularJS

When attempting to generate a PDF with AngularJS, the file ends up empty. Here is the scenario: I have a REST API where the response payload from a GET request looks like this: JVBERi0xLjQKJeLjz9MKMyAwIG9iago8PC9GaWx0ZXIvRmxhdGVEZWNvZGUvTGVuG3RoIDE4NT4+ ...

npm's protocol for handling callback errors

While exploring the coding style guidelines by npm, I stumbled upon a rather enigmatic suggestion: Be very careful never to ever ever throw anything. It’s worse than useless. Just send the error message back as the first argument to the callback. Thi ...

Setting the control in a server-side table to runat=server will nullify the SQL parameter during an update

Currently, I have a FormView on a page with a basic HTML table inside. The purpose of the table is for layout and contains child controls data-bound to SqlDataSource. However, I am facing an issue where adding the runat=server attribute to the table declar ...

Tips for modifying a nested reactive form while ensuring validation is maintained?

When retrieving data from a service in the form of an array, one might wonder how to bind this data in a nested form if there are potentially endless entries in the array. The form is expected to be pre-filled with this data, including validation for each ...

jQuery's searchbar alert feature notifies users when there are no search results found,

I've created a simple search bar for my application. Currently, it searches users by data attribute, but if there is no match, it displays nothing. I would like to show an error message when no user is found. I tried using an if statement, but the err ...

Obtain environment variables within a Strapi plugin

I am currently working on developing a Strapi local plugin, but I am facing an issue with retrieving variables defined in my .env file located at the root of my project. Specifically, I am trying to access this value within my React component (plugins/myPl ...

Using ReactJS to strip HTML tags from JSON response

I'm having trouble figuring out how to strip HTML tags from a JSON response in reactjs. Here's the JSON response: { "price": "26,800.98", "diff": "<!--daily_changing-->+13.44 (+0.05%)&nbsp;& ...

Retrieve the value of another ID within a form using the .innerHTML property

I would like to be able to show the value of a text field when the Search button is clicked. Currently, I have the following code on the search button: onclick="document.getElementByid('output').innerHTML = this.value" This code successfully r ...

the hidden input's value is null

I am encountering an issue with a hidden input in this form. When I submit the form to my API, the value of the input is empty. Isbn and packId are both properties of a book model. However, for some reason, the value of packId is coming out as empty. & ...

Transforming an ASPX textbox input into HTML formatted text

When I fill out the address textbox in my application for sending an inquiry email, and press enter after each line like the example below: 33A, sector -8, /*Pressed enter Key*/ Sanpada, /*Pressed enter Key*/ Navi mumbai. It should ...