jQWidgets Demos

Note: To run a sample that includes data binding, you must open it via "http://..." protocol since Ajax makes http requests.

Web Demos

jqxGrid
- Default Functionality
- Spreadsheet
- Create, Remove, Update
- Data Export
- Data Printing
- Save/Load Grid State
- Localization
- DropDown Grid
- Sorting
- Custom Sorting
- Filtering
- Filter Row
- Filter Row with Custom List Items
- Filter Conditions
- Date & Range Filter
- Custom List Items with Key/Value
- Excel-like Filter
- Custom Filtering
- Initial Filter
- Grouping
- Groups Renderer
- Grouping with Pager
- Paging
- Initial Page and PageSize
- Pager Modes
- Custom Pager
- Editing
- Popup Editing
- Edit Modes
- Customized Editors
- Disable Editing of Rows
- Custom DropDownList Column
- Cascading ComboBoxes
- Full Row Edit
- Edited Rows Rendering
- Custom Column Editor
- Custom Row Editor
- Binding to Array
- Binding to Observable Array
- Binding to JS Array
- Binding to XML
- Binding to JSON
- Binding to JSON using PHP
- Binding to JSON String
- Binding to Remote Data
- Binding to CSV
- Binding to TSV
- Large Data Set
- Refresh Data
- Virtual Paging
- Virtual Scrolling
- Load from Table
- Aggregates
- Custom Aggregates
- Aggregates Renderer
- Cells & Columns Alignment
- Show/Hide Columns
- Auto-Size Columns
- Percentage Width for Columns
- CheckBox Column
- Row Number Column
- Column Template
- Widgets Column
- Columns Hierarchy
- Cells Styling
- Image Column
- Columns Resize
- Columns Reorder
- Pinned Columns
- Dynamic Columns
- Computed Column
- Column Tooltips
- Foreign Key Column
- Keys/Values Column
- Row Selection
- Cells Selection
- CheckBox Selection
- Drag & Drop
- Drag to a Form
- Drag Multiple Rows
- Row Details
- Nested Grids
- Master-Details
- Deferred Scrolling
- Deferred Scrolling on a Large Data Set
- Statusbar
- Toolbar
- Context Menu
- Auto Row Height
- Custom Keyboard Navigation
- Grid in jqxTabs
- Filter Menu Types
- Custom Filter Menu
- Toggle Sub Rows
- Row Edit with Ever Present Row
- Add New Row
- Add New Bottom Row
- Updating Actions at Runtime
- Ever Present Row with Custom Widgets
- Ever Present Row with Columns
- Positioning
- Validation
- Add, Remove, Update
- Localized Add New Row
- Many Columns
- Fluid Size
- Keyboard Navigation
- Right to Left Layout
jqxChart
- Column Series
- Bar Series
- Stacked Column Series
- 100% Stacked Columns
- Line Series
- Line Series Labels
- Stacked Line Series
- 100% Stacked Line Series
- Area Series
- Stacked Area Series
- 100% Stacked Area Series
- Negative Values
- Negative Bar Series
- Multiple Series Types
- Spline Series
- Area Spline Series
- Custom x-Axis Range
- Custom Styling
- Pie Series
- Pie Series Legend
- Partial Pie Series
- Donut Series
- Donut Labels
- Polar Series
- Line Serie with missing points
- Line Serie with
  conditional colors
- Column Serie with
  conditional colors
- Column Serie with
  labels
- Date/time x-axis range selection
- Non-date x-axis range selection
- Candlestick Chart
- OHLC Chart
- Live Updates
- Live Updates every Second
- Live Updates performance
- Logarithmic Axis
- Logarithmic Axis Base 10
- Logarithmic Axis Base Line
- Percentage Stacked Logarithmic Axis
- Stacked Logarithmic Axis
- Spline Area Logarithmic Axis
- Column Range Logarithmic Axis
- Column Range
- Axis Position
- Flip Chart
- Bubble Series
- Scatter Series
- Step line Series
- Color Bands
- Text Rotation
- Tooltip Formatting
- Chart Crosshairs
- Grid Lines Dash Style
- Chart Events
- Chart Printing
- Export to Image
- Greyscale Series
- Themes
- Fluid Size
- Right to Left Layout
- Chart with Tabs
- Chart with Grid
- Custom Drawing
- Column series Spacing
- Waterfall Series
- Stacked Waterfall Series
- Waterfall Series
- Waterfall with multiple Series
- Partial Polar Chart
- Polar Series Bands
- Spider Chart
- Color Bands X Axis
- Chart Annotations
- Dashboard
- Sparklines
- Axis Settings
- Funnel Chart
- Stacked Funnel Chart
- Pyramid Chart
- Stacked Pyramid Chart
- Intervals and Steps
- Chart RangeSelector Events
jqxGauge
- Default Functionality
- Gauge Settings
- Gauge with Slider
- Analog Clock
- Fluid Size
- Linear Gauge Settings
jqxBulletChart
- Default Functionality
- Color Ranges
- Vertical BulletChart
- Labels Formatting
- Multiple Ranges
- Negative Values
- Settings
- Fluid Size
- Right to Left Layout
jqxEditor
- Default Functionality
- Localization
- Inline Editing
- Tools Visibility
- Tools Customization
- Custom Tools
- Toolbar Position
- Printing
- Line Break Config
- Fluid Size
- Events
- Right to Left Layout
jqxDataTable
- Default Functionality
- Local Data
- Remote Data
- XML Data
- JSON Data
- CSV Data
- TSV Data
- Row Template
- Row Details
- Row Selection & Hover
- Columns Hierarchy
- Column Formatting
- Column Alignment
- Column Resize
- Column Reorder
- Show or Hide Column
- Pinned(Frozen) Column
- Column Template
- Header Template
- Inline Row
- Dialog
- Command Column
- Lock Row
- Cell Editing
- Custom Editors
- Validation
- Sorting
- Server Sorting
- Sorting API
- Filtering
- Search Field
- Advanced Filtering
- Server Filtering
- Filtering API
- Paging
- Server Paging
- Paging API
- Master Details with Nested Tables
- Master Details with 2 Tables
- Aggregates
- Aggregates Template
- Grouping
- Grouping and Server Paging
- Data Export
- Data Printing
- Fluid Size
- Localization
- Conditional Formatting
- Keyboard Navigation
- Right to Left Layout
jqxTreeGrid
- Default Functionality
- Local Data
- XML Data
- Nested XML Data
- JSON Data
- Nested JSON Data
- CSV Data
- Tab Data
- Virtual Mode(Load data on demand)
- Virtual Mode with Ajax
- Columns Hierarchy
- Column Formatting
- Column Alignment
- Column Resize
- Column Reorder
- Show or Hide Column
- Pinned(Frozen) Column
- Column Checkboxes
- Column Hierarchical
  Checkboxes
- Column Icons
- Column Small Icons
- Header Template
- Inline Row
- Dialog
- Command Column
- Context Menu
- Lock Row
- Cell Editing
- Custom Editors
- Property Editor
- Validation
- Sorting
- Sorting API
- Filtering
- Search Field
- Advanced Filtering
- Filtering API
- Paging
- Paging by Root
  Records
- Paging API
- Aggregates
- Aggregates Template
- Manual Aggregates Calculation
- Row Details
- Localization
- Data Export
- Data Printing
- Data Grouping
- Conditional Formatting
- Conditional Rendering
- Fluid Size
- Keyboard Navigation
- Right to Left Layout
jqxInput
- Default Functionality
- Auto Complete
- Multiple Values
- Binding to JSON
- Input Group
- Fluid Size
- Right to Left Layout
jqxCalendar
- Default Functionality
- Localization
- Special dates
- Show week of the year
- Restrict date range
- Hide other month days
- Display weekends style
- First day of the week
- Range Selection
- Restricted Dates
- Disabled
- Fluid Size
- Events
- Keyboard Navigation
- Right to Left Layout
jqxDateTimeInput
- Default Functionality
- Localization
- Time Input
- Restrict date range
- Format Date
- Disabled
- Date & Time
- Range Selection
- Events
- Fluid Size
- Keyboard Navigation
- Right to Left Layout
jqxButtons
- Default Functionality
- ToggleButton
- RepeatButton
- LinkButton
- DropDown Button
- Checkbox
- RadioButton
- Switch Button
- Button Group
- Fluid Size
- Right to Left Layout
jqxColorPicker
- Default Functionality
- Settings
jqxComboBox
- Default Functionality
- Multi Select
- Settings
- Categories
- Cascading Comboboxes
- Remote Data Source
- Binding to XML Data
- Binding to JSON Data
- Custom Rendering
- Remote Auto-Complete
- DropDown Alignment
- DropDown Animation
- Checkboxes
- Init from select tag
- Init from ul tag
- Fluid Size
- Events
- Keyboard Navigation
- Right to Left Layout
jqxDropDownList
- Default Functionality
- Text with Icons
- Categories
- Load data from select
- Binding to XML Data
- Binding to JSON Data
- Custom Rendering
- Save/Load selection using cookies
- DropDown Alignment
- DropDown Animation
- Checkboxes
- Auto Open
- Init from select tag
- Init from ul tag
- Filtering
- Load data from select
- Fluid Size
- Events
- Keyboard Navigation
- Right to Left Layout
jqxListBox
- Default Functionality
- Text with Icons
- Categories
- Multiple selection
- Selection with Shift & Ctrl
- Load data from select
- Load from local data
- Binding to XML Data
- Binding to JSON Data
- Items Reorder
- Drag & Drop
- Custom Rendering
- Checkboxes
- Remote Auto-Complete
- Init from select tag
- Init from ul tag
- Filtering
- Fluid Size
- Events
- Keyboard Navigation
- Right to Left Layout
jqxDocking
- Default Functionality
- Import Layout
- Settings
- Keyboard Navigation
- Events
- Right to Left Layout
jqxDockingLayout
- Default Functionality
- Save/Load Layout
- IDE-like Layout
- Dashboard
- Fluid Size
- Right to Left Layout
jqxLoader
- Default Functionality
- Show only icon
- Show only text
- Show modal loader
- Loader with jgxGrid
- Right to left Layout
jqxResponsivePanel
- Default Functionality
- Integration with jqxMenu
- Fluid Size
- Right to Left Layout
jqxScheduler
- Default Functionality
- Default Functionality
- Timeline Views
- Agenda View
- Binding to JSON
- Binding to ICalendar
- Appointment Statuses
- Appointment Restrictions
- Appointment Customization
- Appointments Exact Time Rendering
- Recurring Appointments
- Time Zones
- Time Scales Zooming
- Time Scales Configuration
- Row Height
- Hide Time Ruler
- Hide Weekends
- Context Menu
- Edit Dialog
- Work Time
- Row Height Configuration
- Month View with Auto Row Height
- Month View Week Numbers
- Resources
- Events
- Keyboard Navigation
- Resources with custom column widths
- Vertical Resources
- Timeline Views with Resources
- Data Export
- Data Printing
- Localization
- Fluid Size
- Right to Left
jqxPopover
- Default Functionality
- Positioning
- Model Popover
- Right to Left Layout
jqxTagCloud
- Default Functionality
- Add, Remove & Update Tags
- Color Selection
- Custom Tags
- Font Size
- Binding to JSON
- Show & Hide Tags
- Sorting & Filtering
- Font Size
jqxLayout
- Default Functionality
- Dashboard
- Save/Load Layout
- Integration with Other Widgets
- Fluid Size
- Right to Left Layout
jqxTextArea
- Default Functionality
- Auto-Complete
- Multiple Values
- Binding to JSON Data
- Fluid Size
- Right to Left Layout
jqxDockPanel
- Default Functionality
jqxDragDrop
- Default Functionality
- Events
jqxExpander
- Default Functionality
- Toggle on Double-Click
- Fluid Size
- Loading Data on Demand
- Right to Left Layout
jqxNavigationBar
- Default Functionality
- Multiple Expanded
- Disabled
- Fluid Size
- Events
- Keyboard Navigation
- Right to Left Layout
jqxNavBar
- Default Functionality
- Vertical NavBar
- Minimized NavBar
- Right to Left Layout
jqxFormattedInput
- Default Functionality
- Simple Input
- Validation
- Negaive Numbers
- Upper Case Hexadecimals
- Exponential Notation
- Fluid Size
- Events
- Keyboard Navigation
- Right to Left Layout
jqxComplexInput
- Default Functionality
- Spin Buttons
- Validation
- Exponential Notation
- Change Event
- Fluid Size
- Right to Left Layout
jqxRibbon
- Default Functionality
- Collapsible
- Ribbon at the Bottom
- Vertical Ribbon
- Vertical Right Position
- Pop-up Layout
- Integration with Other Widgets
- Scrolling
- Events
- Fluid Size
- Right to Left Layout
jqxToolBar
- Default Functionality
- Resizable Toolbar
- Non-minimizable Tools
- Button Groups in Toolbar
- Settings
- Tool events
- Fluid Size
- Right to Left Layout
jqxMaskedInput
- Default Functionality
- Events
- Integration with KnockoutJS
- Right to Left Layout
jqxNumberInput
- Default Functionality
- Validation
- Settings
- Simple Input Mode
- Fluid Size
- Events
- Right to Left Layout
jqxNotification
- Default Functionality
- Notification container
- Timer Notification
- Events
- Custom Icon
- Settings
- Fluid Size
- Right to Left Layout
jqxMenu
- Default Functionality
- Context Menu
- Vertical Menu
- Open Direction
- Columns
- Images
- JSON Menu
- XML Menu
- Load Menu from Array
- Center Items
- Keyboard Navigation
- Fluid Size
- Right to Left Layout
jqxPanel
- Default Functionality
- Right to Left Layout
jqxProgressBar
- Default Functionality
- Layout
- Right to Left Layout
jqxRating
- Default Functionality
jqxScrollBar
- Default Functionality
jqxSlider
- Default Functionality
- Range Slider
- Vertical Slider
- Events
- Layout
- Slider Tooltip
- Fluid Size
- Keyboard Navigation
- Right to Left Layout
jqxRangeSelector
- Default Functionality
- Date Scale
- Time Scale
- Numeric Scale
- Negative Scale
- Decimal Scale
- Background Image
- Chart on Background
- RangeSelector as a Filter
- Fluid Size
- Customized Markers
- Right to Left Layout
jqxSplitter
- Default Functionality
- Nested Splitters
- Horizontal Splitter
- Vertical Splitter
- Toggle Bottom Panel
- Toggle Right Panel
- Integration with jqxTabs
- Integration with jqxGrid
- Integration with jqxTree
- Multiple Split Panels with jqxTabs
- Simple Container
- Nested Side Splitters
- Loading Split panels with Ajax
- Fluid Size
- API
- Events
jqxTabs
- Default Functionality
- Wizard
- Tabs with Images
- Close Buttons
- Collapsible
- Drag and Drop
- Loading Tab contents with Ajax
- Integration with other widgets
- Save/Load selection using cookies
- Scrolling
- Events
- Settings
- Fluid Size
- Keyboard Navigation
- Right to Left Layout
jqxTooltip
- Default Functionality
- Tooltip Positions
- Close on Click
jqxTree
- Default Functionality
- Settings
- Checkboxes
- JSON Tree
- XML Tree
- Drag and Drop
- Context Menu
- Load on Demand with Ajax
- Navigation
- DropDown Tree
- Fluid Size
- Events
- Keyboard Navigation
- Right to Left Layout
jqxValidator
- Default Functionality
- Validation Labels
- Right to Left Layout
jqxWindow
- Default Functionality
- Multiple Windows
- Settings
- Events
- Keyboard Navigation
- Right to Left Layout
jqxScrollView
- Default Functionality
jqxListMenu
- Default Functionality
- Nested Lists
- Fluid Size
- Right to Left Layout
jqxPasswordInput
- Default Functionality
- Custom Strength Rendering
- Fluid Size
- Right to Left Layout
jqxTreeMap
- Default Functionality
- Automatic Rendering
- Ranges Rendering
- Custom Rendering
- Fluid Size
- Binding to JSON
- Binding to Tab Data
jqxAngular
- Create a widget
  using an Attribute
- Create a widget
  using a Tag
- Create a widget
  using jqxCreate
- Button created
  using an Attribute
- Event Handling
- Using jqxWatch
- Load scripts on demand
- ngModel
- ngModel
  with Widget values
- Button
- Button Group
- Bullet Chart
- Calendar
- Chart
- Chart with Donut Series
- Color Picker
- ComboBox
- DataTable
- DataTable Sorting
- DataTable Dialog Edit
- DataTable Custom Cell Template
- DataTable Custom Editor
- AngularJS Layout
- AngularJS Docking Layout
- AngularJS Scheduler
- AngularJS TagCloud
- AngularJS Popover
- AngularJS Loader
- AngularJS TextArea
- AngularJS TextArea
- DateTimeInput
- Docking
- DropDownButton
- DropDownList
- Editor
- Expander
- Gauge
- Grid
- Grid Binding to JSON
- Grid using jqxSettings
- Refresh Grid data
- Grid with scripts loaded on demand
- Input
- ListBox
- ListBox with Input
- ListMenu
- MaskedInput
- Menu
- NavigationBar
- Notification
- NumberInput
- Panel
- PasswordInput
- ProgressBar
- RangeSelector
- Rating
- ScrollBar
- ScrollView
- Slider
- Splitter
- Tabs
- Tabs Integration
- Tabs with multiple Controllers
- Tooltip
- Tree
- TreeGrid
- TreeMap
- Validator
- Window
jqxDataAdapter
- Default Functionality
- Binding to JSON
- Binding to XML
- Binding to CSV
- Binding to TSV
- Binding to Remote data
- Numbers and Dates Formatting
jqxResponse
- Default Functionality
jqxKnockout
- Bullet Chart
- Calendar
- Chart
- CheckBox
- ComboBox
- DateTimeInput
- Docking
- DropDownList
- DropDownList with DataAdapter
- Gauge
- Grid
- Paged Grid
- Editable Grid
- Grid and JSON data
- Grid with DropDownList
- ListBox
- ListBox with DataAdapter
- ListBox and JSON data
- Masked Input
- Menu
- Number Input
- ProgressBar
- Radio Button
- ScrollBar
- Slider
- Tree
- Window
- DataTable
- Input
PHP
- Bind ListBox to MySQL Database
- Bind DropDownList to MySQL Database
- Bind ComboBox to MySQL Database
- ComboBox and Grid
- Cascading ComboBox
- Login Form
- Registration Form
- Message Form
- Billing Form
- ListBox with Checkboxes
- Tree with Checkboxes
- Bind Chart to MySQL Database
- Bind Grid to MySQL Database
- Grid Server Paging
- Grid Server Filtering
- Grid Server Sorting
- Grid Server Sorting, Paging and Filtering
ASP .NET MVC
- Bind ListBox to SQL Database
- Bind DropDownList to SQL Database
- Bind ComboBox to SQL Database
- Bind Grid to SQL Database
- DataTable Server Sorting, Paging and Filtering
- Bind TreeGrid to SQL Database
- Bind Chart to SQL Database
- Tree with Checkboxes
- Login Form
- Registration Form
Java
- Bind ListBox to MySQL Database
- Bind DropDownList to MySQL Database
- Bind ComboBox to MySQL Database
- Bind Tree to MySQL Database
- Bind Chart to MySQL Database
- Bind Grid to MySQL Database
- Grid Server Sorting, Paging and Filtering
- Bind DataTable to MySQL Database
- DataTable Server Sorting, Paging and Filtering
- Bind TreeGrid to MySQL Database
jQuery Mobile
- Responsive Layout with jQuery Mobile
- Three Column Grid Layout
- Fixed Header and Footer
RequireJS
- RequireJS Integration
- Resolving Script Dependencies
jqxDraw
- Drawing Shapes
Bootstrap
- Sticky Footer
- Sticky footer with fixed navbar
- Jumbotron
- Responsive Grid Layout

Mobile Demos

jqxGrid
- Default Functionality
- Filtering and Sorting
- Editing
- Grouping
- Paging
- Columns Resize
jqxChart
- Default Functionality
- Area Series
- Multiple Series Types
- Line Series
- Spline Series
- Area Spline Series
- Pie Series
- Donut Series
- Bubble Series
- Scatter Series
jqxDataTable
- Default Functionality
- Sorting
- Paging
jqxTreeGrid
- Default Functionality
- Checkboxes
- Paging
jqxCalendar
- Default Functionality
- Range Selection
jqxButton
- Default Functionality
- Button Group
- Switch Button
- Radio Button
- DropDown Button
jqxBulletChart
- Default Functionality
jqxColorPicker
- Default Functionality
jqxComboBox
- Default Functionality
- Multiple Selection
jqxDateTimeInput
- Default Functionality
jqxDragDrop
- Default Functionality
jqxDropDownList
- Default Functionality
- Checkboxes
jqxExpander
- Default Functionality
jqxEditor
- Default Functionality
jqxGauge
- Default Functionality
jqxInput
- Default Functionality
jqxListBox
- Default Functionality
- Checkboxes
jqxListMenu
- Default Functionality
jqxMaskedInput
- Default Functionality
jqxMenu
- Default Functionality
jqxNavigationBar
- Default Functionality
jqxNumberInput
- Default Functionality
jqxPanel
- Default Functionality
jqxPasswordInput
- Default Functionality
jqxProgressBar
- Default Functionality
jqxRating
- Default Functionality
jqxRangeSelector
- Default Functionality
jqxScrollBar
- Default Functionality
jqxScrollView
- Default Functionality
jqxSlider
- Default Functionality
jqxSplitter
- Default Functionality
- Three Pane Layout
jqxScheduler
- Default Functionality
jqxTabs
- Default Functionality
- Bottom Tabs
jqxTooltip
- Default Functionality
jqxTouch
- Default Functionality
jqxTree
- Default Functionality
- Checkboxes
jqxTreeMap
- Default Functionality
jqxValidator
- Default Functionality
jqxWindow
- Default Functionality
jqxNavBar
- Default Functionality
jqxFormattedInput
- Default Functionality
jqxComplexINput
- Default Functionality
jqxToolBar
- Default Functionality
jqxRibbon
- Default Functionality
jqxResponsivePanel
- Default Functionality
jqxLayout
- Default Functionality
jqxPopover
- Default Functionality
jqxLoader
- Default Functionality
jqxTextArea
- Default Functionality
jqxFileUpload
- Default Functionality