Obtain the associated Id for RadRating on RadGrid from JavaScript

[Milton]

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>

[Milton]

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();
}

[Viktor Tachev]

Hello Milton,

In order to get reference of the GridDataItem client-side you can use the OnClientRating handler. It would look similar to the one below:

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

}

Give the approach a try and let me know how it works for you.

Regards,
Viktor Tachev
Telerik