SpellCoder

Welcome to SpellCoder Sign in | Join | Help
in Search

Beckham

JQuery Magic Continues --> Enable Searching and sorting in GridView at the client side.

I geuss you heared about JQuery, Which is an amazing JavaScript library that makes it easy to create wonderful web effects in just a few lines of code. As the website says:
“jQuery is a JavaScript library that takes this motto to heart: Writing JavaScript code should be fun. jQuery achieves this goal by taking common, repetitive, tasks, stripping out all the unnecessary markup, and leaving them short, smart and understandable.”
there are a lot of jQuery plugins such as facebox.
there is also a 2 plugins that are very cute and neat:
1- The Table Sorter Plugin
2- The table search plugin.

today i'm gonna use these plugins to allow sorting and searching for the grid view control at the client side ( No Postback)
okay, Let's start,
first of all you need to download the jQuery, Quick Search & Table Sorter plugins.

1- Create a webpage and put in a GridView control.
2- bind your gridview to a data source. in my case i'll use a SQL Data source, that connects to the northwind db and get some information from the [Customers] table.

gridAndDataSource

3- Now the cool part to enable the search into the grid view just add this nice piece of js code

quicksearch

just make sure to add the js files that you downloaded

refrences

4- To enable sorting is a bit tricky as the table sorter plugin is working with the standard HTML table with and tags but the grid view renders only without tag.

nothead

Okaay, how can we make the gridview renders the tag ??? We can do that by this line of code which tells the grid view to render the header row as tag.

addthead

Now to make your grid sortable at the client side just add this line

sortable

now you can search and sort your grid at the client.

finalgrid

Beckham
Published Sunday, November 16, 2008 12:24 PM by beckham
Filed Under: , ,
Attachment(s): GridSearch.zip

Comments

 

mnour said:

Nice one! Keep up ...
November 17, 2008 4:44 AM
Anonymous comments are disabled

This Blog

Post Calendar

<November 2008>
SuMoTuWeThFrSa
2627282930311
2345678
9101112131415
16171819202122
23242526272829
30123456

Syndication