Google-Like Filtering From the Client Side

[Joe]

All,

    I am currently evaluating these controls for my employer.  We were interested in the Google-Like filtering of the web grid as found in this example:  http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandcombo/defaultcs.aspx?product=grid

    I am currently loading my web grid via PageMethods and a client-side databind.  I haven't been able to find any info / demo / articles on Filtering a RadGrid with Google-Like filtering when using this type of set up.  Since the page method is Static, I don't have access to "this" and I can't use the set up in the above example.

    Can anyone point me in the right direction to a resource I can use?  Am I going to be forced to "roll my own" Google-Like filtering when using the Rad Grid with PageMethods and client side data binds?

Thanks,
    -- Joe --

[Genti]

Hi Joe,

Thank you for contacting us.

Google like filtering is not a feature of the RadGrid, but you can combine some of the demos to achieve such functionality.
I am attaching a project that illustrates how you can achieve Google-Like filtering with client side data binding using webmethods.
In my project you can filter by the FirstName column like google does.

Some points to notice:
-In order to have a combobox in the header columns you need to override the current filter(a textbox and a button that show up). You do so by creating a Custom Filtering columns(MyCustomFilteringColumnCS). In there an important point is to set :
        combo.WebServiceSettings.Method = "GetNames";
        combo.WebServiceSettings.Path = "Default.aspx";
So that the correct webmethod is chosen to grab the data of the ComboBox.

-In the code behind make sure, you define the columns once(ie in first page load) and attach a handler:

void RadGrid1_ColumnCreating(object sender, GridColumnCreatingEventArgs e)
    {
        if ((e.ColumnType == typeof(MyCustomFilteringColumnCS).Name))
        {
            e.Column = new MyCustomFilteringColumnCS();
        }
    }

So that the grid creates your custom column.

-Also, in the code behind make sure that you have a static function named GetNames with a WebMethod attribute. This function would feed the grid with data depending on what the user types.

-In the client-side, you should have a handler that catches the combo_selectedIndexChanged event.
In there you get the text that the user supplied, specify the filter column(FirstName in my case) and a filter function(which in google like filtering should be Contains). Then rebind the grid.


Hope this helps.

Best wishes,
Genti
the Telerik team