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

Auto-Filtering on KeyUp

5 Answers 325 Views

Grid

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

Princy asked on 04 Jun 2009, 03:31 PM

auto-filtering-on-keyup.rar

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.

5 Answers, 1 is accepted

Accepted

answered on 06 Oct 2009, 07:24 AM

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.

answered on 27 Mar 2010, 11:29 PM

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Auto-Filtering on KeyUp

5 Answers, 1 is accepted