Uniface Sample: HTMLGrid

Uniface 9.6.04
Sample Version: 1.0
December 2013

Demonstrated Functionality

This sample provides a basic example of a read-only HTMLgrid using the JavaScript libraries JQGrid and JQuery. It demonstrates:

The sample shows:

Files

This sample consists of the following files:

File name

Description

UHGrid_Readme.html

This file

UHGrid_part1.xml

Uniface export file containing:

  • Form UHGRIDXML, XML version Sample
  • Form UHGRIDJSON, JSON version Sample
  • Form UHGRIDSCROLL  Example of incremental or lazy loading
  • Session Service UHINVXMLSSV, XML data extraction Sample
  • Session Service UHINVJSONSSV, JSON data extraction Sample
  • Model UHJQGRID, the application model

UHGrid_INVHEADER.xml

Test data

UHGridXML.txt
UHGridJSON.txt
UHGridSCROLL.txt

HTML with Javascript/JQGRID script, XML version
HTML with Javascript/JQGRID script, JSON version
HTML with Javascript/JQGRID script  JSON incremental load version

UHGrid_JQ.zip

Reduced version of JQGRID/JQUERY

Knowledge Prerequisites

To use this sample, knowledge of the following topics is assumed:

Uniface Subject

Knowledge Level

Uniface development

Intermediate

Uniface Proc code

Intermediate

JQGRID
Basic
JQuery
Basic

Steps

  1. Add the following line as the first line in the [FILES] section of your IDF assignment file.
    uh*.*     .\samples\uh*.*
  2. Create a subfolder samples in your projects folder.
  3. Unzip UHgrid.zip and place all files in your samples folder.
  4. Import the Uniface sources.
    /imp UHGrid_part1.xml
  5. Import the test data.
    /imp UHGrid_INVHEADER.xml
  6. Compile the Model UJQGRID
  7. Compile the Uniface sources.
    /all UH*
  8. Unzip file UHGrid_JQ.zip in the project default folder. That will create a grid subfolder.
  9. Move or copy the files UHGridXML.txt, UHGridJSON.txt, and UHGridSCROLL.txt located in the samples folder and place in the project default folder.
  10. Start the IDF and test the forms UHGRIDXML,  UHGRIDJSON, and UHGRIDSCROLL.

Column Sorting


When the user clicks a column header the Grid will be sorted on that column and two small triangles will be shown with the bold version depicting sort direction.
When you click again it will switch between an ascending and descending sort order.
Sorting is a default function of the grid no additional code is necessary.

Column Reordering via Drag-N-Drop


Selecting a column header (Mouse down) causes the pointer to change at which point you can drag the column horizontally to an alternate position. releasing the mouse button will cause the column to reorder to the selected position.

Data Paging


JQgrid provides a number of options to regulate and control the flow of data into grids. Options exist to load all of the data at once or deliver data as pages of information. These two samples provide examples of delivery by pages controlled by the paging options in Uniface's drivers. Pages can be selected via the paging bar at the bottom of the grid.

Data Search


One of the Grids options is to search or filter the results. when selected a small popup appears within which you can choose to select one of the columns, choose an operator like equals, and a value. When the find button is selected the grid is redisplayed with rows matching the selection. A more complex option does exist for multiple search criteria but this sample provides for single search criteria.

Incremental Load


Instead of loading data via pages you can configure the grid to load incrementally using for example the scroll bar. When you request the grid to scroll down past the available rows already loaded the grid will automatically load the next page of data. In this mode the paging arrows are disabled.

More Information