Obtain the associated Id for RadRating on RadGrid from JavaScript

3 posts, 1 answers
  1. Milton
    Milton avatar
    3 posts
    Member since:
    Apr 2013

    Posted 21 Dec 2015 Link to this post

    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;
    <rad:RadGrid runat="server" ID="gridUsers" Skin="Hay"
        <MasterTableView DataKeyNames="UserId" ClientDataKeyNames="UserId">
                <rad:GridTemplateColumn HeaderText="Name" HeaderStyle-Width="180px" ItemStyle-Width="180px">
                        <%# Eval("FullName")%>
                <rad:GridTemplateColumn HeaderText="Rating" HeaderStyle-Width="100px" ItemStyle-Width="100px">
                        <rad:RadRating ID="ratAppraiserRating" runat="server" ItemCount="5" Value='<%# Eval("AverageRating")%>'
                            SelectionMode="Continuous" Precision="Item" Orientation="Horizontal" OnClientRating="OnClientRating"
                            OnRate="RatRating_Rate" AutoPostBack="true" />
            <Scrolling UseStaticHeaders="false" ScrollHeight="240px"  AllowScroll="true"  />
            <Selecting AllowRowSelect="false" />
            <ClientEvents OnRowDblClick="selectRow" />

  2. Milton
    Milton avatar
    3 posts
    Member since:
    Apr 2013

    Posted 22 Dec 2015 in reply to Milton Link to this post

    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();
  3. Answer
    Viktor Tachev
    Viktor Tachev avatar
    1906 posts

    Posted 24 Dec 2015 Link to this post

    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.

    Viktor Tachev
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top