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

[Joseph]

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 week!

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" when I try to get the value of a cell in the selected rows.

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:

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 + &BIDs=" + id, "RadWindow3");
        }

<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>

[Pavel]

Hi Joseph,

You need to add the DataField to the ClientDataKeyNames array of the master table as explained here:
http://www.telerik.com/help/aspnet-ajax/grdextractkeyvaluesclientside.html

Sincerely yours,
Pavel
the Telerik team

[Joseph]

I took another approach and disabled the edit ability of the RadGrid and got rid of the Visible="False"> attribute. Then created an "invisible" style and hid the column client side.

.invisible {display:none}

This gave me access to the data using javascript. 

Then I used the following code to iterate through the selected items and open them up in the RadWindow that has the edit form in it. 

     function GetSelectedItems() {
            var id = "";
            var tab = gup('TabID')
            if (tab == "") 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")
                //here cell.innerHTML holds the value of the cell
                if (id.length > 0) {
                    id += "," + cell.innerText.replace(' ', '');
                }
                else {
                    id += cell.innerText.replace(' ', '');
                }
            }
            //alert("Cell Value: " + id);
            var oWnd = $find("<%= RadWindow3.ClientID %>");
            oWnd.setUrl("/Default.aspx?TabID=" + tab + "&ctl=multiEdit&mid=" + mid + "&SkinSrc=[G]Skins/Blue-NCPP/Plain&BIDs=" + id, "RadWindow3");
            oWnd.show();
        }

     
And in the RadGrid CommandItemTemplate:

<a href="#" onclick="GetSelectedItems(); return false"
visible='<%# perDiemBookingsRadGrid.EditIndexes.Count = 0 %>'>
     <asp:Image ID="Image1" runat="server" AlternateText=""
          Style="border: 0px; vertical-align: middle;"
          ImageUrl="/images/edit.gif" />Edit Selected Bookings</a>

And the column itself with the "invisible" style:

<telerik:GridBoundColumn DataField="BookingID" UniqueName="BookingID" DataType="System.Int32"
HeaderText="BookingID" ReadOnly="true" SortExpression="BookingID"
ItemStyle-CssClass="invisible" FooterStyle-CssClass="invisible" HeaderStyle-CssClass="invisible">
</telerik:GridBoundColumn>

Thanks for getting back to me. I will have to try your approach next time, I'm sure it will save me some time.

[Jorge]

Hi joseph, i am seeing that you are interested in telerik, i install it and tried fo 2 days and i understand that it is the worst idea when i downloaded the trial version. i was looking for a way to select a value of a cell from a rad grid, a code like Gridview1.SelectedRow.Cells.Item(0).Text but this simply code do not exist in telerik.
I lost the competence with telerik they are too smart for me. And i found devexpress and this is a very simply way to build code. I recommend you, it is easy, the demos in the web page are easy to understand them.
In other ways it is far better than telerik.
Chao

[Pavlina]

Hello Jorge,

To get cell value you can handle OnSelectedIndexChanged server-side event, set EnablePostBackOnRowClick property to true in order the event to fire:

<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid_NeedDataSource" OnSelectedIndexChanged="RadGrid1_SelectedIndexChanged">
   <ClientSettings EnablePostBackOnRowClick="true">
      <Selecting AllowRowSelect="true" />
   </ClientSettings>
   .........................

and get the selected cell text of the desired column using column UniqueName property as shown below:

protected void RadGrid1_SelectedIndexChanged(object sender, EventArgs e)
  {
  Response.Write("Cell value for the selected row : "
  + (RadGrid1.SelectedItems[0] as GridDataItem)["ColumnUniqueName"].Text + "<br>");
  }

Give it a try and let me know if you need additional assistance.

Regards,
Pavlina
Telerik