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

custom Headercontextmenu for specific column

3 Answers 111 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Erik
Top achievements
Rank 1
Erik asked on 18 Oct 2011, 12:50 PM
Hello,

I'm looking for a way to create custom headercontextmenu's for some columns within a grid, and basically create a custom filter menu.
I've implemented most of the functionality as described in this article (http://www.telerik.com/help/aspnet-ajax/grid-header-context-menu.html) and it works fine, however the contextmenu is the same for all the columns, and i can't seem to figure out how to create a unique one for each column.

what i ultimatly want is a headercolumn context menu in the same fashion as an excel filter (see excelfilter.png), very similar to the way the default headercontextmenu implements the show/hide functionality.

can anyone point me in the right direction on how to do this?

thnx!

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 18 Oct 2011, 02:05 PM
Hello Erik,

You can try the following javascript in OnHeaderMenuShowing event to hide custom HeaderContextMenu for a  specific column.
JS:
function OnHeaderMenuShowing(sender, eventArgs)
{
   if (eventArgs.get_gridColumn().get_uniqueName() == "ColumnUniquename")
    {
  //hide the Clear sorting option from the header context menu
    eventArgs.get_menu().get_items().getItem(2).get_element().style.display = "none";
    }
}

Thanks,
Princy.
0
Erik
Top achievements
Rank 1
answered on 18 Oct 2011, 03:53 PM
Hello Princy

Thanks for your reply!
Hiding a contextmenu item was not exactly what i had in mind, however it gave me an idea on how to approach this.
I've extended the headercontextmenu with several submenu's using the prerendercomplete method, like this:

protected override void OnPreRenderComplete(EventArgs e)
        {
            RadContextMenu menu = dgDocuments.HeaderContextMenu; 
            RadMenuItem FormatItem = new RadMenuItem();
              
            foreach (GridColumn gridColumn in dgDocuments.MasterTableView.RenderColumns)
            {
                RadMenuItem FilterItem = new RadMenuItem();
                FilterItem.Text = "Value filters";
                FilterItem.Attributes["ColumnName"] = gridColumn.UniqueName;
                FilterItem.Attributes["TableID"] = dgDocuments.MasterTableView.ID;
                FilterItem.Visible = false;
  
                BuildColumnFilterMenu(FilterItem, gridColumn.UniqueName, (DataTable)dgDocuments.MasterTableView.DataSource);
  
                menu.Items.Add(FilterItem);
            }
              
            base.OnPreRenderComplete(e);
        }

by default the item visible property is set to false, and the columnname attribute is set to the current column name.
So when i now use the js script i should be able to match the clicked column name with the ColumnName attribute, and thus
modify its visibility:

function OnHeaderMenuShowing(sender, eventArgs) {
                    var colName = eventArgs.get_gridColumn().get_uniqueName();
                    var itemShow = eventArgs.get_menu().get_items();
  
                    for (var i = 0; i < itemShow.get_count(); i++) {
                        var attr= itemShow.getItem(i).get_attributes();
                        if (attr[0] != null) {
                            if (attr[0] == colName) {
                                itemShow.getItem(i).get_element().style.display = "block";
                            
                        }
                    }
                }

As you might have guessed, the above javascript does not work; the ColumnName attribute is always empty for some reason, or im just to stupid to figure it out.. :)
So what i actually want with this js, is the exact oposite of what you suggested in your reply.
I hope this makes any sense, and that you know what im doing wrong .. ?

cheers!
0
Oliver Oswald
Top achievements
Rank 1
answered on 08 May 2012, 10:48 AM
Hi there,

at first, thanks for your javascript example @ Erik ... it pointed me in the right direction.
With a slightly modified version i got it working (hiding invalid items in the JS code):

JS Code: (executed on ItemShowing Event)
var currentColName = eventArgs.get_gridColumn().get_uniqueName();
var visibleItems = eventArgs.get_menu().get_items();
 
for (var i = 0; i < visibleItems.get_count(); i++) {
    var targetColName = visibleItems.getItem(i).get_attributes().getAttribute("ColumnName");
    var isHideable = visibleItems.getItem(i).get_attributes().getAttribute("Hideable");
 
    if (targetColName != currentColName && isHideable == "true") {
        visibleItems.getItem(i).hide();
    }
    else {
        visibleItems.getItem(i).show();
    }
}


C# Code: (set when MenuItem is created)
radmenuitem.Attributes["TableID"] = radgrid.UniqueID;
radmenuitem.Attributes["ColumnName"] = "Name";
radmenuitem.Attributes["Hideable"] = "true";


Greetings,
OIiver
Tags
Grid
Asked by
Erik
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Erik
Top achievements
Rank 1
Oliver Oswald
Top achievements
Rank 1
Share this question
or