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
- Export Data
- Save/Load Grid State
- Localization
- DropDown Grid
- Sorting
- Custom Sorting
- Filtering
- Filter Row
- Filter Row with Custom List Items
- Filter Conditions
- Custom Filtering
- Grouping
- Groups Renderer
- Grouping with Pager
- Paging
- Custom Pager
- Initial Page and PageSize
- Editing
- Popup Editing
- Edit Modes
- Customized Editors
- Disable Editing of Rows
- Custom DropDownList Column
- Edited Rows Rendering
- Custom Column Editor
- Custom Row Editor
- Binding to 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
- Custom Column
- Columns Hierarchy
- Cells Styling
- Image Column
- Columns Resize
- Columns Reorder
- Pinned Columns
- 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
- 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
- Donut Series
- Donut Labels
- 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
- Export to Image
- Greyscale Series
- Right to Left Layout
jqxGauge
- Default Functionality
- Gauge Settings
- Gauge with Slider
- Analog Clock
- Linear Gauge Settings
jqxInput
- Default Functionality
- Auto Complete
- Multiple Values
- Binding to JSON
- Input Group
- 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
- Disabled
- Events
- Keyboard Navigation
- Right to Left Layout
jqxDateTimeInput
- Default Functionality
- Localization
- Time Input
- Restrict date range
- Format Date
- Disabled
- Date & Time
- Range Selection
- Events
- Keyboard Navigation
- Right to Left Layout
jqxButtons
- Default Functionality
- ToggleButton
- RepeatButton
- LinkButton
- DropDown Button
- Checkbox
- RadioButton
- Switch Button
- Button Group
- Right to Left Layout
jqxColorPicker
- Default Functionality
- Settings
jqxComboBox
- Default Functionality
- Multi Select
- Settings
- Categories
- Remote Data Source
- Binding to XML Data
- Binding to JSON Data
- Custom Rendering
- Remote Auto-Complete
- DropDown Alignment
- DropDown Animation
- Checkboxes
- 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
- 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
- Events
- Keyboard Navigation
- Right to Left Layout
jqxDocking
- Default Functionality
- Import Layout
- Settings
- Events
- Right to Left Layout
jqxDockPanel
- Default Functionality
jqxDragDrop
- Default Functionality
- Events
jqxExpander
- Default Functionality
- Toggle on Double-Click
- Loading Data on Demand
- Right to Left Layout
jqxNavigationBar
- Default Functionality
- Multiple Expanded
- Disabled
- Events
- Keyboard Navigation
- Right to Left Layout
jqxMaskedInput
- Default Functionality
- Events
- Integration with KnockoutJS
- Right to Left Layout
jqxNumberInput
- Default Functionality
- Validation
- Settings
- Simple Input Mode
- Events
- 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
- 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
- Keyboard Navigation
- 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
- 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
- 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
- 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
- Right to Left Layout
jqxPasswordInput
- Default Functionality
- Custom Strength Rendering
- Right to Left Layout
jqxTreeMap
- Default Functionality
- Automatic Rendering
- Ranges Rendering
- Custom Rendering
- Binding to JSON
- Binding to Tab Data
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
- 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
- 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

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
jqxCalendar
- Default Functionality
- Range Selection
jqxButton
- Default Functionality
- Button Group
- Switch Button
- Radio Button
- DropDown Button
jqxColorPicker
- Default Functionality
jqxComboBox
- Default Functionality
- Multiple Selection
jqxDateTimeInput
- Default Functionality
jqxDragDrop
- Default Functionality
jqxDropDownList
- Default Functionality
- Checkboxes
jqxExpander
- 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
jqxScrollBar
- Default Functionality
jqxScrollView
- Default Functionality
jqxSlider
- Default Functionality
jqxSplitter
- Default Functionality
- Three Pane Layout
jqxTabs
- Default Functionality
- Bottom Tabs
jqxTooltip
- Default Functionality
jqxTouch
- Default Functionality
jqxTree
- Default Functionality
- Checkboxes
jqxTreeMap
- Default Functionality
jqxValidator
- Default Functionality
jqxWindow
- Default Functionality