Beckh@m's Blog

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

November 16, 2008 at 12:24 pm | Posted in C#, jQuery, Tips & Tricks | Leave a comment
Tags: jQuery sorting Searching GridView

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.

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

just make sure to add the js files that you downloaded

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.

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.

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

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

Beckham