asked on

Get the values of a cell in a selected row of a RadGrid on client Side

Hey there everyone, I'm hoping there is a simple fix for this, but I would accept a complicated one after messing around with it for the last day and a half!

I am putting together a module that will drop into a DotNetNuke portal and I'm populating a Telerik RadGrid with data. I have followed every tutorial and example I can find, but the result keeps coming back with "object Object", "null", or "undefined".

I need to:
1) get the value of the "BookingID'" column for each row that is selected
2) pass the value into a url string that opens up in a RadWindow.

I'm trying to do all of this using javascript, but if you know a better way, I'm down for anything at this point.
Here are some of the tutorials and examples I have followed to no avail:

http://stackoverflow.com/questions/761633/select-a-radgrid-row-client-side-inside-radwindows
http://www.telerik.com/help/aspnet/grid/grdgettingcellvaluesforselectedrowsclientside.html
http://www.telerik.com/community/forums/aspnet-ajax/grid/extracting-cell-values-from-radgrid.aspx
http://demos.telerik.com/aspnet-ajax/grid/examples/client/selecting/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/grid/examples/client/keys/defaultcs.aspx

Here is my current JavaScript and a stripped down 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");
        }


///Grid////
<telerik:RadGrid ID="perDiemBookingsRadGrid" runat="server" AllowPaging="True" AllowSorting="True"
                    DataSourceID="perDiemBookingsSqlDataSource" GridLines="None" ShowGroupPanel="True"
                    AllowAutomaticDeletes="True" AllowMultiRowSelection="True" Width="800px" AllowAutomaticUpdates="True"
                    AutoGenerateColumns="False" >
                    <MasterTableView DataSourceID="perDiemBookingsSqlDataSource" DataKeyNames="BookingID"
                        CommandItemDisplay="Top">
                        <CommandItemTemplate>
                            <div style="padding: 5px 5px;">
                                <a href="#" onclick="return ShowEditForm();" visible='<%# perDiemBookingsRadGrid.EditIndexes.Count = 0 %>'>
                                    <img style="border: 0px; vertical-align: middle;" alt="" src="/images/Edit.gif" />
                                    Show Edit Form</a> &nbsp;&nbsp;
                            </div>
                        </CommandItemTemplate>
                        <Columns>
                            <telerik:GridClientSelectColumn Reorderable="False" Resizable="False" ShowSortIcon="False"
                                UniqueName="column">
                            </telerik:GridClientSelectColumn>
                            <telerik:GridBoundColumn DataField="BookingID" UniqueName="BookingID" DataType="System.Int32"
                                HeaderText="BookingID" ReadOnly="True" SortExpression="BookingID" Visible="False">
                            </telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn DataField="CustomerName" HeaderText="Customer" UniqueName="Customer"
                                EditFormColumnIndex="2" GroupByExpression="GROUP BY CustomerName" SortExpression="CustomerName">
                                <EditItemTemplate>
			</Columns>
                        <EditFormSettings ColumnNumber="3">
                            <EditColumn UniqueName="EditCommandColumn1">
                            </EditColumn>
                        </EditFormSettings>
                    </MasterTableView>
                    <ClientSettings AllowDragToGroup="True">
                        <Selecting AllowRowSelect="True"/>
                    </ClientSettings>
</telerik:RadGrid>

Open in new window

Gurvinder Pal Singh

what is the id of the cell you want to get the value of? or atleast how do you identify that cell from other cells of that row?

NursingCorp

ASKER

The name of the cell is "BookingID"

In the example code I have three columns; The select column which has a checkbox in it to allow for selecting multiple rows, BookingId, and CustomerName.

When the row is selected using the first column, I need to retrive the value of the BookingID column.

chaitu chaitu

can you post the source code of the HTML?

NursingCorp

ASKER

It's in the code of the original post (under where it says ///Grid////).

It's an .aspx page, and the code is the grid. Because it's a module in DotNetNuke, there is no actual page code like <body></body> it's all just ASP.

Gurvinder Pal Singh

If the id of the cell is "BookingId", then
document.getElementById("BookingId").innerHTML will give you the value of cell

NursingCorp

ASKER

Except that the BookingID is a cell in the RadGrid and I'm using DotNetNuke, so I can't just simply use "getElementById" because

a) the element is embedded in the RadGrid, so I have to get the RadGrid control id and then find only the BookingID of the selected rows (which I'm not sure I'm doing at all because all i get back is null or undefined)
b) DotNetNuke prepends teh name of the controls on the page with "dnn_ctl_ModuleID_ControlName" where the ModuleID is the unique identifier of the module as assigned by DotNetNuke during installation and the ControlName is the name of the control as defined by the user during module creation

I wish it was that simple.

StealthyDev

@NursingCorp: please open the page in browser and send us the HTML (browser-view-source)

Regards

NursingCorp

ASKER

You're going to have to sift through all the junk in here to find the code you're looking for, but here it is!

NursingCorp

ASKER

Doesn't look like it added it.....Here it is an an attachment.
ViewSource

NursingCorp

ASKER

Look for the following to see the start of the module itself:

div class="c_content"

NursingCorp

ASKER

nothing huh?

leakim971

In the following sample, which cell are you calling BookingID ?

So, the user click on the checkbox and you want to call immediatly a javascript function like : openRadWindow(thebookingID)
Right ?

<tr class="rgRow" id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00__0">
    <td><input id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_columnSelectCheckBox" type="checkbox" name="dnn$ctr423$listPerDiem$perDiemBookingsRadGrid$ctl00$ctl04$columnSelectCheckBox" /></td>
    <td align="left" style="width:200px;"><a href="#" onclick="openRadWindow('1'); return false;">New Customer</a><br /><span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_CustomerPhoneLabel">(480) 478-8765</span></td>
    <td align="center" style="width:150px;">
        <a href="#" onclick="openEmpRadWindow('0'); return false;">Facility Need</a> &nbsp;
        <span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_employeeHoursLabel" title="No Confirmed Hours this week" style="color: #404040;">0 hrs</span>
        <br />
        <span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_employeePhoneLabel"></span>
    </td>
    <td align="center" style="width:25px;">CNA</td><td align="center" style="width:75px;"><span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_statusLabel" class="cssJobOrder">Per-Diem Job Order</span></td>
    <td align="center" style="width:75px;">Days12</td>
    <td align="center" style="width:75px;">06/23/2010</td>
    <td align="center" style="width:75px;">Burn</td>
</tr>

Open in new window

NursingCorp

ASKER

I don't know why it's not showing in the rendered page, it might be saved in viewstate or something becaue it is the dataKeyItem for the grid row. You can see it here in the image, it's just a column called BookingID.

gridView.jpg

NursingCorp

ASKER

I meant "DataKeyName" not datKeyItem. You can see it here listed in the grid code:

I took out the visible="False" and the ViewOnly="True" and it's still not showing up in the page when I view source.

<MasterTableView DataSourceID="perDiemBookingsSqlDataSource" DataKeyNames="BookingID" CommandItemDisplay="Top">
                        ...
                        ...
                        ...
<telerik:GridBoundColumn DataField="BookingID" UniqueName="BookingID" DataType="System.Int32"
      HeaderText="BookingID" SortExpression="BookingID" Visible="True">
                            </telerik:GridBoundColumn>

Open in new window

NursingCorp

ASKER

Okay, you got me thinking now and you're right...if it doesn't show up client side, I can't do anything with it client side!! Thank you for being patient with me, I know there were probably a few choice things you wanted to say!

So...

I removed the gridBoundColumn and replaced it with a TemplatedColumn since those seem to be showing up client side and now I have the BookingIDLabel showing up client side (see rendered page output).

What I need to do with it then, is iterate through the currently selected items and return a comma separated value to pass to a window but not immediately, only on the click of the commanditem link.

It would be the "id" toward the end of the following:
window.radopen("/Default.aspx?tabid=" + tab + "&ctl=multiEdit&mid=" + mid + "&BIDs=" + id, "RadWindow3");

<tr class="rgRow" id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00__0">
<td><input id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_columnSelectCheckBox" type="checkbox" name="dnn$ctr423$listPerDiem$perDiemBookingsRadGrid$ctl00$ctl04$columnSelectCheckBox" /></td><td>
    <span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_BookingIDLabel">13</span>
</td><td align="left" style="width:200px;">
    <a href="#" onclick="openRadWindow('1'); return false;">New Customer</a><br />
    <span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_CustomerPhoneLabel">(480) 478-8765</span>
</td><td align="center" style="width:150px;">
    <a href="#" onclick="openEmpRadWindow('0'); return false;">Facility Need</a> &nbsp;<span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_employeeHoursLabel" 
title="No Confirmed Hours this week" style="color: #404040;">0 hrs</span><br />
    <span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_employeePhoneLabel"></span>
</td><td align="center" style="width:25px;">LPN</td><td align="center" style="width:75px;">
    <span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_statusLabel" class="cssJobOrder">Per-Diem Job Order</span>
</td><td align="center" style="width:75px;">Days8     </td><td align="center" style="width:75px;">06/25/2010</td><td align="center" style="width:75px;">Clinic</td>
	</tr>

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

for IE compatibility :

(you need to set an id for the div with the class c_content : < div class="c_content" id="c_content" > )

<script language="javascript">
	function openRadWindow() {
		var id = "";
		var c_content = document.getElementById("c_content");
		var table = c_content.getElementsByTagName("table")[0];
		var rows = table.getElementsByTagName("tr");
		for(var i=0;i<rows.length;i++) {
			var checkbox = rows[i].cells(0).childNodes[0];
			var BookingID = rows[i].getElementsByTagName("span")[0].innerHTML;
			if(checkbox.checked) {
				if(id.length>0) {
					id += "," + BookingID; 
				}
				else {
					id += BookingID; 
				}
			}
		}
		alert('window.radopen("/Default.aspx?tabid=" + tab + "&ctl=multiEdit&mid=" + mid + "&BIDs="' + id + ', "RadWindow3");');
		//if(id.length>0) {
			//window.radopen("/Default.aspx?tabid=" + tab + "&ctl=multiEdit&mid=" + mid + "&BIDs=" + id, "RadWindow3");
		//}
	}
</script>

Open in new window

leakim971

test page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript">
	function openRadWindow() {
		var id = "";
		var c_content = document.getElementById("c_content");
		var table = c_content.getElementsByTagName("table")[0];
		var rows = table.getElementsByTagName("tr");
		for(var i=0;i<rows.length;i++) {
			var checkbox = rows[i].cells(0).childNodes[0];
			var BookingID = rows[i].getElementsByTagName("span")[0].innerHTML;
			if(checkbox.checked) {
				if(id.length>0) {
					id += "," + BookingID; 
				}
				else {
					id += BookingID; 
				}
			}
		}
		alert('window.radopen("/Default.aspx?tabid=" + tab + "&ctl=multiEdit&mid=" + mid + "&BIDs="' + id + ', "RadWindow3");');
		//if(id.length>0) {
			//window.radopen("/Default.aspx?tabid=" + tab + "&ctl=multiEdit&mid=" + mid + "&BIDs=" + id, "RadWindow3");
		//}
	}
</script>
</head>
<body>
<div class="c_content" id="c_content">
<table>
<tr class="rgRow" id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00__0">
<td><input id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_columnSelectCheckBox" type="checkbox" name="dnn$ctr423$listPerDiem$perDiemBookingsRadGrid$ctl00$ctl04$columnSelectCheckBox" /></td><td>
    <span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_BookingIDLabel">13</span>
</td><td align="left" style="width:200px;">
    <a href="#" onclick="openRadWindow('1'); return false;">New Customer</a><br />
    <span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_CustomerPhoneLabel">(480) 478-8765</span>
</td><td align="center" style="width:150px;">
    <a href="#" onclick="openEmpRadWindow('0'); return false;">Facility Need</a> &nbsp;<span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_employeeHoursLabel" 
title="No Confirmed Hours this week" style="color: #404040;">0 hrs</span><br />
    <span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_employeePhoneLabel"></span>
</td><td align="center" style="width:25px;">LPN</td><td align="center" style="width:75px;">
    <span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_statusLabel" class="cssJobOrder">Per-Diem Job Order</span>
</td><td align="center" style="width:75px;">Days8     </td><td align="center" style="width:75px;">06/25/2010</td><td align="center" style="width:75px;">Clinic</td>
	</tr>
<tr class="rgRow" id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00__0">
<td><input id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_columnSelectCheckBox" type="checkbox" name="dnn$ctr423$listPerDiem$perDiemBookingsRadGrid$ctl00$ctl04$columnSelectCheckBox" /></td>
<td>
    <span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_BookingIDLabel">15</span>
</td>
<td align="left" style="width:200px;">
    <a href="#" onclick="openRadWindow('1'); return false;">New Customer</a><br />
    <span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_CustomerPhoneLabel">(480) 478-8765</span>
</td><td align="center" style="width:150px;">
    <a href="#" onclick="openEmpRadWindow('0'); return false;">Facility Need</a> &nbsp;<span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_employeeHoursLabel" 
title="No Confirmed Hours this week" style="color: #404040;">0 hrs</span><br />
    <span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_employeePhoneLabel"></span>
</td><td align="center" style="width:25px;">LPN</td><td align="center" style="width:75px;">
    <span id="dnn_ctr423_listPerDiem_perDiemBookingsRadGrid_ctl00_ctl04_statusLabel" class="cssJobOrder">Per-Diem Job Order</span>
</td><td align="center" style="width:75px;">Days8     </td><td align="center" style="width:75px;">06/25/2010</td><td align="center" style="width:75px;">Clinic</td>
	</tr>
</table>
</div>
<br />
<input type="button" onclick="openRadWindow();" value="commanditem link" />
</body>
</html>

Open in new window

NursingCorp

ASKER

If I wasn't using DotNetNuke this would work, but getElementById does not work in DNN to find a control name because the control names change based ont he page the control is put on and the skin applied to the site has control of the divs so I don't want to have to go into every skin that is in use or the skins used int he fiture and make sure they are applying a custom div name. Also, there are a ton of tables on the page, there's no way I can find the correct one by looking for "table".

Thanks for taking the time to put the code together. I'll see if I can figure out how to work it using your example and the code that I originally posted that will find the grid on the page.

leakim971

>but getElementById does not work in DNN to find a control name because the control names change based ont he page the control is put on and the skin applied to the site has control of the divs

replace : document.getElementById("c_content")
By : document.getElementById("<%= c_content.ClientID %>")

NursingCorp

ASKER

And how do I get around all the tables that are in the content Div?

var table = c_content.getElementsByTagName("table")[0];
var rows = table.getElementsByTagName("tr");

The RadGrid is dynamically created as well, I don't have control of the name of the table, so I can't give it an ID to find it by.

leakim971

>The RadGrid is dynamically created as well, I don't have control of the name of the table

c_content.getElementsByTagName("table")[0]; don't use the name or the id of the table but the tag itself.

>And how do I get around all the tables that are in the content Div

If you have more than one table we can use a loop to process all the tables :

var tables = c_content.getElementsByTagName("table");
for(var t=0;tables.length;t++) {
var table = tables[i];
var rows = table.getElementsByTagName("tr");
....

NursingCorp

ASKER

I got it, thank you, I couldn't have done it witout your help!

function GetSelectedNames() {
    var id = "";
    var tab = gup('TabID')
    var mid = gup('mid').replace(/#/, '')
    var grid = $find("<%=perDiemBookingsRadGrid.ClientID %>");
    var MasterTable = grid.get_masterTableView();
    var selectedRows = MasterTable.get_selectedItems();
    for (var i = 0; i < selectedRows.length; i++) {
         var row = selectedRows[i];
         var cell = MasterTable.getCellByColumnUniqueName(row, "BookingID")
            if (id.length > 0) {
               id += "," + cell.innerText.replace(' ', '');
                 }
                else {
                 id += cell.innerText.replace(' ', '');
                  }
                }
         window.radopen("/Default.aspx?TabID=" + tab + "&ctl=multiEdit&mid=" + mid + "&BIDs=" + id, "RadWindow3");
            }

Open in new window

NursingCorp

ASKER

I needed help with getting the valies specifically in DotNetNuke and the solution did not have that information, I have to revert back to other code to help with this.