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:


This sample consists of the following files:

File name



This file


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


Test data


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


Reduced version of JQGRID/JQUERY

Knowledge Prerequisites

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

Uniface Subject

Knowledge Level

Uniface development


Uniface Proc code




  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