Javascript API

{Object} Grid

Property or Method name Description Default

opts [NOTE] The options labled opts.__property__ are actually in the opts object (grid.opts.__property__). They aren't straight on grid.__property__. But these are settable from the jQuery plugin $(element).grid({opts}); Note

opts. title property Title attribute on the table element. ""

opts. action property Action attribute on the table element. This is the PHP file that will be called for every AJAX call. Read the PHP section to get started on that. ""

opts. nRowsShowing property How many rows to show in the grid. This will end up being the mySQL Limit. 10

opts. minAllowedColWidth property Since you're able to specify a column width on the <th>, the grid won't allow the user to resized those columns beyond this minimum pixel value. 50

opts. class property Classes stored on the table element. 50

opts. page property What page to start the grid on. 1

opts. showPager property Whether to show the paging controls or not. true

opts. deleting property Whether to allow deleting on the grid. When true, this creates a far right column of delete buttons. Deleting will always ask the user to confirm with the rowID before deleting. Deletions are done via AJAX and then the row is removed from the DOM, it does not cause a refresh. false

opts. checkboxes property When true will add a column of checkboxes on the far right. Checking a box on a row will trigger the onRowCheck callback. You should set this callback in the callbacks object for your grid call. Checking a box will also cause a rowClick and a cellClick callback. false

opts. rowNumbers property When true will add a column of row numbers on the far left. false

opts. editing property If the entire grid is editable or not. This re renders the grid with all the editable fields false

opts. width property Grid width 800

pager property Reference to the grid's pager if opts.pager was set to true. false

cols property A comma delimited list of all the columns showing in the grid. ""

columns property The columns data object. This object keyed by column name, holds data about each column. Columns that were created from the html table are gauranteed to have "header" and "col". If type is set, that will be here, and if width is set, that will be here too. ex: {contactFirstName: {header: "First name", col: "contactFirstName", type: "text"}} {}

toSave property Array of rowIDs to save when save is pressed. Contains no data other than the rowID. This array has data after you edit / focus certain editable fields on the grid. []

notify(msg,ms) method Shortcut / helper function for creating a new Dialog object. takes a message and a number of miliseconds. If the 'ms' is set, the dialog will go away after that much time. function

alert(type,title,msg) method Shortcut / helper function for creating a new Dialog that has an OK button. Type can be one of the bootstrap notification classes. none | success | warning | important | info | inverse. function

error(msg) method Shortcut / helper function for creating a new Error Dialog. Just sets the title and type for you. function

confirm(msg,callback) method Shortcut / helper function for creating a new Confirm Dialog. This just helps in creating a dialog with 2 buttons, along with an event that attaches the passed callback function when hitting OK. function

{Object} Pager

grid property Reference to the parent Grid object null

currentPage property The current page of the pager. 1

totalPages property How many total pages exist in the database. This is independent from the grid's nRowsShowing, this has to do with the ajax load query. 1

slider property Reference to the pager's slider object. The slider controls fast paging. null

update method Gets all the refreshed data from the parent Grid object, rebuilds the HTML from template, re-adds the event listeners for the grid. Why am I doing that!? Because its much faster to rebuild the HTML from a string template, than it is to change out a bunch of values in the DOM. And then events are bound to the root pager element and delegated to all the parts. function

next method Loads the next available page in the grid. function

prev method Loads the previous available page in the grid. function

goto (page) method Navigates to that page in the grid. This causes a refresh, changes the page number, and moves the slider. function

{Object} Slider

pager property Reference to the parent Pager object null

thumb property DOM reference to the thumb of the slider. null

min property Minimum slide number. The slider won't go below this. 0

max property Maximum slide number. The slider won't go below this. 100

val property Current value of the slider in terms of your max and min. 0

setVal method Set's the value of the slider both in property, DOM and moves the thumb. This does NOT cause a refresh, if you want that to happen, use pager.goto(page) instead. function

{Object} Dialog

grid property Reference to the parent Grid object null

$dialog property jQuery reference to the dialog box. null

tmpl property Which template to use notify|confirm|alert where notify has no buttons, alert has 1 and confirm has 2. You can make your own by adding them to grid._templates. Go look at the code to see how thats done. All of the properties from this object are passed to the template. notify

type property the type of dialog. This is different from tmpl in that it's tied some css classes. The same classes that bootstrap uses for notifications. none | success | warning | important | info | inverse notify

title property the title of the dialog box 0

msg property the actual text content ""

autoFadeTimer property Set this to the number of miliseconds you want the dialog to fade away after. If 0 or null, the box will always stay alive. 0

blur property Adds a CSS class blur to the parent div ".columns" to style that. true

show method shows the dialog box function