Industrial SlickGrid

This widget is an adaptation of JQuery-based Michael Leibman's SlickGrid.
Essentially, database CRUD (Create, Refresh, Update and Delete) capabilities were added.

How? well, basically, user sets the stored procedure that contains the data refresh of the table, and, following some structures, the widget automatically calls Create, Update, and Delete procedures in order to modify the tables' data, and automatically detects database data types.

idsg_sample.png

HTML Page

The HTML page that holds the widgets is a regular static web page.

Head Section

In order to instruct the browser to download the proper javascript files and CCS files we must include the following references in the header:

Style Sheets (CSS) Files

<link href="/IndustrialDashboard/ForeignFiles/slickGrid/Styles/slick.grid.css" type="text/css" media="screen" charset="utf-8" rel="stylesheet"/>
<link href="/IndustrialDashboard/ForeignFiles/jquery/Styles/jquery-ui-1.7.2.custom.css" type="text/css" media="screen" charset="utf-8" rel="stylesheet"/>
<link href="/IndustrialDashboard/ForeignFiles/slickGrid/Styles/examples.css" rel="stylesheet" type="text/css" />
<link href="/IndustrialDashboard/Widgets/IndustrialSlickGrid/Styles/IndustrialSlickGrid.css" rel="stylesheet" type="text/css" />
<link href="/IndustrialDashboard/Styles/IndustrialDashboard.css" rel="stylesheet" type="text/css"  />

Widget code

<script src="/IndustrialDashboard/Scripts/IndustrialDashboard.js" type="text/javascript"></script>      
   
<script src="/IndustrialDashboard/ForeignFiles/jquery/Scripts/jquery-1.4.2.min.js" type="text/javascript" language="javascript"></script>
<script src="/IndustrialDashboard/ForeignFiles/jquery/Scripts/jquery.rule-1.0.1.1-min.js" type="text/javascript" language="javascript"></script>
<script src="/IndustrialDashboard/ForeignFiles/jquery/Scripts/jquery.event.drag.custom.js" type="text/javascript" language="javascript"></script>
<script src="/IndustrialDashboard/ForeignFiles/jquery/Scripts/jquery-ui-1.7.2.custom.min.js" type="text/javascript" language="javascript"></script>

<script src="/IndustrialDashboard/ForeignFiles/slickGrid/Scripts/slick.grid.js" type="text/javascript" language="javascript"></script>
<script src="/IndustrialDashboard/ForeignFiles/slickGrid/Scripts/slick.editors.js" type="text/javascript" language="javascript"></script>
<script src="/IndustrialDashboard/Widgets/IndustrialSlickGrid/Scripts/IndustrialSlickGrid.js" language="javascript" type="text/javascript"></script>  

Container

All widgets need a HTML container as a parent to hold all its contents; we usually use <DIV> elements. The <DIV> tags created to hold widgets must have at least an ID property to be able to be referenced in javascript code. The position and size of this <DIV> will be used by the widget code to locate and scale its internal visual objects.
Any way if the size is not set it the widget will use and set a default size. The size only can set it in the tag of the container or by javascript, the widget doesn't support set the size of its container by CSS Stylesheets.

<div>
      <div id="pSG" style="position:relative;height:550px;width:98%;margin-top:25px;left:0px;margin-left:1%;"></div>
</div>

Initialization

Javascript code is execute as soon as is loaded into the browser’s memory, but running javascript code without being sure that the rest of the page is already loaded can lead to run time errors, so the typical start up code is placed inside the OnReady event of the page.

//Set Initial Options, using "CallProcedure" method, also set the procedure.             
var options = { 'URL': '/IndustrialDashboard/DALService.svc/CallProcedure', 'DatabaseParameters': { 'Procedure': 'dbo.spSlickGridDatas' }, Title:         'Industrial SlickGrid'
    , Title : 'Industrial SlickGrid Sample'
    , Attributes: { defaultColumnWidth: 130, enableColumnReorder: true, rowHeight: 20, enableCellNavigation: true
    , editable: true, enableCellNavigation: true, AllowDelete: true
  }
};
//Create an Instance of IndustrialSlickGrid
slickEditorPath = '/IndustrialDashboard/ForeignFiles/slickGrid/Styles/images/';
var sg = new IndustrialSlickGrid(document.getElementById('pSG'), options);

//Refresh Widget
sg.RefreshData();

Initialization options

The following table depicts the initialization options of IndustrialSlickGrid. If an option is not specified, the default value will be applied.

External Options: The widget automatically deletes the last "s" of the original procedure, in order to mantain logic.

Eg: Default listing procedure: "dbo.Employees"
Create procedure will be: "dbo.EmployeeCreate"
Delete procedure will be: "dbo.EmployeeDelete"
Copy procedure will be: "dbo.EmployeeCopy"

IndustrialSlickGrid additional Options (all optional, must be includede insde "Attributes" object)
SlickGrid original options (all optional, must be includede insde "Attributes" object)
Column properties (set from the stored procedures, all optional)

In order to set properties to a whole column, arguments can be set from the Stored Procedures, with a "!" and the desired property.

For example:
The column "Name!rq" will set that column as required.

ddpExample.png

Public methods