By: Jonathan Benedicto
Abstract: A look at PlatinumGrid Lite, the data-grid free for all registered users of HTML5 Builder and RAD Studio XE3
Abstract: A look at PlatinumGrid Lite, the data-grid free for all registered users of HTML5 Builder
Virtually all web and mobile applications require data grids –controls that present a table of data to a user, so that they can see data in a consistent, structured format that everyone is familiar with. However, very few of these controls are available to the application developer in a package that is both easy to integrate and easy for the end user to operate. PlatinumGrid Lite is the solution to these difficulties. This grid package, which is free for all registered users of HTML5 Builder (including trial registrations), is both simple for the developer to use – integrating directly into HTML5 Builder, and extremely user-friendly – offering a clear, straightforward interface that is completely intuitive.
PlatinumGrid Lite has the features that one would expect to find in a data grid control: Multiple column formats and types, filtering, sorting, editing and selection. It also features a comprehensive API enabling it to be tailored for any application’s requirements. This article attempts to demonstrate the major feature points of PlatinumGrid Lite.
PlatinumGrid Lite integrates directly into HTML5 Builder, allowing you to drag-and-drop it directly from the tool palette into your applications. When selected on the page, the grid’s properties are automatically presented in the Object Inspector. Columns are configured using the built-in column property editor that provides a RAD view of the columns and their properties. In addition, the grid’s documentation is integrated so that pressing F1, in the IDE when the grid is selected, will bring up the correct documentation.
Screenshot of HTML5 Builder with PlatinumGrid Lite dropped onto page
Screenshot of Columns property editor
PlatinumGrid Lite is fully cross-browser compatible, from IE 6 through to “current” browsers such as Chrome, Firefox, Safari and IE 10. It presents a typical web data-grid user interface to the user, which, using the default settings, is a pager, command-bar, column headings, filtering bar and the data rows. The visibility of these separate items is controlled by a number of properties. The user interface is designed to be clear and user-friendly. Special attention was paid to making interactive controls, such as the pager, easy for the user to identify and operate.
Screenshot of PlatinumGrid Lite running in browser
The pager control has a number of settings that control its appearance and functionality. These settings include: the number of rows to show per page, the visibility of the total record count and the number of page numbers to display at any one time. The pager links are SEO-friendly, allowing search engines to be able to see data past the first page.
Clicking on any column header will cause PlatinumGrid Lite to sort on that column. Clicking on the header a second time will reverse the sort order.
Last Name column sorting in ascending order
Columns can be resized by clicking and dragging the borders between the columns. Columns can also be moved by clicking and dragging the header to a different location in the grid.
Dragging Last Name column to a new position in the grid
The filter bar allows users to enter text to limit the rows returned to rows that match the data they entered. By default, PlatinumGrid Lite automatically filters the grid as the user types. This behavior can be altered so that the user has to press a confirmation key or exit the filter control, before the filtering is performed. The Boolean column type automatically presents a drop-down filter list to the user, instead of the text entry field, as Boolean columns can only have true or false values.
Filtering so that only records starting with B are shown
Horizontal and vertical scrolling is performed in the grid data row area if the number of rows or columns exceeds the dimensions of the display area. The column headers automatically follow the scrolling so that the data is always lined up with the headers.
Database records can be created, edited and deleted directly in the grid, without having to write a single line of code. PlatinumGrid Lite automatically creates the necessary SQL statement and executes it against the database. This functionality is available via the API or via the edit column and command-bar.
Grid row in editing mode
Double-clicking on a row in an editable grid (not ReadOnly), or clicking Edit in the edit column, will activate the grid’s inline row editor. Any editable cells will show editor controls instead of the cell value, allowing the user to change the values. Clicking Post in the edit column will save the changes to the database row. Clicking Cancel will hide the editors, reverting any changes made to that row.
PlatinumGrid Lite fully supports the data access framework provided by the RPCL. Table and query components can be connected to PlatinumGrid Lite by linking the Datasource component of the table or query to the Datasource property on the grid.
PlatinumGrid Lite connected to a Datasource control
To maximize application performance, data operations such as filtering, sorting or paging are performed on the database server. PlatinumGrid Lite’s data layer takes the user-provided queries, parses them, and applies additional criteria as necessary so that the query returns the results the user is expecting.
In addition, PlatinumGrid Lite supports retrieving data from an in-memory dataset. This is performed by providing the data to PlatinumGrid Lite via the CellData property. Filtering and sorting are automatically handled by PlatinumGrid Lite on the in-memory data. Data editing of in-memory data can be performed in the application by responding to the data editing events provided by the API.
PlatinumGrid Lite supports both cell and row selection. Clicking on any cell in the grid will, depending on the configuration of the grid, select that cell or the row that contains that cell. In addition, a selection column can be enabled, which shows a checkbox at the beginning of each row, allowing the user to select the row by checking the checkbox.
Selecting a row by checking the row select checkbox
PlatinumGrid Lite ships with a number of samples to get you started with using the grid. There are samples for using in-memory data, using a data source with the grid, and a slightly more advanced sample that demonstrates how you can use the API to alter the data rows before they are rendered to the browser.
PlatinumGrid Lite is available to all registered users (including trial users) of HTML5 Builder and can be downloaded directly off the Embarcadero Developer Network site.
For more powerful features such as date/time columns, command columns, image columns, memo rows, CSV/PDF/XLS exporting, grouping, master/detail presentation, and aggregation display, refer to the full edition of PlatinumGrid.
Click here to download a free 30-day trial of HTML5 Builder, part of RAD Studio>
@RADtools on Twitter
Server Response from: ETNASC02