Obtain the associated Id for RadRating on RadGrid from JavaScript

Question

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>

Answer 1

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

}