This is a migrated thread and some comments may be shown as answers.

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

2 Answers 141 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Eirik H
Top achievements
Rank 2
Eirik H asked on 16 Jun 2010, 04:13 PM
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"


2 Answers, 1 is accepted

Sort by
0
Eirik H
Top achievements
Rank 2
answered on 17 Jun 2010, 07:19 AM
No suggestions?
0
Eirik H
Top achievements
Rank 2
answered on 17 Jun 2010, 08:06 AM
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 ObjectByVal 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 { 
    cursorpointer
    backgroundtransparent 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); 
    } 
Tags
Grid
Asked by
Eirik H
Top achievements
Rank 2
Answers by
Eirik H
Top achievements
Rank 2
Share this question
or