Overview

Serial Number Widget

Overview

The Serial Number Widget automatically adds sequential numbering to your Mendix DataGrids and ListViews. This lightweight, plug-and-play widget eliminates the need for custom attribute calculations or microflows to display row numbers, providing a clean, efficient solution for data enumeration.

Features

• Dynamic Numbering: Automatically updates when sorting, filtering, or pagination changes
• Multi-Component Support: Works seamlessly with both DataGrids and ListViews
• No Backend Required: Pure frontend implementation with zero microflows needed
• Responsive Design: Maintains correct numbering during all grid operations
• Zero Configuration: Simply drag, drop, and select your component type

Benefits

• Improved User Experience: Help users track and reference specific rows in large datasets
• Print-Ready Reports: Generate numbered reports directly from your DataGrids
• Developer Efficiency: Implement in seconds without writing custom code
• Reduced Complexity: Eliminate microflows and attributes created solely for row numbering

Use Cases

• Inventory and product lists
• Customer or employee directories
• Task and ticket management systems
• Financial reports and ledgers
• Any data listing requiring sequential numbering

Technical Details

• Built with React using modern Mendix widget architecture
• Lightweight with minimal DOM impact
• Uses MutationObserver for reliable updates across all Mendix versions
• Compatible with Mendix 9.0 and higher

How to Use

1. Download from Marketplace and add to your project
2. Drag the widget into a DataGrid column or ListView template
3. Set the "Data Source Type" property to match your component (datagrid/listview)
4. Run your page - serial numbers appear automatically!

About the Developer

This widget was created to solve a common Mendix development need - adding simple yet dynamic row numbering to data components without backend calculations. Built with performance and ease-of-use in mind, it represents our commitment to creating high-quality, practical solutions for the Mendix community.

Documentation

Typical usage scenario

• Add sequential numbering to DataGrid rows or ListView items without backend attributes
• Display row numbers that automatically update when sorting, filtering or pagination changes
• Create print-ready reports with numbered rows
• Enhance data tables with clear row references for user navigation
• Simplify data referencing in training materials and user guides

Features

• Automatic row numbering for DataGrids and ListViews
• Dynamic updates when data is sorted, filtered, or paginated
• Zero backend configuration - pure frontend implementation
• Simple drag-and-drop installation with minimal configuration
• Compatible with Mendix 9.0 and higher, including React-based Mendix Client (10.7+)

Installation

1. Import the module into your Mendix project
2. Add the Serial Number widget to your page
3. Place it inside a DataGrid custom column or ListView
4. Set the "Data Source Type" property to match your component (datagrid/listview)
5. Run your page - serial numbers appear automatically!

Configuration

The widget requires only one configuration:

• Data Source Type: Select between "listview" or "datagrid" based on where you've placed the widget

No additional configuration is needed as the widget automatically detects its position and calculates the appropriate serial number.