Hey, I just did a small update on my gridfilter for the Telerik MVC Grid.
There's just one change: 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.
Get the new version here.
Posts mit dem Label Telerik werden angezeigt. Alle Posts anzeigen
Posts mit dem Label Telerik werden angezeigt. Alle Posts anzeigen
Donnerstag, 10. Juni 2010
Donnerstag, 6. Mai 2010
JQuery plugin to filter Telerik MVC Grid
Posted by
Dänu
at
21:59
This is a JQuery Plugin that enables you to filter the Telerik MVC Grid from outside the grid itself.
Changes
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?
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.
http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api.html
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) :-)
Download
Get it here (Version 0.2)
Get the newest version here (Version 0.3) (Changes)
Have fun!
Changes
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-
http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api.html
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) :-)
Download
Get the newest version here (Version 0.3) (Changes)
Have fun!
Abonnieren
Posts (Atom)