Grid Filtering Error - AutoPostBackOnFilter

[Chris Salas]

I have encountered an error here where I am attempting to use the AutoPostBackOnFilter of a grid and it is throwing a Javascript error: 

Uncaught TypeError: Cannot read property '_filterOnKeyPressWithDelay' of null

I am creating the grid in code with no markup:

//Create the Rad Grid
Telerik.Web.UI.RadGrid tmpRadGrid = new Telerik.Web.UI.RadGrid();
tmpRadGrid.Init += new EventHandler(tmpRadGrid_Init);
tmpRadGrid.NeedDataSource += new Telerik.Web.UI.GridNeedDataSourceEventHandler(tmpRadGrid_NeedDataSource);
tmpRadGrid.SelectedIndexChanged += new EventHandler(tmpRadGrid_SelectedIndexChanged);
tmpRadGrid.MasterTableView.ExpandCollapseColumn.Visible = false;
tmpRadGrid.Width = Unit.Percentage(100);
tmpRadGrid.ID = "radGrid" + tabText;
tmpRadGrid.Skin = "Silk";
tmpRadGrid.AutoGenerateColumns = false;
tmpRadGrid.AllowFilteringByColumn = true;
tmpRadGrid.GroupingSettings.CaseSensitive = false;
tmpRadGrid.AllowSorting = true;
tmpRadGrid.ClientSettings.EnableRowHoverStyle = true;
tmpRadGrid.ClientSettings.Selecting.AllowRowSelect = true;
tmpRadGrid.ClientSettings.EnablePostBackOnRowClick = true;
tmpRadGrid.CellPadding = 0;
tmpRadGrid.CellSpacing = 0;
tmpRadGrid.AllowPaging = true;
tmpRadGrid.PageSize = 50;
tmpRadGrid.PagerStyle.AlwaysVisible = true;

//Create the columns
Telerik.Web.UI.GridTemplateColumn tmpCol_Name = new Telerik.Web.UI.GridTemplateColumn();
tmpCol_Name.ItemTemplate = new GridNameColumnTemplate();
tmpCol_Name.ItemStyle.Width = new Unit(150);
tmpCol_Name.ItemStyle.VerticalAlign = VerticalAlign.Top;
tmpCol_Name.HeaderText = "Name";
tmpCol_Name.DataField = "FullName";
tmpCol_Name.SortExpression = "FullName";
tmpCol_Name.UniqueName = "FullName";
tmpCol_Name.FilterDelay = 0;
tmpCol_Name.FilterControlWidth = Unit.Percentage(80);
tmpCol_Name.AutoPostBackOnFilter = true;
tmpCol_Name.CurrentFilterFunction = Telerik.Web.UI.GridKnownFunction.Contains;

Telerik.Web.UI.GridBoundColumn tmpCol_Title = new Telerik.Web.UI.GridBoundColumn();
tmpCol_Title.ItemStyle.Width = new Unit(150);
tmpCol_Title.ItemStyle.VerticalAlign = VerticalAlign.Top;
tmpCol_Title.HeaderText = "Business Title";
tmpCol_Title.DataField = "Title";
tmpCol_Title.SortExpression = "Title";
tmpCol_Title.UniqueName = "Title";
tmpCol_Title.FilterDelay = 0;
tmpCol_Title.FilterControlWidth = Unit.Percentage(80);
tmpCol_Title.AutoPostBackOnFilter = true;
tmpCol_Title.CurrentFilterFunction = Telerik.Web.UI.GridKnownFunction.Contains;

Telerik.Web.UI.GridTemplateColumn tmpCol_ContactInfo = new Telerik.Web.UI.GridTemplateColumn();
tmpCol_ContactInfo.ItemTemplate = new GridContactInfoColumnTemplate();
tmpCol_ContactInfo.ItemStyle.Width = new Unit(100);
tmpCol_ContactInfo.ItemStyle.VerticalAlign = VerticalAlign.Top;
tmpCol_ContactInfo.HeaderText = "Contact Information";
tmpCol_ContactInfo.DataField = "FullContactInfo";
tmpCol_ContactInfo.SortExpression = "FullContactInfo";
tmpCol_ContactInfo.UniqueName = "ContactInfo";
tmpCol_ContactInfo.FilterDelay = 0;
tmpCol_ContactInfo.FilterControlWidth = Unit.Percentage(80);
tmpCol_ContactInfo.AutoPostBackOnFilter = true;
tmpCol_ContactInfo.CurrentFilterFunction = Telerik.Web.UI.GridKnownFunction.Contains;

Telerik.Web.UI.GridBoundColumn tmpCol_Location = new Telerik.Web.UI.GridBoundColumn();
tmpCol_Location.ItemStyle.Width = new Unit(70);
tmpCol_Location.ItemStyle.VerticalAlign = VerticalAlign.Top;
tmpCol_Location.FilterControlWidth = Unit.Percentage(60);
tmpCol_Location.DataField = "OfficeCode";
tmpCol_Location.HeaderText = "Office Code";
tmpCol_Location.SortExpression = "OfficeCode";
tmpCol_Location.UniqueName = "Office";
tmpCol_Location.FilterDelay = 0;
tmpCol_Location.AutoPostBackOnFilter = true;
tmpCol_Location.CurrentFilterFunction = Telerik.Web.UI.GridKnownFunction.Contains;

//Add the columns to the grid
tmpRadGrid.MasterTableView.Columns.Add(tmpCol_Name);
tmpRadGrid.MasterTableView.Columns.Add(tmpCol_Title);
tmpRadGrid.MasterTableView.Columns.Add(tmpCol_ContactInfo);
tmpRadGrid.MasterTableView.Columns.Add(tmpCol_Location);

tmpRadGrid.DataSource = tmpLetterContacts;
tmpRadGrid.DataBind();

Some of the columns are templates with the following templates: 

class GridNameColumnTemplate : ITemplate
{
    public void InstantiateIn(Control container)
    {
        Literal lit = new Literal();
        lit.DataBinding += new EventHandler(lit_DataBinding);
        container.Controls.Add(lit);
    }

    public void lit_DataBinding(object sender, EventArgs e)
    {
        Literal l = (Literal)sender;
        Telerik.Web.UI.GridDataItem container = (Telerik.Web.UI.GridDataItem)l.NamingContainer;
        Directory_BO.Employee tmpEmp = (Directory_BO.Employee)container.DataItem;
        l.Text = "<table><tr><td style='border:none;vertical-align:top;padding:0 3px 0 0 !important;' width='45px;'><img width='45px' src='/controls/EmployeePhoto.ashx?img=thumb&id=" + tmpEmp.ID + "' /></td><td style='border:none;padding:0px;vertical-align:top;'>" + tmpEmp.FullName + "</td></tr></table>";
    }
}

class GridContactInfoColumnTemplate : ITemplate
{
    public void InstantiateIn(Control container)
    {
        Literal lit = new Literal();
        lit.DataBinding += new EventHandler(lit_DataBinding);
        container.Controls.Add(lit);
    }

    public void lit_DataBinding(object sender, EventArgs e)
    {
        Literal l = (Literal)sender;
        Telerik.Web.UI.GridDataItem container = (Telerik.Web.UI.GridDataItem)l.NamingContainer;
        Directory_BO.Employee tmpEmp = (Directory_BO.Employee)container.DataItem;
        l.Text = tmpEmp.FullContactInfo;
    }
}

What is causing this error?  Is there a way to correct this?  I need the filtering to occur on Enter press.

Thanks,

Chris

[Chris Salas]

UPDATE.  

So in further testing i found that the filtering works if i filter it first using the selection from the filter options.  Once i do it the first time then the Auto filter works.  So i am really stumped.

[Pavlina]

Hello Chris,

I went through your code and noticed that you are calling DataBind() method in order to populate the grid control with data. The filtering feature of RadGrid is not supported with simple binding and DataBind() calls. This is outlined in the Description section of the following online demo of the product:

http://demos.telerik.com/aspnet-ajax/grid/examples/functionality/filtering/basic-filtering/defaultcs.aspx

If you would like to take advantage of this grid feature, you will need to switch to advanced binding using NeedDataSource event handling or a data source control (as shown in the example linked above).

Regards,
Pavlina
Telerik