Source Code: Html

Source Code: JavaScript

GridJS

Follow @_nitij

GridJS is a JavaScript plugin to create UI grids. This plugin supports templates and is highly customizable. gridJS can work independently from any other third party library like jQuery. The first step in using gridJS is to create markup of the grid. This can be done by creating a custom <gridJS-grid> html element. Inside there can be header row, data row and footer. Take a look at below example:

First load the GridJS script into the page:

                <head>
                    <script type="text/javascript" src="grid.main.js"></script>
                </head>

Then create the custom <gridJS> html element:

                <gridjs-grid id="gridNorthWind" class="NorthWindGrid">
                    <headerRow class="NorthWindGridHeaderRow">
                        <column>Order ID</column>
                        <column>Customer ID</column>
                        <column>Emp ID</column>
                        <column>Order Date</column>
                        <column>Shipped Date</column>
                        <column>Freight</column>
                        <column>Ship Name</column>
                        <column>Ship City</column>
                        <column>Ship Postal Code</column>
                        <column>Ship Country</column>
                    </headerRow>
                    <dataRow class="NorthWindGridRow">
                        <column>{{OrderID}}</column>
                        <column>{{CustomerID}}</column>
                        <column>{{EmployeeID}}</column>
                        <column>{{GetOrderDate()}}</column>
                        <column>{{GetShippedDate()}}</column>
                        <column>{{Freight}}</column>
                        <column>{{ShipName}}</column>
                        <column>{{ShipCity}}</column>
                        <column>{{ShipPostalCode}}</column>
                        <column>{{ShipCountry}}</column>                
                    </dataRow>
                    <footerRow>
                    </footerRow>
                </gridjs-grid>

gridJS works by converting the inner html of <gridjs-grid> custom html element into html table by combining it with the provided data source. gridJS can be configured when creating the grid object by passing the config object. The structure of that config object can be as follows:

                var gridJS = new GridJS({
                    gridId 					  : 'gridNorthWind',                 //Gets the id of the <gridJS> element.
                    dataSource 				  : NorthWindDataSource,             //Gets the data-source.
                    updateDataRowOnInputChange: (function),                      //Flag to update data row when any input inside that row is changed.
                    beforeGridPageChange	  : (function),                      //Event which is fired before grid page change.
                    onRowRedrawComplete		  : (function),                      //Event which is fired when data-row redraw is complete.
                    onGridPageChange		  : (function),                      //Event which is fired when grid page is changed.
                    onGridLoaded			  : (function),                      //Event which is fired hen the grid is loaded.
                    allowPageChange			  : true,                            //Flag to determine if the grid page can be changed or not.
                    disableInputBindings	  : false,                           //Flag to disable or enable input bindings.
                    pageButtonCss             : { normalCss: 'NormalCssClass',
                                                  activeCss: 'ActiveCssClass'},  //Sets the page button's normal and active state css classes.
                    pagination				  : 10,                              //Enables pagination and sets number of rows per page.
                    dataRowColors   		  : ["#0B6121", "#0A2A0A"],          //Gets the sequential data-row colors.
                    cellPadding:			  : 5,                               //Sets the cell padding.
                    onRowAddition			  : (function),                      //Event which is fired before row addition.
                    mouseOverColor:			  : '#FFC1C1'                        //Sets the mouse-over color of the grid.
                });

Finally draw the grid by calling the draw() function.

                gridJS().draw();

Check out the following sample grids made by using GridJS and see how we can create highly customizable and interactive grids.

Custom Editable Grid

Show Code

This is a typical Edit/Add Functionality grid.

Room Name Room Type Color Action {{roomName}} {{roomType}}

Edit Done Add New Record

ToDo Grid

Show Code

Just a normal Todo grid.

Country Grid

Show Code

Name Capital Area Population Official Flag {{name}} {{capital}} {{area}} {{population}}

Normal Css Grid

Show Code

Order ID Customer ID Emp ID Order Date Shipped Date Freight Ship Name Ship City Ship Postal Code Ship Country {{OrderID}} {{CustomerID}} {{EmployeeID}} {{GetOrderDate()}} {{GetShippedDate()}} {{Freight}} {{ShipName}} {{ShipCity}} {{ShipPostalCode}} {{ShipCountry}}

Shopping Grid

Show Code

Rs. {{price}}
Rs. {{PriceAfterDiscount()}}
Inclusive of taxes

Discount: {{discount}}%

Free home delivery

Key Features:

Operating System: {{operatingSystem}}
Processor: {{processor}}
Screen Resolution: {{resolution}}
Camera: {{primaryCamera}}
Size: {{size}}
Weight: {{weight}}
Internal Memory: {{internalMemory}}

BUY NOW

Call 1800 200 9000 (toll free) for assistance from our product expert.

Cash on Delivery

EMI Option

30 Day Replacement Guarantee

In Stock
Cash-on-Delivery also available

Bound Input Css Grid

Show Code

Try changing the inputs and after changing the page the inputs are retained.

Order ID Customer ID Emp ID Order Date Shipped Date Freight Ship Name Ship City Ship Postal Code Ship Country Order Details 1(Id) {{CustomerID}} {{EmployeeID}} {{GetOrderDate()}} {{GetShippedDate()}} {{Freight}} {{ShipPostalCode}}

Validation Grid

Show Code

This grid's fields has required field validators attached. Try changing the grid page while having an empty text box.

Order ID Customer ID Emp ID Order Date Shipped Date Freight Ship Name Ship City Ship Postal Code Ship Country {{CustomerID}} {{EmployeeID}} {{GetOrderDate()}} {{GetShippedDate()}} {{Freight}}

Apart from the above config object syntax there are several standalone helper functions to set the grid properties. They are:

reDraw()

This function redraws the grid if required.

                    gridJS().reDraw();

updateDataRowOnInputChange(bool)

Function to set the flag to determine if data row should be updated on binded input's data change or not.

                    gridJS().updateDataRowOnInputChange(boolean value);

beforeGridPageChange(func)

Function that can be used to wireup event handler for grid page change event.

                    gridJS().beforeGridPageChange(SomeFunction);

onRowRedrawComplete(func)

Function which is called when row redraw is completed which happens when any bound input is changed.

                    gridJS().onRowRedrawComplete(SomeFunction);

onGridPageChange(func)

Function to set grid page change event handler.

                    gridJS().onGridPageChange(SomeFunction);

onGridLoaded(func)

Function to set grid loaded event handler.

                    gridJS().onGridLoaded(SomeFunction);

allowPageChange(bool)

Function to set the flag to allow grid page change or not.

                    gridJS().allowPageChange(true);

addCustomFunction(functionName, func)

Adds a custom function that can be called from inside the grid's templates. The called function receives the data-source and row index as parameters.

                    gridJS().addCustomFunction('MyFunction', myFunction);

disableInputBindings(bool)

Function to disable or enable input bindings.

                    gridJS().disableInputBindings(boolean value);

setPageButtonCss(normalCss, activeCss)

Sets the page button's normal and active state css classes.

                    gridJS().setPageButtonCss('NormalStateCssClassName', 'ActiveStateCssClassName');

setPagination(numberOfRows)

Function that an be used to activate the pagination and sets number of rows in a page.

                    gridJS().setPagination(10);

getGrid(gridId)

Function to get the grid element's id.

                    gridJS().getGrid('#myGridId');

dataSource(dataSource)

Function to set the grid's JSON array data source.

                    gridJS().dataSource(myDataSource [{},{},{}...]);

setDataRowColors(colorsArray)

Function to set alternate colors or custom color sequence for the rows.

                    gridJS().setDataRowColors([color1, color2...]);

setCellPadding(cellPadding)

Function to set the padding of the output table's cells.

                    gridJS().setCellPadding(5);

onRowAddition(func)

Function to set row add event handler.

                    gridJS().onRowAddition(SomeFunction);

setMouseOverColor(color)

Function to set row mouse over color.

                    gridJS().setMouseOverColor('lightGreen');

getDataUpdates()

Function that returns an array containing updated data rows.
Returns an array of data updates made by using the bound input elements.

                    var updates = gridJS().getDataUpdates();