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

Auto-Filtering on KeyUp

5 Answers 335 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Princy
Top achievements
Rank 2
Princy asked on 04 Jun 2009, 03:31 PM

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

Sort by
0
Accepted
Yavor
Telerik team
answered on 08 Jun 2009, 01:07 PM
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.
0
Esk
Top achievements
Rank 2
answered on 05 Oct 2009, 02:35 PM

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?  

 

0
Princy
Top achievements
Rank 2
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.
0
Theuns-Paul Burger
Top achievements
Rank 1
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

0
Sebastian
Telerik team
answered on 29 Mar 2010, 12:58 PM
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.
Tags
Grid
Asked by
Princy
Top achievements
Rank 2
Answers by
Yavor
Telerik team
Esk
Top achievements
Rank 2
Princy
Top achievements
Rank 2
Theuns-Paul Burger
Top achievements
Rank 1
Sebastian
Telerik team
Share this question
or