This project is read-only.

Grid Configuration

vpGrid is configured by calling vpGrid.init() method and passing this method an options object.

To see the details on how and when to call the vpGrid.init() method in the web page, donwload the vpGrid Starter Project from the download page.

The options object is a literal object containing any of the following properties:

  • enableAutomaticPropagationOfUpdateInsertDeleteOperations = true|false (default = true)
    • by default vpGrid performs the CRUD operations on the fly as soon as an item is changed or is added in the grid. 
    • vpGrid has been designed to separate UI changes in the grid due to cell editing/form editing or row insertion/deletion from corresponding calls to the server. This design enables the grid to work offline once all data has been loaded.
    • To set the grid in an offline mode, set the enableAutomaticPropagationOfUpdateInsertDeleteOperations option to false: you can execute the CRUD operations, at any time, by calling the public method vpGrid.updateInsertDeleteDataOnRemote()
  • enableUserInfo = true | false (default = false)
    • When set to true, vpGrid will construct a literal object that is called the User Info object.
    • This object holds the name, identity and roles of the current user.
    • The User Info object is accessible at vpGrid.currentUser and has the following signature :
      • vpGrid.currentUser = {
        • name : "name of the user",
        • login : "login of the user",
        • roles : ["role1", "role2", ...] -> string array that lists all roles the user is in.
        • }
    • To build this object, an Ajax call is done at the url specified in the userInfoUrl option (see below). This Ajax call is done before the grid is constructed.
    • If you need to augment or change  the content of the User Info object, the grid exposes an event called onUserInfoReady: this event enables you to change the User Info object after it has been initialized from the Ajax call.
    • The User Info object is the basis for implementing security : vpGrid.currentUser literal object exposes two methods :
      • isInRole()
      • isNotInRole()
    • Typical usage of these methods is :
    • if (vpGrid.currentUser.isInRole("Governance")){ // show/hide specific part of the UI}
  • userInfoUrl
  • enableGlobalInfo = true | false (default = false)
    • When set to true, vpGrid will construct a literal object that is called the Global Info object.
    • To build this object, an Ajax call is done at the url specified in the globalInfoUrl option (see below).
    • This Ajax call is done before the grid is constructed.
    • If you need to augment or change  the content of the Global Info object, the grid exposes an event called onGlobalInfoReady: this event enables you to change the Global Info object after it has been initialized from the Ajax call.
    • The Global Info object is accessible at vpGrid.globalInfo.
    • The Global Info object is the place where you can store any business data that is global to the web page or global to the application
  • globalInfoUrl
  • enableRemoteLogging = true | false (default = false)
    • When set to true, vpGrid will forward any client-side error up to the remote server.
    • Error details are sent by requesting the url specified in the remoteLoggingUrl option (see below).
    • Errors and exceptions are tracked only if you use the public methods vpGrid.logException() and/or vpGrid.logError():
myFunction = function (input) {
      try {
if (input === null) {
vpGrid.logError({
functionName: "myFunction",
message: "input parameter is not valid."
});
}
//code that might fails

     } catch (e) {
             vpGrid.logException(e);
     }
}
  • remoteLoggingUrl
  • enableFilterToolbar = true | false (default = true)
    • When set to true, the jqGrid Filter Toolbar is added to the grid.
    • The jqGrid filter toolbar is then preconfigured in a way that is suitable for most business needs : when the user clicks in a search box, an autocomplete list is automatically showed with all values (filtered in alphabetical order) contained in the column, the user can select one item in the list or can type any text, the grid is automatically filtered when the first character is typed.
    • When some text has been typed in one search box, autocomplete lists of other untouched search box are automatically filtered to reflect the filtered items in the grid.
    • If one or more columns must not be filtered by the user (see the column Price below), you must use the column configuration data tag data-vpgrid-column-filterable="false"
    • jqGrid Filter Toolbar with Autocomplete
    • Search filters are dynamically updated when some text is typed in other search box:
    • jqGrid Filter Toolbar
  • enableOperatorsInFilterToolbar= true | false (default = false)
    • When set to true, an operator selector is added in each search box of the jqGrid Filter Toolbar:
    • Operators in Filter Toolbar
  • enableRowCheckbox = true | false (default = true)
    • When set to true, jqGrid generates a checkbox as the first column of the grid.
    • This checkbox enables the user to select one and only one item in the list.
    • When no item is selected in the grid, one or more buttons in the vpGrid ribbon may become clickable (like the add new item button)or unclickable upon specific business requirements:
      • vpGrid ribbon
    • Each time an item in the grid is selected by clicking its checkbox, one or more buttons in the vpGrid ribbon may become clickable (like the view/edit button) or may become unclickable upon specific business requirements:
      • vpGrid ribbon
  • enableMultiSelect = true | false (default = false)
    • This option is active only when enableRowCheckbox=true
    • When set to true, user can select multiple items in the grid by clicking each item checkbox
    • This option is not yet tested
  • defaultCaption = string
    • This option defines the text that appears in the grid caption (the jqGrid title bar)
    • defaultCaption should be any string.
    • For example, in the above screenshot defaultCaption="AdventureWorks Products"
  • enableCustomCaption= true | false (default = false)
    • When set to true, the defaultCaption content is ignored and replaced by your own HTML elements.
    • This option enables you to inject in the jqGrid title bar any kind of filters to filter data on server-side (select list, checbox, textbox, etc...)
    • The custom content of the caption bar is defined in the web page inside a div like :
      • <div role="vpgrid-schema-caption">...</div>
    • For an example of a custom caption, donwload the vpGrid Starter Project from the download page.
  • enableCustomStatusBar= true | false (default = false)
    • When set to true, a bottom toolbar is activated in jqGrid.
    • This bottom toolbar is used by vpGrid as a status bar. The content of this status bar is defined in the web page inside a div like :
      • <div role="vpgrid-schema-status-bar">...</div>
    • Following is an example of a status bar that shows the number of rows loaded from the server:
      • Status bar
    • The status bar can contain any HTML elements to meet your business requirements.
    • For an example of a custom status bar, donwload the vpGrid Starter Project from the download page.
  • numberOfVisibleRows = int (default= 11)
    • This options defines the number of lines that are visible in the grid. Instead of defining the height of the grid you may defines the height as how many rows should be visible in the grid. The height is dynamically calculated and then passed to the jqGrid option object at initialization.
  • fitToBrowserWidth= true | false (default = true)
    • When set to true, the jqGrid option autowidth will be set to true: the grid will be sized to fit all width of the browser window.
    • The width of each column will be automatically adjusted when this option is set to true : some column may expand while others may shrink. To control the exact size or to set a minimum width for a specific column, you will have to configure the column with the following data tags:
      • data-vpgrid-column-width = <minimum size in pixel>
      • data-vpgrid-column-fixed-width = "true" | "false"
  • minColWidth = int (default = 60)
    • This options defines the minimum width (in pixels) of every visible columns in the grid
    • This option is ignored for every column with the following data tag:
      • data-vpgrid-column-fixed-width = "true"
  • fixedColWidth =true | false (default = false)
    • When set to true, this option disables the shrinkToFit jqGrid option.
    • This option is useful when you have a small set of columns that do not need to fill the entire browser window.
  • enableColumnReordering = true | false (default = false)
    • When set to true, this option enables the user to reorder the visible columns by drag and dropping the column header.
  • locale = string (default = 'en')
    • This option enables to control the filtering order of the autocomplete lists generated by vpGrid in search filters and in Inline Cell Editing mode.
    • This option defines the language used in the grid to show the data
    • Valid values are : 'en', 'fr', 'de', 'es', etc...
    • At runtime, you can get this value by calling the public method vpGrid.currentCulture().
  • enableSummaryRows = true | false (default = false)
    • When set to true this option enables to show 1 to N summary rows.
    • The number of summary rows is defined by the numberOfSummaryRows option
    • Summary rows may appear at the top or at the bottom of the grid. The place where summarys rows appear is defined by the placeSummaryRowsOnTop option;
    • A summary row is the place to show some computation on the corresponding column like the sum
    • To define the content and style of a summary row, you must subscribe to the vpGrid event onSummaryCellRendering.
  • placeSummaryRowsOnTop = true | false (default = false)
  • numberOfSummaryRows = int (default = 1)
  • datepickerOptions = literal object
    • This option enables to define the default jQuery-UI datepicker options for any datepicker showed in the grid.
    • This option must be set to handle how dates are entered in Cell Editing mode.
    • The default options used for datepicker are :
      • {
        dateFormat: 'yy/mm/dd',
        showOtherMonths: true,
        selectOtherMonths: true
        }
  • crudOptions
  • jqGridOptions

Last edited Sep 19, 2014 at 10:29 PM by HenridOrgeval, version 43