Reducing filter options in RadGrid

13 posts, 1 answers
  1. Amir
    Amir avatar
    4 posts
    Member since:
    Aug 2008

    Posted 19 Aug 2008 Link to this post

    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


       <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

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Aug 2008 Link to this post

    Hi Amir,

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

    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Amir
    Amir avatar
    4 posts
    Member since:
    Aug 2008

    Posted 20 Aug 2008 Link to this post

    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.

  5. Answer
    Pavel
    Admin
    Pavel avatar
    904 posts

    Posted 21 Aug 2008 Link to this post

    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.
  6. Amir
    Amir avatar
    4 posts
    Member since:
    Aug 2008

    Posted 21 Aug 2008 Link to this post

    Hi Pavel,

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

    Regards,
  7. StevenJ
    StevenJ avatar
    7 posts
    Member since:
    Sep 2005

    Posted 28 Aug 2008 Link to this post

    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.
  8. Amir
    Amir avatar
    4 posts
    Member since:
    Aug 2008

    Posted 28 Aug 2008 Link to this post

    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,
  9. StevenJ
    StevenJ avatar
    7 posts
    Member since:
    Sep 2005

    Posted 02 Sep 2008 Link to this post

    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.
  10. StevenJ
    StevenJ avatar
    7 posts
    Member since:
    Sep 2005

    Posted 02 Sep 2008 Link to this post

    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++;    
                   }
               }    
                    
           } 

  11. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 03 Sep 2008 Link to this post

    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.
  12. Paul Kavanagh
    Paul Kavanagh avatar
    25 posts
    Member since:
    Oct 2005

    Posted 01 Dec 2009 Link to this post

    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++;       
                   }  
                }          
            }   
  13. Paul Kavanagh
    Paul Kavanagh avatar
    25 posts
    Member since:
    Oct 2005

    Posted 01 Dec 2009 Link to this post

    Looking at it, the visibility reset should be moved to a function, probably could be optimized further, but you get the idea.
  14. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 02 Dec 2009 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017