Radgrid Context Menu on a button

With a Telerik RadGrid, the right-click context menu is not obvious to my users, so I needed to add a button that will perform the same function.

Unfortunately this isn’t a feature built into the RadGrid, and it took me a large amount of trial and error to get working.

Here’s what it looks like:

And here’s how to do it:

1. Add the following javascript to the script section of your page:

function showMenu(event, columnName) {
                var RadGrid = $find("<%=RadGrid1.ClientID %>");
                var gridId = RadGrid.get_id();
                var columns = $find(gridId).get_masterTableView().get_columns();
                for (var i = 0, length = columns.length; i < 1; i++) {
                    if (columns[i].get_uniqueName() == columnName) {
                        columns[i].showHeaderMenu(event, 75, 20);
                    }
                }
            }

2. Ensure you have an “OnItemDatabound” event for your RadGrid

3. In your “OnItemDatabound”, place the following code:

if (e.Item is GridHeaderItem)
            {
                ImageButton button = new ImageButton();
                button.ID = "ContextButton";
                button.Style.Add("padding-left", "5px");
                button.AlternateText = "ContextButton";
                button.ImageUrl = "../Images/Icons/contextMenu.png";
                button.OnClientClick = "showMenu(event, \"FullName\"); return false;";
                e.Item.Cells[2].Controls.Add(button);
            }

Where I have the “FullName” listed, replace that with an actual column name in your grid.

Now your button should show up in HeaderCell 2 (which for me was my first column) and operate exactly the same as the Right-Click context menu.