Filter as Textbox on RADGRID Header with Autosuggest

[Gaurav]

Hello,
 I have seen the basic filter on grid as shown in example http://demos.telerik.com/aspnet-ajax/grid/examples/generalfeatures/filtering/defaultcs.aspx 

I have to implement the same filtering but with some modification. I want that Filter Text Box will appear on the Column Name (Header) of the Grid.
Mean to say that whenever the end user make double click on the Header of the Grid; the Header Got convert into the Textbox & this textbox will start work as the filter with the Auto suggest for the particular header data.

 Whenver user type say "Tel" in the text box the Gird start showing all the records having "Tel" & when the user type "Tele" at the same moment the Gird data go filtered. Means Filtering at the time of the Text Change of the Textbox filter.

Please let me know how to achieve the same.

Thanks in Advance!!!!!

[Radoslav]

Hello Gaurav,

I noticed that you have opened a duplicate post on the same matter. Please, refer to the support ticket post for additional information. Also I am posting the answer here in case if someone else has the same problem:

By default the RadGrid does not support the desire functionality. However with some custom code you could achieve it. You could try using the Google-like Filtering as a basis and into the RadGrid.ItemDataBound event to hide the header item and add additional control into the GridFilteringItem. Then you could attach the "ondblclick" event and on client side to switch between the label and the filter combobox:

void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        e.Item.Visible = false;
        e.Item.Display = false;
    }
    if (e.Item is GridFilteringItem)
    {
        GridHeaderItem header = RadGrid1.MasterTableView.GetItems(GridItemType.Header)[0] as GridHeaderItem;
        GridFilteringItem filterItem = e.Item as GridFilteringItem;
        for (int i = 0; i < header.Cells.Count; i++)
        {
            Label label = new Label();
            label.Text = header.Cells[i].Text;
            if (filterItem.Cells[i].Controls.Count > 0)
            {
                RadComboBox combo = (filterItem.Cells[i].Controls[0] as RadComboBox);
                combo.CssClass = "hidden";
                filterItem.Cells[i].Controls.Add(label);
                filterItem.Cells[i].Attributes.Add("ondblclick", "showhideFilteItem('" + label.ClientID + "','" + combo.ClientID + "')");
         }
       }
    }
  }

JavaScript

function showhideFilteItem(labelID, radcomboID)
{
    $get(labelID).className = "hidden";
    $get(radcomboID).className = "visible";
}

CSS

.hidden
{
    display: none !important;
}
.visible
{
   display: "";
}
.rcbArrowCell
{
   display: none !important;
}
.rgFilterRow td
{
   border-right: none !important;
}
.RadGrid .rgFilterRow .rcbInputCell
{
    padding:0;
    border-width:0;
}

However please not that the described approach is a custom approach and it is not a supported scenario.
Additionally I am sending you a simple example which demonstrates the desired functionality.

Regards,
Radoslav
the Telerik team