BasicJQGrid

Javascript > Basic JQGrid

References

Class auto-wire:

To take advantage of the class auto-wire in the GPS javascript library you must specify: class="jqy-table-to-grid"

The example below is using the displayed HTML below and only the required fields in the GPS Table To Grid functionality (idColumn and title). Specifying the class only prompts the framework that the given table should be processed as a table-to-grid, all options are retrieved from the data property. NOTE: Some options are required and others depend on values in other options for full functionality.

Footers are independent of the intitial table. To render a footer you need to specify "footerRow":"true" and "footerData":"#selector". The selector should be choosing a div tag with display: none (to hide it from the UI) and the data in the input elements should match the table column display text (spaces are replaced with an underscore) for the name and the value is whatever you want to display.

Username	Developer Name	Random Number	Comment
jfarr	Jody Farr	42	This is a random comment!
mwalp	Mike Walp	13	This is a random comment too!
abeers	Andrew Beers	1337	If you don't like this documentation yell at him
bdye	Bryan Dye	1338	If you don't like the way this looks... Too bad


        
            <table id='devGrid' class='jqy-table-to-grid' 
                data='{"idColumn":"Username","title":"GPS Developers","footerRow":"true","footerData":"#devGridFooter","pager":"#devGridPager","pagerRowsView":"[10,20,40]"}'>
                <thead>
                    <tr>
                        <th name="Username">Username</th>
                        <th name="Developer">Developer Name</th>
                        <th name="RandomNumber">Random Number</th>
                        <th name="Comment">Comment</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>jfarr</td>
                        <td>Jody Farr</td>
                        <td>42</td>
                        <td>This is a random comment!</td>
                    </tr>
                    <tr>
                        <td>mwalp</td>
                        <td>Mike Walp</td>
                        <td>13</td>
                        <td>This is a random comment too!</td>
                    </tr>
                    <tr>
                        <td>abeers</td>
                        <td>Andrew Beers</td>
                        <td>1337</td>
                        <td>If you don't like this documentation yell at him</td>
                    </tr>
                    <tr>
                        <td>bdye</td>
                        <td>Bryan Dye</td>
                        <td>1338</td>
                        <td>If you don't like the way this looks... Too bad</td>
                    </tr>
                </tbody>
            </table>

            <div id='devGridFooter' style='display: none;'>
                <input name='Username' value='Totals'>
                <input name='Developer_Name' value='???'>
                <input name='Random_Number' value='4 #s'>
                <input name='Comment' value='WOW'>
            </div>
            
            <div id="devGridPager"></div>

Data Options

idColumn

Data Type: String
Prerequisite(s): Required
Description: The name of the column element's <th></th> tag which uniquely identifies a single row.
Values: Free Text

title

Data Type: String
Prerequisite(s): Required
Description: The title for the Grid
Values: Free Text

altRowsEnabled

Data Type: Boolean
Prerequisite(s): None
Description:
Values: true | false

altRowClass

Data Type: String
Prerequisite(s): "altRowsEnabled":"true"
Description: The class to be applied to alternating rows
Values: CssClassName

editable

Data Type: Boolean
Prerequisite(s): None
Description: Whether or not row clicks are tied to a dialog form
Values: true | false

editDialog

Data Type: String
Prerequisite(s): "editable":"true"
Description: The JQuery selector for the associated editDialog
Values: #JquerySelector

editDialogCaption

Data Type: String
Prerequisite(s): "editable":"true" && "editDialog":"#selector"
Description: The title for the associated editDialog
Values: Free Text

editAjaxDialog

Data Type: Boolean
Prerequisite(s): "editable":"true" && "editDialog":"#selector"
Description: Specifies whether or not the editDialog is associated to an Ajax URL
Values: true | false

editUrl

Data Type: String
Prerequisite(s): "editAjaxDialog":"true"
Description: The url that returns the html body of the editDialog relative to the root domain path, the value of the associated idColumn is appended to the route
Values: URL

reloadOnClose

Data Type: Boolean
Prerequisite(s): "editAjaxDialog":"true" && "editUrl":"relativeUrl"
Description: Will refetch a cleared dialog window using the editUrl with no parameters
Values: true | false

hideColumn

Data Type: string
Prerequisite(s): None
Description: The name of the column element's <th></th> tag for the column to hide
Values: Free Text

footerRow

Data Type: Boolean
Prerequisite(s): None
Description: Whether or not to render a footer row with your grid
Values: true | false

footerData

Data Type: string
Prerequisite(s): "footerRow":"true"
Description: The element containing the footer data
Values: #Jquery Selector

pager

Data Type: string
Prerequisite(s): None
Description: A JQuery selector for the unique ID of the div to be made into the pager
Values: #Selector

pagerRowsView

Data Type: Array of Integers (min length of 2)
Prerequisite(s): "pager":"#selector"
Description: An Array of Integers with a minimum length of 2, this is required when using a pager!
Values: Array of Integers

GPS Web Assets

Javascript > Basic JQGrid

References

Class auto-wire:

Data Options