How to get the row index and tableview on click of image in grid

[Eirik H]

Hi there,

I have a two-level hierarchical grid with a mastertable and some detailtables. Each row in the detail tables has a column with an asp:Image that has an onclick event. The event opens a RadMenu as seen in the attached screenshot.

Here is the menu:

<Telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnClientItemClicked="OnMoveGroupClicked"
         EnableRoundedCorners="true" EnableShadows="true" AppendDataBoundItems="true" DataSourceID="MilestoneGroupsDS" DataFieldID="pk_miletonegroup_id" DataTextField="milestonegroup_name">
    <Items>
        <Telerik:RadMenuItem Text="Move to Group:" Enabled="false" />
    </Items>
</Telerik:RadContextMenu>

Here is the column:

<telerik:GridTemplateColumn UniqueName="move_to_group">
                    <ItemTemplate>
                        <asp:Image ID="MoveToGroupImg" runat="server" CssClass="cursor_hand" ToolTip="Click to move to another group" ImageUrl="~/Img/folder_arrow.png" onClick="showMenu(event)" />
                    </ItemTemplate>
</telerik:GridTemplateColumn>

And the javascript:

function showMenu(e) {
        var contextMenu = $find("<%= RadContextMenu1.ClientID %>");

        if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget)))
        {
            contextMenu.show(e);
        }

        $telerik.cancelRawEvent(e);
    }

Now, when the user clicks an item in the pop up menu I need to know the index of the row where the image was clicked and which detailtable it happened in. Anyone got an idea on how I could achieve that?

I've seen the example in http://www.telerik.com/community/code-library/aspnet-ajax/general/radmenu-as-context-menu-in-hierarchical-radgrid.aspx which uses the OnRowContextMenu event to store the needed data in two hidden fields, but that event isn't useful in my scenario. I've tried to use OnRowMouseOver instead, but the user might hover over other rows before clicking the menu so that wasn't very reliable:

function OnMoveGroupClicked(sender, args) {
        alert("clicked " + document.getElementById("radGridClickedRowIndex").value + " " + document.getElementById("radGridClickedTableId").value);
    }

    function OnRowMouseOver(sender, eventArgs) {
        document.getElementById("radGridClickedRowIndex").value = eventArgs.get_itemIndexHierarchical();
        var ownerTable = eventArgs.get_tableView();

        document.getElementById("radGridClickedTableId").value = ownerTable._data.UniqueID;
    }

<input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex">
<input type="hidden" id="radGridClickedTableId" name="radGridClickedTableId">

<input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex">
<input type="hidden" id="radGridClickedTableId" name="radGridClickedTableId">

[Eirik H]

No suggestions?

[Eirik H]

I found http://www.telerik.com/community/forums/aspnet-ajax/grid/cell-click-event-for-radgrid.aspx and was able to do what I wanted in a slightly different way. Some code for future reference:

Protected Sub MilestoneGrid_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles MilestoneGrid.ItemCreated
        If (e.Item.OwnerTableView.DataSourceID = "MilestoneDS") Then
'detail table
            If (TypeOf e.Item Is GridDataItem) Then
                Dim dataitem As GridDataItem = DirectCast(e.Item, GridDataItem)
                    dataitem("move_to_group").Attributes.Add("onclick", "MoveToGroupClicked('" + dataitem.ItemIndex.ToString + "','" + dataitem.OwnerTableView.UniqueID + "',event);")
                    dataitem("move_to_group").CssClass = "move_to_group"
            End If
        End If
    End Sub

.move_to_group {
    cursor: pointer;
    background: transparent url('Img/folder_arrow.png') no-repeat center center !important;
}

    function showMenu(e) {
        var contextMenu = $find("<%= RadContextMenu1.ClientID %>");

        if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget)))
        {
            contextMenu.show(e);
        }

        $telerik.cancelRawEvent(e);
    }

    function OnMoveGroupClicked(sender, args) {
        alert("clicked " + document.getElementById("radGridClickedRowIndex").value + " " + document.getElementById("radGridClickedTableId").value);
    }

    function MoveToGroupClicked(index, ownerTable,event) {
        document.getElementById("radGridClickedRowIndex").value = index;
        document.getElementById("radGridClickedTableId").value = ownerTable;
        showMenu(event);
    }