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.



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-" 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>  


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


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

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:
  • URL : [string] The path of the wcf service or other file that receive the request parameters and return the JSON data. Default = '../../../DALService.svc/CallProcedure'
  • DatabaseParameters : [object] Necessary only when the service operation selected is CallProcedure. Its properties are the parameters to configure the connection with the DB. Include the follow suboptions:
    • Procedure : [string] The name of the stored procedure to list a table. All the other procedures (Create, Delete, Copy and Update) will be taken from this. Default = ''
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"
  • DBEngine : [string] (optional) The database engine to use. Default = 'SQLServer'
  • ConnnectionStringName : [string] (optional) The name of the connection string set it in the web config. Default = 'IndustrialDashboard'
  • TablesCount : [int] (optional, only to use Oracle) The count of tables that the stored procedure will be return. Default = 0
  • connectionParameters : [object] (optional) The request connection parameters. Include the follow suboptions:
    • method : [string] The request method (post,get,etc). Default = 'POST'
    • async : [bool] Set the request asynchronic or synchronic. Default = 'POST'

IndustrialSlickGrid additional Options (all optional, must be includede insde "Attributes" object)
  • Title : [string] The title of the IndustrialSlickGrid. Default = 'Industrial SlickGrid 2.0'
  • allowDelete : [boolean] Adds Delete functionality, based on its procedure. Defalult = false
  • allowCopy : [boolean] Adds Copy functionality, based on its procedure. Defalult = false

SlickGrid original options (all optional, must be includede insde "Attributes" object)
  • editable - (default false) If false, no cells will be switched into edit mode.
  • autoEdit - (default true) Cell will not automatically go into edit mode when selected.
  • rowHeight - (default 25px) Row height in pixels.
  • enableAddRow - (default false) If true, a blank row will be displayed at the bottom - typing values in that row will add a new one.
  • leaveSpaceForNewRows - (default false)
  • enableCellNavigation - (default true) If false, no cells will be selectable.
  • defaultColumnWidth - (default 80px) Default column width in pixels (if columnscell.width is not specified).
  • enableColumnReorder - (default true) Allows the user to reorder columns.
  • asyncEditorLoading - (default false) Makes cell editors load asynchronously after a small delay.
  • asyncEditorLoadDelay - (default 100msec) Delay after which cell editor is loaded. Ignored unless asyncEditorLoading is true.
  • forceFitColumns - (default false) Force column sizes to fit into the viewport (avoid horizontal scrolling).
  • enableAsyncPostRender - (default false) If true, async post rendering will occur and asyncPostRender delegates on columns will be called.
  • asyncPostRenderDelay - (default 60msec) Delay after which async post renderer delegate is called.
  • autoHeight - (default false) If true, vertically resizes to fit all rows.
  • editorLock - (default Slick.GlobalEditorLock) A Slick.EditorLock instance to use for controlling concurrent data edits.
  • showSecondaryHeaderRow - (default false) If true, an extra blank (to be populated externally) row will be displayed just below the header columns.
  • secondaryHeaderRowHeight - (default 25px) The height of the secondary header row.
  • syncColumnCellResize - (default false) Synchronously resize column cells when column headers are resized
  • rowCssClasses - (default null) A function which (given a row's data item as an argument) returns a space-delimited string of CSS classes that will be applied to the slick-row element. Note that this should be fast, as it is called every time a row is displayed.

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.
  • !id Indicates the widget that that column contains the necessary IDs to update, copy and delete data. The ID column won't be shown. If no ID column is indicated, no database modifications will be made.
  • !ac (Align Center) - Centers the contents of the cell.
  • !al (Align Left) - Aligns the cell's contents to the left.
  • !ar (Align Right) - Aligns the cell's contents to the right.
  • !wd:Number (Width) - Sets the width of that column in pixels. Eg.: "Email!wd:120"
  • !rq (Required) - Makes that value required. Consequently, when editing, that cell will not be able to be blank.
  • !pc (Percentage) - Indicates that that column will contain percentages.
  • !{type:"ddp",data:"PROCEDURE-NAME"} (DropDownPicker Column) Makes that column's cells editable by a DropDownPicker. The procedure name must contain two columns: the first one must contain the text to show to the user, and the second the values to set in the database. Eg:


Public methods

  • refreshData(queryParameters) - Calls SlickGrid's redraw. (QueryParameters are optional)
  • getRowData(rowNumber) - Returns an object with the data of the row.
  • setEditable(boolean) - Changes all SlickGrid's properties necessary to make the grid editable or not.
  • getDDPColumnElement(columnName, key) - Returns the value of the key from the column name specified.

Last edited Jun 24, 2010 at 3:36 PM by jcastagnino, version 17


No comments yet.