Serial Number Generator

Content Type: Widget
Categories: Utility

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.

Releases

Version: 1.0.0
Framework Version: 9.0.5
Release Notes: Version 1.0.0 (Initial Release) Release Date: [Current Date] We are excited to announce the initial release of the Serial Number Widget for Mendix! Features Dynamic serial numbering for DataGrid and ListView components Automatic position detection and numbering of visible rows Real-time updates during sorting, filtering, and pagination Compatible with Mendix 9.0 and higher Support for React-based Mendix Client (Mendix 10.7+) Technical Details Built with React framework Uses MutationObserver for reliable updates Lightweight implementation with minimal performance impact No backend dependencies or microflows required Installation Import the widget module into your Mendix project Add the Serial Number widget to your DataGrid or ListView Configure the Data Source Type property (listview/datagrid) Known Limitations Custom row visibility changes may require a short delay before serial numbers update For optimal performance, recommended for views with fewer than 1000 rows Upcoming Features We're already working on the next version with these planned enhancements: Configurable start number Prefix and suffix options Custom formatting options Support for template grids Compatibility Mendix 9.0.0 and higher Studio Pro 9.0.0 and higher Compatible with React version of Mendix Client (10.7+) Support For questions, issues, or feature requests, please contact us through the Mendix Marketplace or submit an issue on our GitHub repository. We hope this widget enhances your Mendix applications by providing a simple solution for row numbering. Your feedback is valuable as we continue to improve and add new features!