Reducing filter options in RadGrid

[Amir]

I want to reduce/hide a few filter options in rad grid (Version 5.1.2.0) . The options to hide are different for different columns. So to do this I am using client side java script as mentioned in the forums. I am using Telerik Q3 2007. but as it seems its not working at all for me. I am following the tutorial in telerik website Reducing the filter menu options

<ClientSettings>
    <ClientEvents OnFilterMenuShowing="filterMenuShowing" />
</ClientSettings>

   <script type="text/javascript" language="javascript">

        function filterMenushowing(sender, eventArgs)
        {
            if (eventArgs.get_column().get_uniqueName() == "unique_invoice_no")
            {
                var menu = eventArgs.get_menu();
                var items = menu._itemData;

                var i = 0;
                while (i < items.length)
                {
                    if (items[i].value != "NoFilter" && items[i].value != "EqualTo")
                    {
                        var item = menu._findItemByValue(items[i].value);
                        if (item != null)
                            item._element.style.display="none";
                    }
                    i++;
                }
            }
        }
    </script>

My problem is that eventArgs.get_column().get_uniqueName() and eventArgs.get_menu() are always undefined. I have also tried the following code snippet, which I found in the online help documents, but nothing is happening. Now with this code, I get the menu and all the filter items in the menu, but don't know how to get the menu item and how to hide that item.

<ClientSettings>
    <ClientEvents OnFilterMenuShowing="filterMenuShowing" />
</ClientSettings>

<script type="text/javascript" language="javascript">

function filterMenuShowing(sender, eventArgs)

{

if (eventArgs.Column.UniqueName == "Name")

{

var menu = eventArgs.Menu;

var items = menu.Items;

var i = 0;

while (i < items.length)

{

if (items[i].Value != "NoFilter" && items[i].Value != "EqualTo")

{

/* what to write here to hide the menu items */

}

i++;

}

}

}

</script>

Any help would be appreciated

[Shinu]

Hi Amir,

Can you try  with the approach mentioned in the following help article?
Reducing the filter menu options

Shinu.

[Amir]

Hi Shinu,

Thanks for the reply, but server side approch would reduce the filter options for all columns. What I'm trying to do is to remove some of the options for some of the columns in my grid, which I don't think is possible using the server side code.

[Pavel]

Hello Amir,

For the classic Grid the javascript should look like this:

<script type="text/javascript" language="javascript">
function FilterMenuShowing(sender, eventArgs)
{
    if (eventArgs.Column.UniqueName == "ProductName")
       {
           var menu = eventArgs.Menu;
           var items = menu.ItemData;

           var i = 0;

           while (i < items.length)
           {
               if (items[i].Value != "NoFilter" && items[i].Value != "EqualTo")
               {
                   menu.Items[i].Control.style.display="none";
               }
               i++;
           }
       }
}
</script>

A runnable sample is attached for reference. Hope this helps.

Kind regards,
Pavel
the Telerik team

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

[Amir]

Hi Pavel,

Thank you so much for your help. Its working fine now.

Regards,

[StevenJ]

Hi Amir,

This is exactly what I was looking for, however this does not appear to work in RadControls for ASP.NET AJAX, the eventArgs.Column does not exist.  Am I missing something?  Also, where is the eventArgs documented.  I can't find it in the help file.

[Amir]

Hi Steven,

Have you read through this help document Reducing filter options in RadGrid. I am not really sure of what version of RadGrid you are using, however the code suggested in this thread is for classic RadGrid as mentioned by Pavel, so if you are using newer versions then this probably won't work for you. Try eventArgs.get_column().get_uniqueName()

Regards,

[StevenJ]

Thanks,

The link that was provided for doing this refers to the RadControls for ASP.NET AJAX.  That is the correct version.   I was already heading down this path.   I'm looking for some additional documentation on the Client programming for the controls.  Specifically information about the event args that are passed by various client events.

Thanks for your help.

[StevenJ]

One more thing on this issue.  I used the sample that was noted above and found an issue with the code.   The problem is that once you have modified the display of the columns, and then you try to select another column, then the list of options remains, even if the column chosen is not the column being modified.   I fixed the issue by re-enabling the items when the column that I am modifying is not selected.  Here's the code:

       function FilterMenuShowing(sender, eventArgs)  
       {    
           if (eventArgs.get_column().get_uniqueName() == "IsPostable")     
           {             
               var menu = eventArgs.get_menu();  
               var items = menu._itemData;  
 
               var i = 0;  

               while (i < items.length)    
               {    
                   if (items[i].value != "NoFilter" && items[i].value != "EqualTo" && items[i].value != "NotEqualTo")    
                   {    
                       var item = menu._findItemByValue(items[i].value);  
                       if (item != null)  
                           item._element.style.display="none";  
                   }    
                   i++;    
               }
           }
           else
           {
               var menu = eventArgs.get_menu();  
               var items = menu._itemData;  
 
               var i = 0;
               while (i < items.length)    
               {    
                   var item = menu._findItemByValue(items[i].value);  
                   if (item != null)  
                       item._element.style.display="";  
                   i++;    
               }
           }    
                
       } 

[Sebastian]

Hi Steven,

You are absolutely right - thank you for the valuable feedback the code snippets provided! I updated your Telerik points as a token of gratitude. Note that the help article will be updated accordingly for the next version of the product documentation.

Best regards,
Stephen
the Telerik team

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

[Paul Kavanagh]

I have an addition to this code example. I found that there is also a problem if you want to have custom columns on more than one column. For instance, I have two columns where I want only 4 filter choices (they are alpha), and one column that I want to have 6 choices.

I did this:

 function filterMenushowing(sender, eventArgs)
        {
            // first column - string column, but mostly number data, so client wants
            // < and > filtering enabled.

            if (eventArgs.get_column().get_uniqueName() == "SoftwareCode")
            {

                var menu = eventArgs.get_menu();
                var items = menu._itemData;

                var i = 0;
                // we are resetting visibility of all filter menu items, in case the ones
                // we want were hidden
                while (i < items.length)
               {
                   var item = menu._findItemByValue(items[i].value);
                   if (item != null)
                       item._element.style.display="";
                   i++;
               }

                i = 0;
                // now we go back and hide any we don't want
                while (i < items.length)
                {
                    if (items[i].value != "NoFilter" && items[i].value != "Contains" && items[i].value != "StartsWith" && items[i].value != "EndsWith"  && items[i].value != "LessThan"  && items[i].value != "GreaterThan" && items[i].value != "EqualTo")
                    {
                        var item = menu._findItemByValue(items[i].value);
                        if (item != null)
                            item._element.style.display="none";
                    }
                    i++;
                }
            }
            // Our second criteria, there are two other columns we want specific filters for.
            else if (eventArgs.get_column().get_uniqueName() == "Title"||eventArgs.get_column().get_uniqueName() == "Abbrev")
            {

                var menu = eventArgs.get_menu();
                var items = menu._itemData;

                var i = 0;
                // we are resetting visibility of all filter menu items, in case the ones
                // we want were hidden
                 while (i < items.length)
               {
                   var item = menu._findItemByValue(items[i].value);
                   if (item != null)
                       item._element.style.display="";
                   i++;
               }

                i = 0;
                // now we go back and hide any we don't want
                while (i < items.length)
                {
                    if (items[i].value != "NoFilter" && items[i].value != "Contains" && items[i].value != "StartsWith" && items[i].value != "EndsWith" && items[i].value != "EqualTo")
                    {
                        var item = menu._findItemByValue(items[i].value);
                        if (item != null)
                            item._element.style.display="none";
                    }
                    i++;
                }
            }
            // Finally, any other columns, we reset to show all filter items
            else
            {
                var menu = eventArgs.get_menu();
                var items = menu._itemData;

                var i = 0;
                 while (i < items.length)
               {
                   var item = menu._findItemByValue(items[i].value);
                   if (item != null)
                       item._element.style.display="";
                   i++;
               }
            }
        }

[Paul Kavanagh]

Looking at it, the visibility reset should be moved to a function, probably could be optimized further, but you get the idea.

[Sebastian]

Hi Paul,

Thank you for the feedback. Note that the code implementation in the documentation topic has been updated to work with all columns that have customized filter menu options. In addition, it already utilizes the client API of RadContextMenu. You can view it here.

Best regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[DogBizPro]

How can you do exactly this but for the column type vs column name?

[DogBizPro]

I was able to get this working for filtering the filter menu by datatype. The problem is after I click on the filter icon for any one column it messes up the others.......why?

[Attila Antal]

Hi Stephanie,

I've already replied to your query in your formal support ticket about the same matter. I suggest that we continue our technical conversation on the mentioned thread.

Also, I will paste the response here in case other developers find it useful, too:

By default, filtering options vary based on the DataType of each RadGrid column:

<telerik:GridDateTimeColumn ... DataType="System.DateTime">
<telerik:GridNumericColumn ... DataType="System.Decimal">
<telerik:GridBoundColumn ... DataType="System.String">

To further reduce these options, you can check out the Reduce the Filter Menu Options article which describes how this can be done using both client and server side programming.

For instance, below you can see how to access the DataType of the columns. 

<script type="text/javascript">
    ...
        if (column.get_dataType() == "System.String"){
            /* Apply the rest of the Logic */
        }
    ...
</script>

The code above will target all and only columns of same DataType, however, you can chose to target columns based on their UniqueName, or on columns that are either reorderable or resizable.
Here are some Public Properties you could use to access different columns.

Regards,
Attila
Progress Telerik

[DogBizPro]

Thanks. I already replied to the ticket on the issues. Things work fine for the FIRST time you click on a filter icon. Any subsequent clicks that open the filter menu do not display the specified items but what seems like 'random' options. I know they are not random but they are definitely not the items that are specified for that data type. 

Here is the code. What am I doing wront?

function FilterMenuShowing(sender, eventArgs) {

    var menu = eventArgs.get_menu();
    var items = menu._itemData;

    if (eventArgs.get_column().get_dataType() == "System.String") {
        var i = 0;
        while (i < items.length) {
            var item = menu._findItemByValue(items[i].value);

            item._element.style.display = "";

            if (items[i].value != "NoFilter" && items[i].value != "IsEmpty" &&
                items[i].value != "EqualTo" && items[i].value != "NotEqualTo" &&
                items[i].value != "StartsWith" && items[i].value != "EndsWith" &&
                items[i].value != "Contains" && items[i].value != "DoesNotContain") {
                if (item != null) {
                    item._element.style.display = "none";
                }
            }

            alert(eventArgs.get_column().get_uniqueName() + ":" + items[i].value + ":" + item._element.style.display);
            i++;
        }
    }
    else if (eventArgs.get_column().get_dataType() == "System.Decimal" || eventArgs.get_column().get_dataType() == "System.Int32") {
        var i = 0;
        while (i < items.length) {
            var item = menu._findItemByValue(items[i].value);

            item._element.style.display = "";

            if (items[i].value != "NoFilter" && items[i].value != "IsEmpty" &&
                items[i].value != "EqualTo" && items[i].value != "NotEqualTo" &&
                items[i].value != "GreaterThan" && items[i].value != "LessThan" &&
                items[i].value != "GreaterThanOrEqualTo" && items[i].value != "LessThanOrEqualTo" &&
                items[i].value != "Between" && items[i].value != "NotBetween") {
                if (item != null) {
                    item._element.style.display = "none";
                }
            }

            alert(eventArgs.get_column().get_uniqueName() + ":" + items[i].value + ":" + item._element.style.display);
            i++;
        }
    }
}