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

Reducing the filter menu options with Header Context Menu On

15 Answers 449 Views
Grid
This is a migrated thread and some comments may be shown as answers.
JohnH
Top achievements
Rank 1
JohnH asked on 01 Sep 2010, 03:03 PM
I am trying to reduce the number of items in the gridview filter menu.  I followed the approach on this page:

http://www.telerik.com/help/aspnet-ajax/grdreducingfiltermenuoptions.html

That approach works fine if you show the filter textbox for each column.  It does not work if you want to enable the context menu and filter context menu for each column by setting EnableHeaderContextMenu="true" EnableHeaderContextFilterMenu="true" on the RadGrid and setting IsFilterItemExpanded="false" on the MasterTableView.

Is there a way to reduct the filter menu options if you have the header context menu on?

15 Answers, 1 is accepted

Sort by
0
Radoslav
Telerik team
answered on 06 Sep 2010, 11:40 AM
Hi JohnH,

To achieve the desired functionality you could try getting the RadComboBox, which contains all filter functions, from the header filter menu and remove items from it. For example:
void HeaderContextMenu_ItemCreated(object sender, RadMenuEventArgs e)
{
     foreach (Control c in e.Item.Controls)
     {
         RadComboBox combo = c as RadComboBox;
         if (combo != null)
         {
             while (combo.Items.Count > 2)
             {
                combo.Items.Remove(combo.Items.Count-1);
             }
         }
     }
 }

Please give it try and let me know if it helps you.

Sincerely yours,
Radoslav
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
JohnH
Top achievements
Rank 1
answered on 07 Sep 2010, 03:21 PM
Radoslav,

That helped somewhat but I can't get a complete solution.  ItemCreated seems to only be firing twice, once for the first filter condition combobox (HCFMRCMBFirstCond) and once for the second filter condition combobox (HCFMRCMBSecondCond).  So using that code I can affect changes to the comboboxes.  But I would have expected that code to fire for both comboboxes for every column in the RadGrid.  Especially since int and string columns have different values in the filter context menu.  That must be happening in another event but I can't seem to figure out where.  For a complete solution I need to handle int and string columns differently since some of the options make no sense for a string column (like GreaterThanOrEqualTo).  Do you have any idea what event creates the different menu options based on the column's data type?  Cause it seems like in ItemCreated the 2 filter comboxes are created with 15 options for  a string column but the int columns only have nine options.  So that has to be happening somewhere else.

Thanks,
John
0
Radoslav
Telerik team
answered on 10 Sep 2010, 09:05 AM
Hi JohnH,

To achieve the desired functionality you could try using the following approach:

You could attach client side event handler to the ComboBox. OnClientDropDownOpening event:
void HeaderContextMenu_ItemCreated(object sender, RadMenuEventArgs e)
{
    foreach (Control c in e.Item.Controls)
    {
        RadComboBox combo = c as RadComboBox;
        if (combo != null)
        {
            combo.OnClientDropDownOpening = "function(){DropDownOpening('" + combo.ClientID + "')}";
         }
    }
}

Also you could handle the RadGrid.ClientSettings.ClientSideEvents.OnColumnContextMenu event and save the column type:
var columnType;
function OnColumnContextMenu(sender, eventArgs)
{
   columnType = eventArgs.get_gridColumn().get_dataType()
}

On client side DropDownOpening you could check the column type and insert or remove items from the combobox. For example:
function DropDownOpening(id)
{
   var combo = $find(id);
   var items = combo.get_itemData();
   switch (columnType)
   {
       case "System.DateTime":
       {
               ...
       }
       break;
       case "System.String":
       {
               ...
       }
       break;
             .....
       default:
       break;
    }
 }

Additionally please check out the following article which explains how to work with combobox's items on client side:
http://www.telerik.com/help/aspnet-ajax/combo_itemsclientside.html

Please give it try and let me know if it helps you.

Regards,
Radoslav
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
JohnH
Top achievements
Rank 1
answered on 20 Sep 2010, 03:16 PM
Radoslav,

That approach is not a good solution either.  I've got code working to parse the the items in the filter menu combobox but doing that in the DropDownOpening event is not going to work.  If there was an event that occurred when the combbox was initialized it might work.  As soon as you select an item from the combobox the underlying form disappears and the combobox list is left on the screen.  I suspect this is happening because you're editing the items at the same time it is opening.  Any other ideas?
 
0
Radoslav
Telerik team
answered on 23 Sep 2010, 12:49 PM
Hi JohnH,

On the server side is created only one context menu for all columns with two drop downs for filtering into it. Then depending of the column type some of the options are showed and others are hid. You could change the filter menu options for particular column only on the client with JavaScript.
I am sending you a simple example which demonstrates the desired functionality. Please check it out and let me know if it helps you.

Kind regards,
Radoslav
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
JJ
Top achievements
Rank 1
answered on 19 Jun 2012, 02:49 PM
I treid the attached example for reducing the header Context menu. But as long as I used

RadGrid1.HeaderContextMenu.ItemCreated +=

 

new RadMenuEventHandler(HeaderContextMenu_ItemCreated);

which invokes radcombo's OnClientDropDownOpening 


When try to select the filter from the header Context, the menu dispeared right away after click choose a filter item but before can clicking the "Filter", so I can not even filter anything. Why ??


Please help.
0
Radoslav
Telerik team
answered on 22 Jun 2012, 07:07 AM
Hello,

I noticed that you have opened several threads about the same issue. Please, refer to the support ticket post for additional information. To avoid duplicate posts, I suggest you continue the communication there.
Additionally I am pasting the answer here:
Could you please try using the following code snippet :
function DropDownOpening(id) {
            var combo = $find(id);
            var items = combo.get_itemData();
            switch (columnType) {
                case "System.DateTime":
                    {
                        disableItems(combo, "IsNull, NotIsNull, LessThan, GreaterThan");
                    }
                    break;
                case "System.String":
                    {
                    }
                    break;
                default:
                    break;
            }
            var height = $telerik.$(combo.get_dropDownElement()).find(".rcbList").height();
            $telerik.$(combo.get_dropDownElement()).find(".rcbWidth").height(height);
        }


Greetings,
Radoslav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Tom
Top achievements
Rank 1
answered on 03 Apr 2013, 04:01 AM
Any update on this? This solution is almost complete except that the FilterMenuContainer collapses before you can choose a filter. I've tried adding the two lines of code to extend the height of the drop down but that doesnt work...

Thank you!!!
0
Radoslav
Telerik team
answered on 04 Apr 2013, 06:09 AM
Hi Tom,

Could you please elaborate a bit more on your scenario? What do you try to achieve? Also could you please post your aspx page with the related code behind code. Thus we will be able to gather more details about your scenario and provide you with more to-the-point answer.
Additionally the provided code snippets from the JJ and my example attached into the previous post are custom approaches for manually customizing filter menu of the RadGrid, does your application make exactly the same? Also did you try the code provided into the example which I attached?

Looking forward for your reply.

All the best,
Radoslav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Tom
Top achievements
Rank 1
answered on 04 Apr 2013, 06:26 AM
My scenario is the same as JJ posted, namely, I want to be able to remove certain filter items (like 'IsNull', or 'IsNotNull') from the HeaderContextMenu Filter which is enabled by the RadGrid properties  EnableHeaderContextMenu="True" EnableHeaderContextFilterMenu="True"

The code in the previous posts was successful in removing these items from the list, however there is a new problem - when selecting from the Filter dropdownlist, the flyout/outer container (I believe it is labled as 'FilterMenuContainer') closes while I am still making my drop down selection. If I remove the code the flyout/container will remain open until I have moved my cursor away from the flyout/container area as expected.

I suggest you try your example code as I believe that exhibits the behavior I've just described. JJ experienced this as well. The two lines below you suggested in your most recent post did not correct it:

var height = $telerik.$(combo.get_dropDownElement()).find(".rcbList").height();
            $telerik.$(combo.get_dropDownElement()).find(".rcbWidth").height(height);

As for my code, I literally copied and pasted the related portions from the example. As JJ suggested the javascript is firing when the user selects the dropdown, not on init or earlier, so that in and of itself might cause problems with the dropdown and with the way the flyout/container registers that the cursor is not in a valid location to keep it open.

Please let me know if there is anything else to provide.

Thank you,

Tom




0
Radoslav
Telerik team
answered on 09 Apr 2013, 08:53 AM
Hello Tom,

To avoid the described issue you need to call DropDownOpening function on combo.OnClientDropDownOpened instead of on combo.OnClientDropDownOpening:
void HeaderContextMenu_ItemCreated(object sender, RadMenuEventArgs e)
    {
        foreach (Control c in e.Item.Controls)
        {
            RadComboBox combo = c as RadComboBox;
            if (combo != null)
            {
                combo.OnClientDropDownOpened = "function(){DropDownOpening('" + combo.ClientID + "')}";
            }
        }
    }
Additionally I am sending you the modified version of the example. Please check it out and let me know if it helps you.

Looking forward for your reply.

Regards,
Radoslav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Tom
Top achievements
Rank 1
answered on 09 Apr 2013, 05:29 PM
Hi Radoslav,

Thank you for the reply. This is better as the outside container does not close when the mouse is over the drop down choices, however the menu 'jumps' up the first time a drop down is chosen from the list - please see the attached screenshot. Again, this only happens the first time EACH dropdown menu (i.e. the top drop down filter choices and bottom drop down filter choices) are clicked, and after that all of the columns filters behave correctly. Can you look into this?

Thank you!

Tom
0
Radoslav
Telerik team
answered on 12 Apr 2013, 08:31 AM
Hi Tom,

I tried to reproduce the described issue on the example which I sent you with my previous post, but everything works as expected and the menu is positioned correctly. On the following link I attached a small vide which demonstrates how the example works on my side. Could you please send us a small runnable example which demonstrates it? You could open a formal support ticket from your Telerik account and attach a ZIP file there. Thus we will be able to debug the project and provide you with more to-the-point answer.

Looking forward for your reply.

Regards,
Radoslav
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Cyril Iselin
Top achievements
Rank 1
answered on 15 Aug 2013, 02:30 PM
I was running into the same issue, and found some "bug" in the javascript, here my corrections :

function DropDownOpening(id) {
                var combo = $find(id);
                switch (columnType) {
                    case "System.Double":
                        {
                            disableItems(combo, "EqualTo");
                        }
                        break;
                    default:
                        disableItems(combo, "");
                        break;
 
                }
                var height = $telerik.$(combo.get_dropDownElement()).find(".rcbList").height();
                $telerik.$(combo.get_dropDownElement()).find(".rcbWidth").height(height);
            }
 
 
            function disableItems(combo, itemsArray) {
                var items = combo.get_items();
                for (var i = 0; i < items.get_count() ; i++) {
                    if (items._array[i]._element.style.visibility == "hidden") {
                        items._array[i]._element.style.display = "block";
                        items._array[i]._element.style.visibility = "visible";
                    }
                }
 
                for (var j = 0; j < items.get_count() ; j++) {
                    if (itemsArray.indexOf(items._array[j]._element.innerHTML) > -1) {
                        items._array[j]._element.style.display = "none";
                        items._array[j]._element.style.visibility = "hidden";
                    }
                }
            }
0
Radoslav
Telerik team
answered on 20 Aug 2013, 06:53 AM
Hi Cyril,
 
Can you please elaborate a bit more on the described issue? I tried to reproduce any problems with the latest version of the RadControls but to no avail. I am sending you the example from the previous posts with updated RadControls dlls. With or without posted code snippet everything works as expected. Could you please check it out and let me know what differs in your case.

Looking forward for your reply.

Regards,
Radoslav
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Grid
Asked by
JohnH
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
JohnH
Top achievements
Rank 1
JJ
Top achievements
Rank 1
Tom
Top achievements
Rank 1
Cyril Iselin
Top achievements
Rank 1
Share this question
or