Donnerstag, 6. Mai 2010

JQuery plugin to filter Telerik MVC Grid

This is a JQuery Plugin that enables you to filter the Telerik MVC Grid from outside the grid itself.

10.05.2010: Sorry guys, there was an debug alert in the script. I removed it in version 0.2.

10.06.2010: You're now able to put different values into a textbox, just put a ";" between them. So a textbox using the delimiters is handled the same as multiple textboxes with separate values. The column and operator settings will be applied to all elements.

What do I need?
Well, JQuery and the Telerik MVC Grid

Where do I start?
1. Give the grid a name, i.e. filteredGrid.
2. Put this one into document ready: $('#filteredGrid').gridFilter();

The "Apply Button"
By default, the apply button has to have the following class: "applyFilterButton"

What do I do in my html?
<input type="checkbox" class="gridfilter gf-op-range gf-col-Chambers" value="4::5" />
<input type="checkbox" class="gridfilter gf-op-range gf-col-Chambers" value="5::6" />
<input type="checkbox" class="gridfilter gf-op-eq gf-col-Chambers" value="5" />
<input type="checkbox" class="gridfilter gf-op-ne gf-col-Chambers" value="5" />
<input type="checkbox" class="gridfilter gf-op-gt gf-col-Chambers" value="5" />
<input type="radio" name="radiogroup" class="gridfilter gf-op-eq gf-col-Type" value="0" />
<input type="radio" name="radiogroup" class="gridfilter gf-op-eq gf-col-Type" value="1" />
<input type="radio" name="radiogroup" class="gridfilter gf-op-eq gf-col-Type" value="2" />
<input type="text" class="gridfilter gf-op-substringof gf-col-City" value="er" />
<input type="text" class="gridfilter gf-op-endswith gf-col-City" value="rn" />
<input type="text" class="gridfilter gf-op-startswith gf-col-City" value="be" />

Ok those are some pretty nice examples. Basically you give the input 3 classes:
the gridfilter class, the gf-op- class and the gf-col- class.

Name of the column you wish to filter

This one goes out to all the Vulcans
To the logic, operations on the same column get connected with an OR expression, different
columns get connected by an AND expression:

(column1 OR column1) AND (column2) AND (column3 OR column3)

I think thats pretty much it.. here you go with a nice CNF (conjunctive normal form) :-)

Get it here (Version 0.2)
Get the newest version here (Version 0.3) (Changes)

Have fun!


  1. Hi!
    Can you provide some demo.
    It`s not clear how I can integrate applyButton with custom ajax binding for example.


  2. Hello,
    could you provide some demo.

  3. Hi
    Thank for this great plugin
    It is really helpfull
    Why not proding it to the Telerik Code Library

  4. Got it working nicely - thank you for your effort.
    How could I search across multiple columns with one query? For example, search in substring for values in either the Name column or the Category column?

  5. I agree with a lot of what you're saying here but it could do with more detail. They stayed away in droves.

  6. It has taken me ages to discover your site. Finally. This is just the information I was looking for.

  7. There appears to be an issue with filter values including apostraphes (').

    If you update the code in the inputToFilter() function to be:
    // If type is Text
    if (type.toLowerCase() == 'text') {
    value = object.val().replace(/'/g, "''");

    that should resolve the issue.

  8. Hallo, ich teste gerade mit dem Telerik Grid. Ist es möglich eine kurze Demo zu schreiben wie die Funktion ins View eingebunden wird, und wie man dann mit dem "ApplyButton filtern kann. Besten Dank im Voraus.

  9. Nice article, thanks for the information. It's very complete information. I will bookmark for next reference
    jaring futsal | jaring golf | jaring pengaman proyek |
    jaring pengaman bangunan | jaring pengaman gedung

  10. Thanks for the info. In case when you traveling, you might need a GPS for your car or boat and even knowing your own location.

  11. A very insightful information and it very helpful. In case need some info about tangki fiberglass. Thanks for sharing.