AG-Grid with Ruby Rails Demo – Part – I

by / Monday, 21 August 2017 / Published in CSS, HTML5, Ruby On Rails, Software Development, Web Development

Hi Guys,

 

 

   Welcome to AG-Grid with Ruby Rails platform tutorial

 

Let me first introduce you to AG-Grid as mentioned below.

What is AG-Grid?

AG-Grid is an Enterprise Grade JavaScript Data Grid. The purpose of ag-Grid is to provide a data grid that software developers use to build applications such as reporting and data analytics, business workflow and data entry. Much other grid is there but to me, AG-Grid is the result of turning frustration with other JavaScript grids into answers, providing a grid worthy of enterprise development. And moreover, we know that for us developers tech world is moving at a very fast pace to cope-up with so it is always better to work with new technologies like AG-Grid which is first launched in March 2016.

To visit the official website of AG-grid please visit the following link:

www.ag-grid.com

What do you need to know beforehand to understand this tutorial?

Pre-requisites:

  • A clear concept on Web Technologies and MVC Architecture.
  • A moderate knowledge on any data-grids.
  • A simple know-how of database language like MySQL which we are using in this tutorial. For more help please visit https://dev.mysql.com/doc/ to install and read the document section to get into details of MySql.

An Example of how the grid will look:

AG-Grid


Let’s chalk out the plan that is intended to be carried out in this AG-Grid with Ruby Rails tutorial:

  • First, make sure what data you want to show in your grid and accordingly you have to have a database table at the back-end.
  • Next, build a rails project to serve as a platform.
  • Then we will see in details how to fetch that data and show that in the grid.

 

 database_table_view

 

MySQL Code:

This below code is about creating the structure of the table:

CREATE TABLE `employees` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`emp_id` varchar(255) NOT NULL,
`emp_name` varchar(255) NOT NULL,
`emp_email` varchar(255) NOT NULL,
`team_leader` varchar(255) DEFAULT NULL,
`designation` varchar(255) DEFAULT NULL,
`bank` varchar(255) DEFAULT NULL,
`bank_ac` varchar(255) DEFAULT NULL,
`doj` varchar(255) DEFAULT NULL,
`created_at` datetime DEFAULT NULL,
`updated_at` datetime DEFAULT NULL,
PRIMARY KEY (`id`)
)

and now next step is to insert data of your choice as follows:

INSERT INTO employees(emp_id,emp_name,emp_email,team_leader,designation,bank,bank_ac,doj)
VALUES    ('MT0055','Sudipto Singha Roy','sudipto.singharoy@test.com','MT0027','Jr. Software Developer-ROR','ABC','123456','13-Oct-2015'),
('MT0057','Gaurab Majumdar','gaurab.majumdar@test.com','MT0027','Jr. Software Developer- ROR','ABC','123456','25-Jan-2016')

<span>

 Ruby on Rails Section:

If you are beginner to ROR or Ruby on Rails to be specific then please watch my first tutorial “A Short Introduction To Rails”. Now, let us proceed in building the rails app.

To create a Rails app first go to the directory through your console where you want to keep your files then hit the following command to create the MVC project structure:

 rails project_name -d mysql 

Since we are using MySQL as our database adapter so we have to identify that to rails while creating the project or else it will take the default database adapter which is SQLite.

Rails by default follow MVC architecture so let us create one model first i.e employees model:

 ruby script/generate model employee 

Then we need a controller i.e employees controller

 ruby script/generate controller employees 

Now once you execute the above commands you can see the following directory structure below that has been created:

directory

Inside the app directory, you can see another four directories which are the segmentation of our MVC structure i.e Model, View, Controller and along with that Helper. Below is the screenshot of our  /app directory structure:

app_directory

Details of Helper section had been covered in my first tutorial “A Short Introduction To Rails”, to know the details please visit that tutorial.

In your view folder create one HTML page i.e in our case index.html.erb, where you will keep your HTML content and grid will be shown on this page.

Below is the HTML code for the grid:

<html>

<head>
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/jquery-ui.js"></script>
<script src="/javascripts/ag-grid-enterprise407.js"></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/jquery-ui-1.9.2.custom.css"/>
<link rel="stylesheet" type="text/css" href="/stylesheets/ag-grid.css"/>
<link rel="stylesheet" type="text/css" href="/stylesheets/theme-fresh.css"/>
</head>

<body>
<div style="height:10px;"></div>
<div id="employee_grid_header" style="height:30px;text-align:center"><u><strong>EMPLOYEE GRID</strong></u></div>
<div style="height:20px;"></div>
<div id="employee_grid" class = "ag-fresh" style="height: 500px;"></div>
</body>

</html>

 Now, in the above code we can see that we have written few lines of codes in the <head> section of the html page. What are these actually? Let us see…

These are nothing but the external file links either css which is given in the <link> tags or javascript which is given in the <script> tags. These files are stored in /your project folder/public/javascript/file_name you want for javascript and /your project folder/public/stylesheet/file_name for css. Now why these are needed? Can you guess? These are needed because AG-Grid organization used it to design it likewise. If we do not use it then the grid structure will not come and further if you debug with web console then you can see the errors.

As you can see that we have used four <div>s’, two for vertical spaces and one for the header where “Employee Grid” written in bold and underlined and another <div> for AG-Grid. The class that we have assigned to ag-grid div i.e the div with “class = ag-fresh” is the reason where ag-grid is getting its design from and this is there in the .css files that were included in the head tag of this HTML page.

Now let us go deeper into the details of the grid population mechanism:

First let me give an overview of what is actually happening out here. We are fetching data through model (employees.rb) then we are bringing the data in the front-end web page which is our (index.html.erb) through controller (employees_controller.rb).

So, let’s start with model code then controller then view page.

Below is the Model code:

class Employees < ActiveRecord::Base

def self.get_employee_data
return Employees.find_by_sql('select id,emp_id,emp_name,emp_email,team_leader,designation,bank,bank_ac,doj from employees').collect{|x| x.attributes}.to_json
end

end

What are we doing here is that we are just fetching the column data and converting it into json format.

Next, let us see the Controller code:

class EmployeesController < ApplicationController

def index

@coldef_arr = [
{:headerName=> "#",:field=> "#", :cellStyle=>{"text-align"=>"center"},"width"=>40,:checkboxSelection=>true, "headerCellTemplate"=>"<span style='padding-top:15px;'><input type='checkbox' id='aghcb' onclick=manage_header_chekbox()></span>" },

{:headerName => "ID",:field => "id", :filter=>"set"},

{:headerName=>"Employee ID",:field=>"emp_id", :filter=>"set"},

{:headerName=> "Employee Name", :field=> "emp_name", :filter=>"set"},

{:headerName=> "Email ID", :field=> "emp_email", :filter=>"set"},

{:headerName=> "Team Leader", :field=> "team_leader", :filter=>"set"},

{:headerName=> "Designation", :field=> "designation", :filter=>"set"},

{:headerName=> "Bank", :field=> "bank", :filter=>"set"},

{:headerName=> "Bank A/C", :field=> "bank_ac", :filter=>"set"},

{:headerName=> "Date Of Joining", :field=> "doj", :filter=>"set"}
]
@employee_data = Employees.get_employee_data()
end

end

What we have done here is that we are creating a column definition array of hash and assigning it to a instance variable “@coldef_arr” and another variable which holds the query data in the form of a hash “@employee_data” and below we will see how to use this and populate the grid.

Javascript Code at the View End:

<script>

var gridOptions =
{
columnDefs: <%= @coldef_arr.to_json %>,
rowData: <%= @employee_data %>,
rowSelection: 'multiple',
rowHeight: 40,
headerHeight: 50,
suppressRowClickSelection: true,
enableColResize: true,
enableStatusBar: true,
enableRangeSelection: true
};

function manage_header_chekbox(){
if(document.getElementById("aghcb").checked == true){
gridOptions.api.selectAll();
$('#aghcb').attr('checked', true);
}else{
gridOptions.api.deselectAll();
}
}

document.addEventListener('DOMContentLoaded', function(){
var gridDiv = document.querySelector('#employee_grid');
new agGrid.Grid(gridDiv, gridOptions);
});

</script>

This above code is written in view end only and is executed when the page loads.

Ag-Grid takes gridOptions as its configuration hash. We have to just provide it the data in its acceptable format and the rest will be done automatically.

We can see that it takes columnDefs as an array of hash which we made in the controller by specifying the particular setting of individual columns and it takes rowData in the form of hash. Similarly, other config settings can also be given like rowHeight, headerHeight, enableStatusBar, enableRangeSelection and likewise. One thing to clear up is that the settings written in the columnDefs applies to individual columns while setting written in gridOptions applies to all columns by default.

 After executing the above-mentioned code you can see your grid in the web page. So this ends the summary of how to implement AG-grid with Ruby on Rails. For this demo you can visit the following link and get the taste of some robust features of AG- grid
http://demo.blog.mettletech.in/ag_demo.

TOP