Auto-Filtering on KeyUp

6 posts, 1 answers
  1. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 04 Jun 2009 Link to this post

    Requirements

    RadControls version

    2009.01.0311.20
    .NET version

    2.0
    Visual Studio version 2005
    programming language

    C#
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION

    The project demonstrates on how to filter a grid automatically on typing every single letter into the filter textbox. For this purpose an 'onkeyup' client event is added to the filter textbox wherein filtering is performed and the unique name of the currently filtered column is stored into a hidden field. The filter textbox of the current column is focused after a filtering has been performed and the cursor position in the textbox is set by adding an 'onfocus' client event to the filter textbox of that column.

    aspx:
     
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"
    <head > 
    <title>Untitled Page</title>  
       
    </head> 
    <body> 
        <form id="form1" runat="server"
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
            <div> 
             
            <input id="Hidden1" runat="server" name="Hidden1" type="hidden"/>  
     
           <telerik:RadGrid ID="RadGrid" runat="server" AutoGenerateColumns="true" AllowPaging="true" PageSize="10" AllowFilteringByColumn="True" DataSourceID="SqlDataSource1" OnItemDataBound="RadGrid_ItemDataBound" OnPreRender="RadGrid_PreRender"
              <MasterTableView>        
              </MasterTableView> 
            </telerik:RadGrid> 
             
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City], [PostalCode] FROM [Customers]"></asp:SqlDataSource>        
            
            </div> 
        </form>     
    </body> 
    </html> 

    c#:
     
    using System; 
    using System.Data; 
    using System.Configuration; 
    using System.Web; 
    using System.Web.Security; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
    using System.Web.UI.WebControls.WebParts; 
    using System.Web.UI.HtmlControls; 
    using Telerik.Web.UI; 
     
    public partial class _Default : System.Web.UI.Page  
        protected void Page_Load(object sender, EventArgs e) 
        { 
     
        } 
       
        protected void RadGrid_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e) 
        { 
            if (e.Item is GridFilteringItem) 
            { 
                GridFilteringItem filterItem = (GridFilteringItem)e.Item; 
                foreach (GridColumn col in RadGrid.MasterTableView.RenderColumns) 
                { 
                    if ((col.UniqueName != "ExpandColumn") && (col.UniqueName != "RowIndicator") ) 
                    { 
                         TextBox filtertxt = (TextBox)filterItem[col.UniqueName].Controls[0]; 
                         filtertxt.Attributes.Add("onkeyup""Filter('" + col.UniqueName + "','" + filtertxt.ClientID + "')");                        
     
                    } 
                } 
            }     
        } 
        protected void RadGrid_PreRender(object sender, EventArgs e) 
        { 
            if (Hidden1.Value != ""
            { 
                GridFilteringItem filter = (GridFilteringItem)RadGrid.MasterTableView.GetItems(GridItemType.FilteringItem)[0]; 
                TextBox txtfilter = (TextBox)filter[Hidden1.Value].Controls[0]; 
                txtfilter.Focus(); 
                txtfilter.Attributes.Add("onFocus""FocusFilter('" + txtfilter.ClientID + "');");           
            } 
        }     
            

    js:
     
    <script type="text/javascript">   
        function Filter(colName,filtertxt)  
            {  
                      
               var filterTxt = document.getElementById(filtertxt);  
               var MasterTable = $find("<%= RadGrid.ClientID %>").get_masterTableView();                  
                
               var hidden = document.getElementById('<%=Hidden1.ClientID %>');  
               hidden.value = colName;   
               
               if(filterTxt.value.length>0)  
               {                    
                   MasterTable.filter(colName, filterTxt.value, Telerik.Web.UI.GridFilterFunction.StartsWith);                   
               }  
               else  
               {  
                   MasterTable.filter(colName, filterTxt.value, Telerik.Web.UI.GridFilterFunction.NoFilter);             
               }            
            }  
              
         function FocusFilter(filter)  
            {         
              var input = document.getElementById(filter);    
              if (input.createTextRange)    
                {    
                    var FieldRange = input.createTextRange();    
                    FieldRange.moveStart('character', input.value.length);   
                    FieldRange.select();    
                }             
            }     
    </script>  

    Regards
    Princy.
  2. Answer
    Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 08 Jun 2009 Link to this post

    Hello Princy,

    I have transferred your sample to the forums, so that other community members can benefit from it as well.
    Thank you for your involvement.
    Your Telerik, points have been updated accordingly.

    Greetings,
    Yavor
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Esk
    Esk avatar
    5 posts
    Member since:
    Dec 2008

    Posted 05 Oct 2009 Link to this post

    RadGrid

     

    .MasterTableView doesn't exist. I am using Q2 of 2009 the bin35 version. Is there a way to make this code work in my case scenario?  

     

  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 06 Oct 2009 Link to this post

    Hi Sibila,

    It seems you have used the RadGridControl class(RadGrid) in your code instead of the ID of your RadGrid. Actually, the code should be as shown below:
    aspx:
    <telerik:RadGrid ID="RadGridID" runat="server" AutoGenerateColumns="true" AllowPaging="true" PageSize="10" AllowFilteringByColumn="True"  
    DataSourceID="SqlDataSource1" OnItemDataBound="RadGridID_ItemDataBound" OnPreRender="RadGridID_PreRender">  
        ..... 

    c#:
    protected void RadGridID_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)  
        {  
            if (e.Item is GridFilteringItem)  
            {  
                GridFilteringItem filterItem = (GridFilteringItem)e.Item;  
                foreach (GridColumn col in RadGridID.MasterTableView.RenderColumns)  
                {  
                  .......
                }  
            }      
        }  
        protected void RadGridID_PreRender(object sender, EventArgs e)  
        {  
            if (Hidden1.Value != "")  
            {  
                GridFilteringItem filter = (GridFilteringItem)RadGridID.MasterTableView.GetItems(GridItemType.FilteringItem)[0];  
                  .......
            }  
        }      

    Hope this helps..
    Princy.
  6. Theuns-Paul Burger
    Theuns-Paul Burger avatar
    1 posts
    Member since:
    Mar 2010

    Posted 27 Mar 2010 Link to this post

    Hi there,

    I'm new to Telerik's component, but I've learned a bit about it on the forum and this is the best example of implementing the search that I'm looking for on an AJAX Grid running on my MVC application (a mission in itself).

    Enough with the history, I need some help understanding the two parameters to the Grid item and their functions:

    OnItemDataBound
    ="RadGrid_ItemDataBound" 
    OnPreRender="RadGrid_PreRender"

    How do I get the functions to action in the controller of an MVC model?  The Hidden item required is also not recognized in the controller, as expected.  How does this get resolved?

    Thanks and Regards,
    TP

  7. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 29 Mar 2010 Link to this post

    Hi Theuns-Paul,

    For pure MVC solution consider utilizing our Grid extensions for ASP.NET MVC:
    http://demos.telerik.com/aspnet-mvc/Grid
    http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-introduction.html

    Thus you will be able to achieve clear separation of concerns in accordance with the Model-View-Controller paradigm.

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