[Solved] HELP: Problem with extracting data in row selection from a RadGrid with an itemtemplate (Client Side)

[Aram]

Hi,

what I'am trying to do is to simply extract data from the selected row in the grid on the client side. I've gone through most of the API material available and according to it everything should work.... But it does not...

My suspicion is that when using an item-template in the RadGrid the column data in the selected row is not available, is this correct? If so, how should I get it in Javascript then? Or have I completely missed something?

<telerik:RadScriptBlock id="RadScriptBlock1" runat="server">

<script language="javascript" type="text/javascript">

var grid;

function RowSelected(rowObject) {

//alert("ROWSEL");

alert(rowObject);

var selRow = this.GetCellByColumnUniqueName(rowObject, "Id");

alert(rowObject.KeyValues["Id"]);

//here selRow.innerHTML will hold the value for the selected row contact name

}

function GridCreated() {

grid = this;

}

</script>

</telerik:RadScriptBlock>

<input id="media_id" type="hidden" />

<telerik:RadGrid ID="RadGrid1" runat="server" AllowFilteringByColumn="True" GridLines="None"

OnSelectedIndexChanged="RadGrid1_SelectedIndexChanged" AutoGenerateColumns="False"

HorizontalAlign="Left" Width="380px">

<ClientSettings>

<Selecting AllowRowSelect="True" />

<ClientEvents OnGridCreated="GridCreated" OnRowSelected="RowSelected"></ClientEvents>

<Scrolling AllowScroll="True" UseStaticHeaders="True"></Scrolling>

</ClientSettings>

<PagerStyle Mode="NumericPages" />

<MasterTableView TableLayout="Fixed">

<ItemTemplate>

<asp:Image ID="Image1" Style="float: left;" Width="40px" Height="40px" ImageUrl='<%# Eval("ThumbnailURL") %>'

runat="server" AlternateText="" />

<span>&nbsp <b>Title:</b></span>

<%# Eval("Title")%><br />

<span>&nbsp <b>Type:</b></span>

<%# Eval("Type")%>

<br />

<span>&nbsp <b>Description:</b></span>

<%# Eval("Description")%>

</ItemTemplate>

<Columns>

<telerik:GridBoundColumn DataField="Title" HeaderText="Title" UniqueName="column1"

AutoPostBackOnFilter="True" FilterControlWidth="90px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Type" HeaderText="Type" UniqueName="column" AutoPostBackOnFilter="True"

FilterControlWidth="80px" Visible="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Description" HeaderText="Description" UniqueName="column2"

AutoPostBackOnFilter="True" FilterControlWidth="90px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Id" UniqueName="Id"

AutoPostBackOnFilter="True" Display="False" Visible="False">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

[Sebastian]

Hello Aram,

First, I would like to inform you that it is not meaningful to define declarative data columns in the grid when you utilize the global item template feature of the control (because the rows will be build in accordance with the item template definition).

I noticed that you mixed old javascript code from the ASP.NET version of RadGrid when using the ASP.NET AJAX version of the product. I would like to direct you to the following help topic and suggest you the following OnRowSelected handler modification for your particular case:

<script type="text/javascript">
 function RowSelected(sender, eventArgs)
 {
   var grid = sender;
   var MasterTable = grid.get_masterTableView();
   var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
   var contentCell = row.childNodes[0];

   for(var i = 0; i < contentCell.childNodes.length; i++)
   {
     if(contentCell.childNodes[i].tagName != "IMG" || contentCell.childNodes[i].tagName != "SPAN")
     {
         //output the data values
         alert(contentCell.childNodes[i].innerHTML);
     }
   }
 }
</script>

Best,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.