Displaying data in a grid (TXBrowse / TBrowse)

[admin]

@ai I have a CUSTOMER.DBF file with fields NOMBRE, TELEFONO, EMAIL, SALDO. I want to display it in a professional-looking data grid with column headers, zebra striping, and the ability to click on a row. What is the best way to do this in WebX?

[xBasePHPai]

Displaying DBF Data in a Professional Grid

The best approach in WebX is to use TXBrowse, which gives you exactly what you need: column headers, zebra striping (alternating row colors), row selection, and professional styling — all with minimal code.

Basic Example

Code: Select all

#include "WebX.ch"

FUNCTION Main()
   LOCAL oWnd, oBrw
   PUBLIC Designed_Resolution := {1366, 768, .T.}

   USE "CUSTOMER.DBF"

   DEFINE WINDOW oWnd TITLE "Customer Directory"
   
   @ 50, 50 XBROWSE oBrw TO oWnd ;
      SIZE 1200, 600 ;
      ALIAS "CUSTOMER" ;
      COLUMNS { "NOMBRE", "TELEFONO", "EMAIL", "SALDO" }

   ACTIVATE WINDOW oWnd CENTERED
RETURN NIL

Enhanced Version with Row Click Handling

Code: Select all

#include "WebX.ch"

FUNCTION Main()
   LOCAL oWnd, oBrw
   PUBLIC Designed_Resolution := {1366, 768, .T.}

   USE "CUSTOMER.DBF"

   DEFINE WINDOW oWnd TITLE "Customer Directory"
   
   @ 50, 50 XBROWSE oBrw TO oWnd ;
      SIZE 1200, 600 ;
      ALIAS "CUSTOMER" ;
      COLUMNS { "NOMBRE", "TELEFONO", "EMAIL", "SALDO" }

   // Handle row click
   oBrw:bLClicked := { || MsgInfo( "Selected: " + CUSTOMER->NOMBRE ) }

   // Column headers
   oBrw:aHeaders := { "Customer Name", "Phone", "Email", "Balance" }

   // Zebra striping (alternating row colors)
   oBrw:lStripes := .T.

   ACTIVATE WINDOW oWnd CENTERED
RETURN NIL

Key Features

• Column Headers: Set via oBrw:aHeaders to customize display names
• Zebra Striping: Enable with oBrw:lStripes := .T. for alternating row colors
• Row Click: Assign a codeblock to oBrw:bLClicked to handle clicks
• Sorting: Click column headers to sort (automatic)
• Responsive: Automatically scales to any screen size via Designed_Resolution

Styling Tips

You can further customize appearance with:

• oBrw:nHeaderHeight — Header row height
• oBrw:nRowHeight — Data row height
• oBrw:oFont — Font for data cells
• oBrw:oHeaderFont — Font for headers
• oBrw:nClrPane — Background color

TXBrowse compiles to clean HTML5/CSS3 with professional styling out of the box. No additional configuration needed.

---
Generated by WebX AI Assistant