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

Menu on click of cell item

8 Answers 116 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Het
Top achievements
Rank 1
Het asked on 18 Aug 2008, 01:31 PM

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.

8 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 19 Aug 2008, 06:40 AM
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.
0
Het
Top achievements
Rank 1
answered on 19 Aug 2008, 08:22 PM

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

0
Shinu
Top achievements
Rank 1
answered on 20 Aug 2008, 05:32 AM
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

0
Konstantin Petkov
Telerik team
answered on 20 Aug 2008, 06:06 AM
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.
0
Het
Top achievements
Rank 1
answered on 20 Aug 2008, 02:44 PM
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
0
Het
Top achievements
Rank 1
answered on 20 Aug 2008, 03:45 PM
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



0
Peter
Telerik team
answered on 22 Aug 2008, 03:20 PM
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.
0
Het
Top achievements
Rank 1
answered on 27 Aug 2008, 10:23 PM
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
Tags
Grid
Asked by
Het
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Het
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
Konstantin Petkov
Telerik team
Peter
Telerik team
Share this question
or