Two best Display Components :JqGrid and Datatables.net

Many of us already know JQuery today. Years ago, when we used jquery, we did not have an idea on how popular it could be in future. This article is about 2 data plugins which you would always love to have in your web applications. Datgrid! yes.

ASP.Net developers have 1 master tool always when it comes to display data on screen in a tabular format. Thats the Gridview. Microsoft has provided all the stuff which in-general programmers look for in a gridview. We have options to Page, options to Sort, do custom operations. However, Gridview has a few things which needs programmers to handle it manually.

Say you want to freeze the header, move the columns, resize them, give a search option for grid, or providing a filter. It is not a easy task to implement.

Now a days, people just want to make things work rather than spending time on writing own code to customize a grid.

Let me come to the point. There are two grid components powered by Jquery which is quite popular these days. One is the datatable.net component and the other one is JQGrid. There is a reason to smile now. Both are free!

I assume, these two are the best available options to use when it comes to display the data in tabular format.Lets have a look at each one of them.

Datatables.net

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Few features are
  1. Variable length pagination
  2. On-the-fly filtering
  3. Multi-column sorting with data type detection
  4. Smart handling of column widths
  5. Display data from almost any data source
  6. DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
  7. Scrolling options for table viewport
  8. Fully internationalisable
  9. jQuery UI ThemeRoller support
  10. Rock solid - backed by a suite of 2600+ unit tests
  11. Wide variety of plug-ins inc. TableTools, FixedColumns, KeyTable and more

Now, how does the grid look like and where is the documentation?

Links below
http://www.datatables.net/release-datatables/examples/data_sources/ajax.html
http://www.datatables.net/examples/

jqGrid

jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl.

jqGrid uses a jQuery Java Script Library and is written as plugin for that package.

In a jqGrid, we have all the features of a datatable.net component and

  1. Virtual scrolling
  2. Dynamically Loading data
  3. Data manuplulations, mapping, Grouping and much more.

Examples & documentation
http://trirand.com/blog/jqgrid/jqgrid.html
http://www.trirand.com/jqgridwiki/doku.php

Now, the best part is that, you can use xml, json or arrays as datasource for these components. Just 5 to 10 lines of code is what it takes to use them client side. I will come up with some .net examples & Proof of concepts of using these grids in near future. Happy coding :)

Popular posts from this blog

Facebook Javascript API : Feed and Share Dialog for Beginners

Real time Push Notifications with SignalR & PNotify (Pines Notify)

What's new and expected in .NET Framework 4.5