JS_Grid

Welcome to the JS_Grid tutorial. This page has a few examples which will help you get familiarised with the various features available.

I have used Twitter bootstrap CSS along with this since JS_Grid goes very well with it. It is not mandatory and you can use your own CSS as well. If you like the project and would like to contribute, visit the Github page here.

Basic table

In its most basic form, we see a simple table shown. One of the features that comes along with this table is the ability to hide columns. Click on the minus sign to hide a column. Also, line numbering is taken care of. As you can see, they are basic functionalities we don't have to worry about

We will slowly add more features as we proceed. For now, Copy-Paste the following code into your file.

Query By Example (QBE)

Now that you have seen the basic table being rendered, let's now enable QBE - Query By Example
QBE is column-wise filtering.

Type 'nik' (no quotes) in the text-box that appears above Name. Try doing the same in Age and Department. The Department column cannot be filtered because QBE has been disabled for it.

From now on, the boiler-plate html won't ne shown. Only the script will be updated

Element types

Till now, our tables had only readonly fields. Now, in this table, we show how text boxes and select boxes can be provided. We can also use radio buttons, checkboxes, date fields etc. along with it.

Also, notice the red asterisk against Age - since we have marked it as required. We can also automatically validate it.

Add and Delete Rows

In this example, we add two buttons which allows users to add and delete rows. The add and delete buttons in this example are in the toolbar at the top.

To delete a row, select a row by clicking on the radio button against it and click on Delete row. To add row, simply click on Add row.

Get Add/Delete buttons per row

By keeping the code same as above and just adding "actionButtonPosition":"line" as option, we can bring Add and Delete buttons at the end of each row as shown below

Multi-data forms

You can represent the same data as a multi-data form by just modifying the Container field - change the value from table to form, no other change is required!

Keeping options relevant to table while creating a form is not going to cause any harm - they will simply be ignored.

Custom functions on Add/Delete

You have already seen how Add and Delete buttons behave by default. In this example, we see how to override default behaviour.

On clicking on Add button, we are simply calling a function that does an "Alert" here. You can replace this by any other function of choice

You can access the row(s) affected by the buttons as well. For instance, clicking on the delete button by default simply strikes out the contents of the row, disables all fields, hides the radio button. However, in this example, I have overriden the function with a custom one to delete the row. You can access the current row by using $(this) as shown in the example - this way you can write your own code

Custom Functions + Default functionality

How about if you want to call a custom function as well as run the default code? All you have to tell is that your custom function is a callback.

Retrieving data from a table - No sweat

Normally, we retrieve data from a database and present it to users. The user can make some changes, like add new rows and fill some data, or delete or update an existing row. When the user clicks on save, we want to send only the modified rows back to the database - instead of ALL the rows. This is very useful because we are sending only relevant information

We have a ready function called tableToJson - All you need to do is send a parameter to it - the ID of the div that was used to create it. Also, notice we are bringing up the save button.

To see how this works, first click on "Save" button. You should get a popup with an empty JSON - []. Then modify any field in any row, and click on Save again. This time you should get the modified row up in the alert. Instead of alerting, you should be sending that data to your server scripts

Sorting, Summing and Alignment

Using the Table Sorter plugin, sorting can be as easy adding just one simple key - sort as true. Make sure to include the Table Sorter plugin before the JS_Grid is included (But after jQuery is included) in order to get the dependency order right

Summing is a very useful feature that adds up numbers in a column and shows the sum at the bottom.

It might be useful to align certain columns, like numerical ones, to the right. All these can easily be achieved using JS_Grid with simple configuration.

Add custom classes

You might want to add some classes to certain columns, for example, make the text bold, or change the colours. This is supported in JS_Grid. To do that, just pass an array of classes to the function as shown in the code.

Column Relations

Very often, we have relationships among columns. Like in MS Excel where you use Formulae to depict these relationships - For example, values of column C are equal to (B / A) where each cell of C equals corresponding values of B over A. This can be easily done using JS_Grid by using relations. Just pass the formula in the relations key under source. You can also indicate the number of places to round off.

Coming soon: Relations among summing as well

In the example below, you can see that data was provided for columns A and B, while C has been computed using formula (B / A)

Say hello to Charts

Just like the same table could be rendered as a multi-data form, we can represent them as Charts as well. All you need to include is Raphael JS files along with it. We are now using the same example as before. The difference is that the container = chart, and chart_type = pie/bar

Keeping the code same, let us now change chart_type from pie to bar

And in this next example, you can see that we can have multi-value graphs with the same ease.

Here we can see some line graph in action.