Getting started using jsGrid (A jQuery Grid)

Demand: -

There is immense appetite for ‘ready to-go’ and ‘open source’ plugins today, that are high in features and extensible, nearly matching paid products.

Problem: -

Few days ago, I was in similar quest for rich in UI, open source and can perform AJAX calls to fetch data from server to implement one of business use case.

Comparison: -

While there are many alternatives like (jqGrid, dataTables, FlexiTable, jTable) for jsGrid, we chose it because of simplified code development, inline column definition, editable validation context, cascaded cell update,

oversimplified template for AJAX calls & pagination. More to that, it provides modifiable CSS theme that we can build on our own, to match our application need.

Solution: -

Much to my rescue, came lightweight, client-side JS Grid.

“jsGrid”, it could be extended to match your needs. With jsGrid you could modify theme to be used, code that you want to execute on some event, perform custom validation, implement asynchronous mechanism for performance.

jsGrid solves all your problems, and still its open source.

Getting Started: - Part 1

Installation: -

It has very basic installation, either we could use CDN links as below in our html file,

(Note: - Must reference jQuery v1.8.3 or higher before adding these references)

Or we could download the zip file & add unzipped content in it to our project & refer to those files in your code file,

And we can start using jsGrid,

For very basic example we can use static data to be displayed in grid. By using following code, we take step towards learning jsGrid, here we have local dataset that is clients, which is mapped to div element with id ‘grid’ by using inline code definition for columns, we could improve our development step

Screenshots: -