Samples | IgniteUI for Web Components | Infragistics

CHARTS

➤ Category Chart (72)

─Annotations ─Annotations All ─Annotations Callouts ─Annotations Crosshairs ─Annotations Custom ─Annotations Final Value ─Annotations Highlighting ─Area Chart Multiple Sources ─Area Chart Single Source ─Area Chart Styling ─Axis Gap ─Axis Gridlines ─Axis Inverted ─Axis Labels ─Axis Locations ─Axis Options ─Axis Overlap ─Axis Range ─Axis Tickmarks ─Axis Titles ─Chart Highlight Filter ─Column Chart Multiple Sources ─Column Chart Single Source ─Column Chart Styling ─Column Chart With Highlighting ─Column Chart With Tooltips ─Custom Selection ─Data Aggregations ─Data Filter ─Data Legend ─Data Legend Formatting Decimals ─Data Tooltip ─Data Tooltip Formatting Decimals ─Data Tooltip Positioning ─Format Specifiers ─High Frequency ─High Volume ─Highlighting ─Highlighting Behavior ─Highlighting Mode ─Legend Highlighting ─Line Chart Multiple Sources ─Line Chart Single Source ─Line Chart Styling ─Line Chart With Animations ─Line Chart With Annotations ─Marker Options ─Marker Templates ─Overview ─Point Chart Multiple Sources ─Point Chart Single Source ─Point Chart Styling ─Selection Matcher ─Selection Modes ─Selection Multiple Modes ─Spline Area Multiple Sources ─Spline Area Single Source ─Spline Area Styling ─Spline Multiple Sources ─Spline Single Source ─Spline Styling ─Stack Columns ─Step Area Multiple Sources ─Step Area Single Source ─Step Area Styling ─Step Line Multiple Sources ─Step Line Single Source ─Step Line Styling ─Tooltip Template ─Tooltip Types ─Trendline ─Value Lines

➤ Dashboard Tile (5)

─Chart Dashboard ─Financial Dashboard ─Gauge Dashboard ─Map Dashboard ─Pie Dashboard

➤ Data Chart (112)

─Annotations Custom ─Axis Annotations ─Axis Annotations Corner Radius ─Axis Crossing ─Axis Label Rotation ─Axis Locations ─Axis Min Max Gap ─Axis Settings ─Axis Sharing ─Axis Types ─Bar Chart Multiple Sources ─Bar Chart Overlapping ─Bar Chart Single Source ─Bar Chart Styling ─Callout Layer Styling ─Chart Highlight Filter ─Chart Highlight Filter Datasource ─Chart Highlight Filter Multiple Series ─Chart Navigation ─Chart Overview ─Chart Performance ─Chart Synchronization ─Chart Titles ─Composite Chart ─Crosshair Layer Styling ─Custom Drawing Annotations ─Custom Editing Data ─Dash Array Axes ─Dash Array Series ─Dash Array Tickmarks ─Dash Array Trendline ─Data Legend ─Data Legend Grouping ─Data Legend Grouping And Highlighting ─Data Legend Styling ─Data Tooltip ─Data Tooltip Grouping ─Data Tooltip Grouping And Highlighting ─Data Tooltip Styling ─Final Value Layer Styling ─Financial Candlestick Series ─Financial Indicator Column ─Financial Indicator Line ─Financial Ohlc Series ─Financial Overlays ─Financial Price Series ─Financial Series ─Format Specifiers ─Legends ─Polar Area Chart ─Polar Area Chart Styling ─Polar Chart Types ─Polar Line Chart ─Polar Scatter Chart ─Polar Spline Area Chart ─Polar Spline Chart ─Radial Area Chart ─Radial Area Chart Styling ─Radial Chart Types ─Radial Column Chart ─Radial Column Chart Selection ─Radial Label Mode ─Radial Line Chart ─Radial Pie Chart ─Radial Pie Proportional Category Angle Axis ─Radial Proportional Radial Angle Axis ─Range Area Chart ─Range Area Series ─Range Column Chart ─Range Column Series ─Range Series ─Scatter Area Series ─Scatter Bubble Chart Fill Scale ─Scatter Bubble Chart Multiple Sources ─Scatter Bubble Chart Single Source ─Scatter Bubble Chart Styling ─Scatter Bubble Series ─Scatter Contour Series ─Scatter Hd Series ─Scatter Line Chart ─Scatter Point Chart ─Scatter Polygon Series ─Scatter Polyline Series ─Scatter Series ─Scatter Spline Chart ─Selection Matcher ─Series Animations ─Series Annotations ─Series Error Bars ─Series Highlighting ─Series Marker Template ─Series Markers ─Series Tooltips ─Series Trendlines ─Series Value Overlay ─Shape Series ─Stacked Area Chart ─Stacked Bar Chart ─Stacked Chart Types ─Stacked Column Chart ─Stacked Line Chart ─Stacked Spline Area Chart ─Stacked Spline Chart ─Stacked100 Area Chart ─Stacked100 Bar Chart ─Stacked100 Column Chart ─Stacked100 Line Chart ─Stacked100 Spline Area Chart ─Stacked100 Spline Chart ─Tooltip Template ─Transition Event ─Waterfall Chart

➤ Data Pie Chart (8)

─Animation ─Animation Replay ─Highlight Filter ─Highlighting ─Legend ─Others ─Overview ─Selection

➤ Doughnut Chart (6)

─Animation ─Explosion ─Legend ─Overview ─Rings ─Selection

➤ Financial Chart (24)

─Annotations ─Axis Types ─Data Legend ─Data Legend Formatting Currency ─Data Legend Styling Props ─Data Tooltip ─Data Tooltip Formatting Currency ─Data Tooltip Styling Props ─Format Specifiers ─High Frequency ─High Volume ─Indicator Customization ─Indicator Types ─Multiple Data ─Overview ─Panes ─Performance ─Scrollbars ─Stock Index Chart ─Styling ─Titles ─Tooltip Types ─Trendlines ─Volume Types

➤ Pie Chart (7)

─Animation ─Explosion ─Legend ─Others ─Overview ─Selection ─Styling

➤ Sparkline (10)

─Display Area ─Display Column ─Display Lines ─Display Types ─Display Winloss ─Grid ─Markers ─Normal Range ─Trendlines ─Unknown Values

➤ Toolbar (7)

─Actions Built In Category Chart ─Actions Built In Data Chart ─Color Editor Support ─Custom Tool ─Layout Actions For Data Chart ─Layout In Vertical Orientation ─Theming

➤ Tree Map (6)

─Events ─Highlighting ─Highlighting Percent Based ─Layout ─Overview ─Styling

➤ Zoomslider (1)

EDITORS

➤ Multi Column Combobox (1)

➤ X Date Picker (5)

─XDate Picker Date Limits ─XDate Picker Editing ─XDate Picker Format ─XDate Picker Overview ─XDate Picker Range

EXCEL

➤ Excel Library (6)

─Operations On Workbooks ─Operations On Worksheets ─Overview ─Working With Cells ─Working With Charts ─Working With Sparklines

➤ Spreadsheet (13)

─Activation ─Adapter Chart ─Adapter Combo ─Clipboard ─Commands ─Conditional Formatting ─Config Options ─Data Validation ─Filter Dialog ─Format Dialog ─Hyperlinks ─Overview ─Sort Dialog

GAUGES

➤ Bullet Graph (13)

─Animation ─Background ─Highlight Needle ─Labels ─Measures ─Ranges ─Scale ─Tickmarks ─Type Filled ─Type Horizontal ─Type Reversed ─Type Segmented ─Type Vertical

➤ Linear Gauge (15)

─Animation ─Backing ─Highlight Needle ─Labels ─Needle ─Ranges ─Scale ─Tickmarks ─Type Curved ─Type Filled ─Type Horizontal ─Type Multi Range ─Type Multi Scale ─Type Segmented ─Type Vertical

➤ Radial Gauge (18)

─Animation ─Backing ─Highlight Needle ─Labels ─Needle ─Optical Scaling ─Ranges ─Scale ─Tickmarks ─Type Column ─Type Curved ─Type Direction ─Type Full ─Type Half ─Type Quatre ─Type Ring ─Type Segmented ─Type Semi

GRIDS

➤ Data Grid (41)

─Accessibility ─Binding Data Service ─Binding Live Data ─Binding Local Data ─Binding Remote Data ─Cell Activation ─Cell Editing ─Cell Merging ─Cell Selection ─Column Animation ─Column Chooser Picker ─Column Chooser Toolbar ─Column Filter Expressions ─Column Filter Operands ─Column Filtering ─Column Moving ─Column Options ─Column Pinning Picker ─Column Pinning Toolbar ─Column Resizing ─Column Scrolling ─Column Sorting ─Column Summaries ─Column Types ─Load Save Layout ─Localization ─Overview ─Pager ─Performance ─Row Group Descriptions ─Row Grouping ─Row Highlighting ─Row Paging ─Row Pinning ─Row Selection ─Type Comparison Table ─Type Heatmap Table ─Type Marketing Table ─Type Matrix Table ─Type Periodic Table ─Type Table

➤ Grid (114)

─Action Strip ─Advanced Filtering Options ─Advanced Filtering Style ─Binding Composite Data ─Binding Crud Data ─Binding Nested Data1 ─Cascading Combo ─Cell Editing Sample ─Cell Editing Styling ─Cell Selection Mode ─Cell Selection Style ─Change Icons Custom ─Clipboard Operations ─Column Auto Sizing ─Column Collapsible Groups ─Column Data Types ─Column Hiding Options ─Column Hiding Toolbar ─Column Hiding Toolbar Style ─Column Moving Options ─Column Moving Styles ─Column Pinning ─Column Pinning Options ─Column Pinning Right Side ─Column Pinning Styles ─Column Resize Styling ─Column Resizing ─Column Selection Group ─Column Selection Mode ─Column Selection Styles ─Column Sorting Indicators ─Column Sorting Options ─Column Sorting Style ─Conditional Cell Style1 ─Conditional Cell Style2 ─Conditional Row Selectors ─Custom Context Menu ─Custom Filtering ─Data Batch Editing Actions ─Data Exporting Indicator ─Data Paste Options ─Data Performance Virtualization ─Data Searching ─Data Summaries Custom ─Data Summary Formatter ─Data Summary Options ─Data Summary Template ─Data Validation Style ─Data Validator Service ─Data Validator Service Cross Field ─Data Validator Service Extended ─Disabled Summaries ─Editing Columns ─Editing Events ─Editing Excel Style ─Editing Excel Style Custom ─Editing Lifecycle ─Excel Exporting ─Excel Style Filtering Sample1 ─Excel Style Filtering Sample2 ─Excel Style Filtering Sample3 ─Excel Style Filtering Style ─External Advanced Filtering ─Filtering Options ─Filtering Strategy ─Filtering Style ─Finjs ─Groupby Custom ─Groupby Expressions ─Groupby Paging ─Groupby Styling ─Groupby Summary Options ─Groupby Summary Styling ─Infinite Scroll ─Keyboard Custom Navigation ─Keyboard Mrl Navigation ─Keyboard Navigation Guide ─Layout Display Density ─Master Detail ─Multi Cell Selection Mode ─Multi Column Headers Export ─Multi Column Headers Overview ─Multi Column Headers Styling ─Multi Column Headers Template ─Multi Row Layout Options ─Multi Row Layout Style ─Overview ─Paste ─Remote Paging Data ─Remote Paging Grid ─Row Adding ─Row Classes ─Row Drag Base ─Row Editing Options ─Row Editing Style ─Row Paging Basic ─Row Paging Options ─Row Pinning Drag ─Row Pinning Extra Column ─Row Pinning Options ─Row Pinning Style ─Row Reorder ─Row Selection Mode ─Row Selection Template Excel ─Row Selection Template Numbers ─Row Styles ─State Persistence About ─State Persistence Main ─Styling Custom Css ─Toolbar Sample1 ─Toolbar Sample2 ─Toolbar Sample3 ─Toolbar Sample4 ─Toolbar Style

➤ Hierarchical Grid (77)

─Action Strip ─Advanced Filtering Options ─Advanced Filtering Style ─Cell Editing Sample ─Cell Editing Styling ─Cell Selection Mode ─Cell Selection Overview ─Cell Selection Style ─Cell Selection Styling ─Column Auto Sizing ─Column Collapsible Groups ─Column Hiding Toolbar ─Column Hiding Toolbar Style ─Column Moving Options ─Column Moving Styles ─Column Pinning ─Column Pinning Options ─Column Pinning Right Side ─Column Pinning Styles ─Column Resize Styling ─Column Resizing ─Column Selection Group ─Column Selection Mode ─Column Selection Styles ─Column Sorting Indicators ─Column Sorting Options ─Column Sorting Style ─Conditional Cell Style1 ─Conditional Cell Style2 ─Conditional Row Selectors ─Custom Filtering ─Data Exporting Indicator ─Data Performance Virtualization ─Data Summary Formatter ─Data Summary Options ─Data Summary Options Styling ─Data Summary Template ─Disabled Summaries ─Editing Columns ─Editing Events ─Editing Lifecycle ─Excel Exporting ─Excel Style Filtering Sample1 ─Excel Style Filtering Sample2 ─Excel Style Filtering Sample3 ─Excel Style Filtering Style ─Filtering Options ─Filtering Style ─Layout Display Density ─Multi Column Headers Export ─Multi Column Headers Overview ─Multi Column Headers Styling ─Multi Column Headers Template ─Options ─Overview ─Paging Style ─Remote Paging Sample ─Row Adding ─Row Classes ─Row Drag Base ─Row Editing Options ─Row Editing Style ─Row Pinning Extra Column ─Row Pinning Options ─Row Pinning Style ─Row Reorder ─Row Selection Mode ─Row Selection Template Numbers ─Row Styles ─State Persistence About ─State Persistence Main ─Styling ─Toolbar Sample1 ─Toolbar Sample2 ─Toolbar Sample3 ─Toolbar Sample4 ─Toolbar Style

➤ List (4)

─Add Items ─Item Content ─Overview ─Styling

➤ Pivot Grid (9)

─Aggregate Max Sales ─Aggregate Units Sold ─Basic ─Data Persistence Noop ─Data Selector ─Features ─Remote ─State Persistence About ─State Persistence Main

➤ Tree (3)

─Basic Example ─Load On Demand ─Load On Demand Virtualized

➤ Tree Grid (88)

─Action Strip ─Advanced Filtering Options ─Advanced Filtering Style ─Cell Editing Sample ─Cell Editing Styling ─Cell Selection Mode ─Cell Selection Style ─Clipboard Operations ─Column Auto Sizing ─Column Collapsible Groups ─Column Data Types ─Column Hiding Toolbar ─Column Hiding Toolbar Style ─Column Moving Options ─Column Moving Styles ─Column Pinning ─Column Pinning Options ─Column Pinning Right Side ─Column Pinning Styles ─Column Pinning Toolbar ─Column Resize Styling ─Column Resizing ─Column Selection Group ─Column Selection Mode ─Column Selection Style ─Column Selection Styles ─Column Sorting Indicators ─Column Sorting Options ─Column Sorting Style ─Conditional Cell Style1 ─Conditional Cell Style2 ─Conditional Row Selectors ─Custom Filtering ─Data Exporting Indicator ─Data Searching ─Data Summaries Custom ─Data Summary Children ─Data Summary Formatter ─Data Summary Options ─Data Summary Options Styling ─Data Summary Template ─Disabled Summaries ─Editing Columns ─Editing Events ─Editing Lifecycle ─Excel Exporting ─Excel Style Filtering Sample1 ─Excel Style Filtering Sample2 ─Excel Style Filtering Sample3 ─Excel Style Filtering Style ─Filtering Options ─Filtering Style ─Finjs ─Keyboard Custom Navigation ─Keyboard Navigation Guide ─Layout Display Density ─Load On Demand ─Multi Cell Selection Mode ─Multi Column Headers Export ─Multi Column Headers Overview ─Multi Column Headers Styling ─Multi Column Headers Template ─Overview ─Overview Styling ─Row Adding ─Row Classes ─Row Drag Base ─Row Editing Options ─Row Editing Style ─Row Paging Basic ─Row Paging Options ─Row Paging Style ─Row Pinning Extra Column ─Row Pinning Options ─Row Pinning Style ─Row Reorder ─Row Selection Mode ─Row Selection Template Excel ─Row Selection Template Numbers ─Row Styles ─State Persistence About ─State Persistence Main ─Toolbar Sample1 ─Toolbar Sample2 ─Toolbar Sample3 ─Toolbar Sample4 ─Toolbar Style ─Using Primary Foreign Keys

INPUTS

➤ Badge (3)

─Outlined ─Shape ─Variants

➤ Button (8)

─Contained ─Download ─Fab ─Flat ─Outlined ─Overview ─Size ─Styling

➤ Button Group (5)

─Alignment ─Overview ─Selection ─Size ─Styling

➤ Checkbox (5)

─Checking ─Disabled ─Indeterminate ─Label ─Overview

➤ Chip (5)

─Multiple ─Overview ─Size ─Styling ─Variants

➤ Circular Progress Indicator (4)

─Dynamic ─Indeterminate ─Simple ─Styling

➤ Color Editor (1)

➤ Combo (6)

─Features ─Overview ─Selection ─Simplified ─Styling ─Templates

➤ Date Time Input (4)

─Input Format Display Format ─Min Max Value ─Overview ─Step Up Down

➤ Dropdown (7)

─Group ─Header ─Item ─Overview ─Position ─Styling ─Target

➤ Icon Button (3)

─Size ─Styling ─Variant

➤ Input (5)

─Helper Text ─Overview ─Prefix Suffix ─Size ─Styling

➤ Linear Progress Indicator (5)

─Dynamic ─Simple ─Striped ─Styling ─Types

➤ Mask Input (3)

─Applying Mask ─Overview ─Value Modes

➤ Radio (6)

─Alignment ─Disabled ─Group ─Invalid ─Label ─Styling

➤ Rating (5)

─Basic ─Custom ─Empty ─Single Selection ─Styling

➤ Ripple (2)

─Button ─Color

➤ Select (5)

─Group ─Header ─Item ─Overview ─Styling

➤ Slider (10)

─Constraints ─Disabled ─Discrete ─Labels ─Overview ─Styling ─Tick Labels ─Ticks ─Value ─Value Format

➤ Switches (4)

─Checking ─Disabled ─Label ─Overview

➤ Textarea (5)

─Form Integration ─Overview ─Resize ─Slots ─Styling

LAYOUTS

➤ Accordion (3)

─Customization ─Nested Scenario ─Overview

➤ Avatar (5)

─Icon ─Image ─Initials ─Shape ─Size

➤ Card (5)

─Horizontal ─Integration ─Overview ─Semi Horizontal ─Styling

➤ Carousel (4)

─Animations ─Components ─Overview ─Thumbnail

➤ Divider (5)

─Dashed ─Middle ─Overview ─Select ─Vertical

➤ Dock Manager (13)

─Add Content Runtime ─Contained In Boundaries ─Customize Buttons ─Embedding Frames ─Focus Panes ─Hide Pane Headers ─Hiding Panes ─Overview ─Proximity Dock ─Split Pane Fixed Size ─Styling ─Toggle Inner Dock ─Updating Panes

➤ Expansion Panel (4)

─Component Customization ─Properties And Events ─Styling ─Usage

➤ Icon (2)

─Sizing ─Styling

➤ Stepper (5)

─Animations ─Linear ─Orientation ─Overview ─Steptypes

➤ Tabs (4)

─Alignment ─Overview ─Prefix Suffix ─Scrolling

➤ Tile Manager (7)

─Actions ─Columngap ─Dragndrop ─Layout ─Overview ─Resize ─Styling

MAPS

➤ Geographic Map (28)

─Geo Binding Data Csv ─Geo Binding Data Json Points ─Geo Binding Data Model ─Geo Binding Multiple Shapes ─Geo Binding Multiple Sources ─Geo Binding Shp Points ─Geo Binding Shp Polygons ─Geo Binding Shp Polylines ─Geo Display All Imagery ─Geo Display Bing Imagery ─Geo Display Esri Imagery ─Geo Display Heat Imagery ─Geo Display Osm Imagery ─Geo Map Custom Tooltips ─Geo Map Marker Template ─Geo Map Marker Type ─Geo Map Navigation ─Geo Map Overview ─Geo Map Shape Styling ─Geo Map Synchronization ─Geo Map Triangulating Data ─Geo Scatter Area Series ─Geo Scatter Bubble Series ─Geo Scatter Contour Series ─Geo Scatter Density Series ─Geo Scatter Symbol Series ─Geo Shape Polygon Series ─Geo Shape Polyline Series

MENUS

➤ Nav Bar (2)

─Overview ─Styling

➤ Nav Drawer (4)

─Add Drawer Items ─Add Mini ─Add Positions Navbar ─Styling

NOTIFICATIONS

➤ Banner (4)

─Advanced Sample ─Sample1 ─Sample2 ─Styling

➤ Dialog (4)

─Closing Variations ─Form ─Overview ─Styling

➤ Snackbar (4)

─Action Text ─Display Time ─Overview ─Styling

➤ Toast (3)

─Overview ─Properties ─Styling

SCHEDULING

➤ Calendar (11)

─Disabled Dates ─Formatting ─Header ─Multiple Months ─Multiple Selection ─Overview ─Range Selection ─Size ─Special Dates ─Styling ─Week Numbers

➤ Date Picker (5)

─Dialog Mode ─Form ─Format ─Overview ─Styling

Restore

Save

Reset

Leave

Clear

Reload

Clicking the SAVE button or leaving the page here will save grid state to localStorage.
Use the control buttons to SAVE / RESTORE / RESET / DELETE / grid state or LEAVE the page.
Select/Deselect checkboxes to control saving / restoring feature state.

All Features

Adv. Filtering

Cell Selection

Columns

Col Selection

Expansion

Filtering

Paging

Row Pinning

Row Selection

Sorting

GroupBy

Moving

Visible columns

ID

Name

Title

Age

Phone

On PTO

Pinned columns

ID

Name

Title

Age

Phone

On PTO

Name

arrow_upward

more_vert

Title

arrow_upward

more_vert

Age

arrow_upward

more_vert

Phone

arrow_upward

more_vert

On PTO

arrow_upward

more_vert

expand_more

Johnathan Winchester

Development Manager

55

0251-031259

false

chevron_right

Michael Burke

Senior Software Developer

43

0452-076545

true

chevron_right

Thomas Anderson

Senior Software Developer

29

(14) 555-8122

false

expand_more

Monica Reyes

Software Development Team Lead

31

7675-3425

false

chevron_right

Roland Mendel

Senior Software Developer

35

(505) 555-5939

false

chevron_right

Sven Cooper

Senior Software Developer

44

0695-34 67 21

true

expand_more

Ana Sanders

CEO

42

(21) 555-0091

true

chevron_right

Laurence Johnson

Director

44

981-443655

false

Row added

Items per page

expand_more

5

10

15

25

50

100

500

1 of 2