This blog is subject the DISCLAIMER below.

Sunday, April 11, 2010

GridView with Highlighting and dragging rows

Two days ago, I needed a grid like GridView to be project’s inbox but must have some UI effects like highlighting rows and sorting rows according to column’s name or by drag and drop rows by mouse pointer.
Of course the first thing came in my mind is using JQuery with the gridview as it runs by a little lines of code and give the client a big influence and satisfaction.

I am already started with trying some plug-ins for Drag and Drop but I found a big issue with GridView itself as it’s render the header and footer as ordinary row (TR Tag) NOT (thead tag) and (tfoot tag) so any plug-in can’t differentiate between any row and the header (the section of columns name) or footer (the section of paging ).

So I google for solution and get a part of it by Suprotim Agarwal then I modified it to fit my needs and some changes in the Table Drag and Drop JQuery . So take care to use the attached (modified) Dragging plug-in as I modified it and use the start up script.

The Grid before fix (as you can see, you can drag any row even the header or footer):

After fixing:
Download the complete Example.

No comments: