I'm using Telerik's ASP.NET AJAX libaries and I have a RadRating element for each row in a RadGrid, and need to get the associated Id for the row where the RadRating is being Rated (but with Javascript), however, the get_parent()
method is returning the grid reference and not the row.
How can I get the GridDataItem
of the row of the RadRating?
The following code works sometimes but not all the time. What am I doing wrong?
<script type="text/javascript">
(function(global,undefined) {
function OnClientRating(controlRating,args) {
var row = controlRating.get_parent();
var userId = row.getDataKeyValue("UserId");
}
global.OnClientRating = OnClientRating;
})(window);
</script>
<rad:RadGrid runat="server" ID="gridUsers" Skin="Hay"
EnableAJAX="False"
AutoGenerateColumns="False"
GridLines="Both"
Width="100%"
AllowSorting="True"
OnItemDataBound="Grid_ItemDataBound">
<MasterTableView DataKeyNames="UserId" ClientDataKeyNames="UserId">
<Columns>
<rad:GridTemplateColumn HeaderText="Name" HeaderStyle-Width="180px" ItemStyle-Width="180px">
<ItemTemplate>
<%# Eval("FullName")%>
</ItemTemplate>
</rad:GridTemplateColumn>
<rad:GridTemplateColumn HeaderText="Rating" HeaderStyle-Width="100px" ItemStyle-Width="100px">
<ItemTemplate>
<rad:RadRating ID="ratAppraiserRating" runat="server" ItemCount="5" Value='<%# Eval("AverageRating")%>'
SelectionMode="Continuous" Precision="Item" Orientation="Horizontal" OnClientRating="OnClientRating"
OnRate="RatRating_Rate" AutoPostBack="true" />
</ItemTemplate>
</rad:GridTemplateColumn>
</Columns>
</MasterTableView>
<ClientSettings>
<Scrolling UseStaticHeaders="false" ScrollHeight="240px" AllowScroll="true" />
<Selecting AllowRowSelect="false" />
<ClientEvents OnRowDblClick="selectRow" />
</ClientSettings>
</rad:RadGrid>
This is what I found. get_parent()
method does not return the row at all. What I was seeing was red herring. get_parent
returns the parent control which is the grid, then to find which rows it belongs I found two options:
1) Obtain the HTML element and go through the parent nodes until finding the rows and get the rowIndex
. And use that index to obtain the respective DataItem
from the grid.
var rowIndex = controlRating.get_element().parentNode.parentNode.rowIndex - 1;
2) Subscribe to the OnRowMouseOver
event of the grid, and keep a reference of the DataGridItem
, and use it when really needed.
var currentDataItem = undefined;
function onRowMouseOver(sender, eventArgs) {
currentDataItem = eventArgs.get_gridDataItem();
}
UPDATE: Telerik people suggest a third option
3)
function OnClientRating(sender, args) {
var parentTableView = sender.get_parent();
var rowID = $telerik.$(sender.get_element()).closest("tr")[0].id;
var rowIndex = rowID.split("__")[1];
var dataItem = parentTableView.get_dataItems()[rowIndex];
var someCellText = dataItem.get_cell("ColumnUniqueName").innerHTML;
// add custom logic here
}