Menu on click of cell item

[Het]

I am using a ASP.Net RAD Grid and in my grid I want to show a menu when I click on any item in the first column. First column is a template column where I am using a label.
I tried using the Rad Tool bar instead of label, but as I have too much data being populated in my grid, putting a Rad Tool bar is becoming too heavy.

Thanks in advance.

[Princy]

Hello Het,

You can try out the following code to achieve the required scenario.
aspx:

 <telerik:GridTemplateColumn UniqueName="Place" HeaderText="Place">
     <ItemTemplate>
            <asp:Label ID="Label1" runat="server" Text='<%#Bind("Place") %>'></asp:Label>
     </ItemTemplate>
 </telerik:GridTemplateColumn>

 <telerik:RadContextMenu ID="RadContextMenu1" runat="server">
    <Items>
        <telerik:RadMenuItem Text="Select">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Deselect">
        </telerik:RadMenuItem>
    </Items>
 </telerik:RadContextMenu>

cs:

protected void RadGrid2_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem dataitem = (GridDataItem)e.Item;
            dataitem ["PlaceTo"].Attributes.Add("onClick", "showMenu(event)");
        }
    }

Try out the code below which will help in showing the ContextMenu on ItemClick.
aspx:

<script type="text/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);
        }
</script>

Thanks
Princy.

[Het]

Princy,

Solution which you had sent is not working. Though my implementation is bit different here is what I am doing.

Aspx

<

telerik:GridTemplateColumn HeaderText="Item #" ItemStyle-Width="15%" HeaderStyle-Width="15%" ItemStyle-VerticalAlign="Top" ShowSortIcon="true" SortAscImageUrl="../MyAircraft/Images/SortAsc.gif" SortDescImageUrl="../MyAircraft/Images/SortDesc.gif" SortExpression="TaskNbr"><ItemTemplate><asp:Label ID="lblItemNbr" runat="server"></asp:Label></ItemTemplate>

CS

protected

void gd_ItemDataBound(object sender, GridItemEventArgs e)

{

GridItem gi = e.Item;

if (gi.ItemType == GridItemType.Item || gi.ItemType == GridItemType.AlternatingItem)

{

Label

Itemno = (Label)gi.FindControl("lblItemNbr");
Itemno.Attributes.Add("onClick", "ShowItemMenu(event)");
Itemno.Text = "somevalue"
}


Javascript

function

ShowItemMenu(e)

{

var contextMenu = $find("<%= TaskMenu.ClientID %>");

if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget)))

{

contextMenu.show(e);

}

$telerik.cancelRawEvent(e);

}

Telerik Context Menu
<telerik:RadContextMenu ID="TaskMenu" runat="server" Skin="Office2007">
<Items>
<telerik:RadMenuItem Text="Task details">
</telerik:RadMenuItem>
</Items>
</telerik:RadContextMenu>

Above code is not working, to be precise, it gives below error...

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

Please let me know if I am missing anything here...

Thanks,
Het

[Shinu]

Hi Het,

If you receive such an error you need to move the code block (i.e. <% ... %>) outside of the head tag. Go through the following help article to get more details regarding this error.
General Troubleshooting

Shinu

[Konstantin Petkov]

Hello Het,

You can wrap your JavaScript code in a RadCodeBlock control as explained here to resolve this error.

Kind regards,
Konstantin Petkov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Het]

Thanks Shinu,

I moved it out of Head tag and it worked fine.

I am now struggling to get id of the grid item (cell) which is clicked.
Say from the context menu, I am clicking the "Task Details" menu on ItemNbr label, I want to get that object ItemNbr which is clicked and other details from the row being clicked.

Thanks
Het

[Het]

Here is my code which I extended to get the text of the menuitem clicked, but I am not able to get the value of the item (label) which is clicked.

<

telerik:RadContextMenu ID="TaskMenu" runat="server" Skin="Office2007" OnClientItemClicked="MenuItemClick">

Javascript

function

MenuItemClick(sender, eventArgs)

{

 alert(eventArgs.get_item().get_value());

}

eventArgs.get_item().get_value() does give me the value of the context menu item I have clicked.

Thanks,
Het

[Peter]

Hi Het,

Can you open a support ticket and send us a small working project which we can test locally? This would be the best way to help you out quickly.


Peter
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Het]

Thanks Peter/Shinu,

Though I struggled a bit, but was able to get the details of the label I clicked and got the context menu dropped.

Here is the javascript for that and it covers both IE and Firefox

var

itemLabelId = "";

var itemLabelObj;

var contextMenu = $find("<%= TaskMenu.ClientID %>");

if(window.event)

{

if ((!e.fromElement) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.fromElement)))

{

itemLabelId = e.srcElement.id;

}

}

else

{

if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget)))

{

itemLabelId = e.target.id;

}

}

itemLabelObj = document.getElementById(itemLabelId);

contextMenu.show(e);
$telerik.cancelRawEvent(e);

But now I want the row with the clicked label to be on top of the grid.

Is there any property through which I can set any row at the top of the grid ?

Thanks,
Het