SU01 Client-Side Summary

Calculate and display aggregates from grid data

Live Demo

Summary bar shows totals calculated from all items.

Code
Summary Callback 
 
 
Configuration
 
Position
 
   
 
Callback Context
 
The summaryContentCallback receives:
 
  • items — Current page items
    •  
  • allItems — All items (before pagination)
    •  
  • totalItems — Total count
    •  
  • currentPage / pageSize
    •  
  • metadata — Server metadata
 
Returns an HTML string displayed in the summary bar.
 
SU02 Server-Side Summary
 
Display server-provided aggregates via summaryMetadata
 
Live Demo
 
 
Summary uses server-provided metadata instead of client calculation.
 
Code
 
Server Metadata 
 
 
 
Description
 
Server-Side Aggregates
 
For server-side pagination, the client may not have all data for calculations. Use summaryMetadata to pass server-computed values.
 
How It Works
 
  1. Server computes aggregates (totals, averages, etc.)
    2.  
  2. Pass them to grid.summaryMetadata
    3.  
  3. Access via ctx.metadata in the callback
 
API Reference
 
PropertyTypeDefaultDescription
summaryPositionstring-Position(s): 'bottom-left', 'top-right', 'top-right|bottom-right'
summaryContentCallback(ctx) => string-Callback returning HTML content for the summary bar
summaryMetadataunknown-Server-provided metadata passed to summaryContentCallback as ctx.metadata
isSummaryInlinebooleantrueWhen true, summary shares the row with pagination. When false, gets its own row.