Filter as Textbox on RADGRID Header with Autosuggest

2 posts, 0 answers
  1. Gaurav
    Gaurav avatar
    4 posts
    Member since:
    Sep 2010

    Posted 09 Nov 2010 Link to this post

    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!!!!!
  2. Radoslav
    Admin
    Radoslav avatar
    1564 posts

    Posted 15 Nov 2010 Link to this post

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