Custom Render property

Official Content
This documentation is valid for:
Uses a custom user control for rendering grids. Applies to all selection and grid tab objects.

Description

Presenting structured information in web applications has become an important requirement in today's applications. The more intuitive the data is presented, the better users can understand the contents. In addition, extra functionalities like filtering, sorting, paging provide an important increase for the user experience which is one of the most important things for the success of our applications.

Let's see some examples of well-designed data structures we are getting used to seeing in web applications.

ExtJS Grid

ExtJSGrid

TableSorter: TableSorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. TableSorter can successfully parse and sort many types of data including linked data in a cell.

TableSorter

Flexigrid: Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an XML based data source using Ajax to load the content. Similar in concept with the Ext Grid but based on jQuery, which makes it lightweight and follows the jQuery mantra of running with the least amount of configuration.

Flexigrid


As of GeneXus X Evolution 1, the grid control has now a new property named Custom Render that lets you select a user control that was implemented for that purpose.

How to use it?

Usage is very simple, you just need to select your grid and change Custom Render property to one available control from the list. For example, suppose you have implemented the following custom renders:

CustomRenderDesign

If you select the gxui.GridExtension which is part of gxui Library. Next time you execute your web panel you will see that the grid now looks like:

CustomRenderExecution

The standard grid has been replaced by this control and all information was also loaded on it.

FAQ

  • How can you implement your own custom render control?
    • You can follow the sample described here.

Run-time/Design-time

This property applies only at design-time.

Scope

Objects: Web Panel
Platforms: Web(.Net, Java)

Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.