JQWIDGETS EXAMPLES

Auto Change Value
This example shows auto changing values related to the background color.

Color Palettes
This example shows proportion between red, green and blue for a custom color.

Default Functionality
This example shows how to initialize basic functionality.

Dynamic Change Values
This example shows how to set dynamically values.

Fluid Size
This example shows the width and height in percentages.

Negative Values
This example displays negative values.

Sequential Growth
This example shows sequential growth of the segments one by one.

Tooltips
This example shows how the tooltips are customized.

API
Available functionalities of the API

Color Ranges
How to style the chart ranges

Default Functionality
Default functionality of the bullet chart

Disabled
Disabled functionality

Fluid Size
Width is in Percentages

Labels and Formatting
How to conditionally format the bullet chart

Multiple Ranges
How to display a bullet chart with five ranges

Negative Values
Negative values support of the bullet chart

Right to Left
Right to left support

Vertical
Bullet chart with vertical orientation

Button Group
This example shows how to create different buttons.

CheckBox
This example shows how to create a CheckBox.

Default Functionality
This example shows the default functionality of the button.

DropDown Button
This example shows how to create a DropDown button.

Fluid Size
The width of the widgets in this demo is in percentages.

Link Button
This example shows how to create a Link button.

Radio Button
This example shows how to create a Radio button.

Repeat Button
This example shows how to create a Repeat button.

Right to Left Layout
This example shows how to create a button where the layout is from right to left.

Select
You can replace your Select tags when using jqxButtons.

Switch Button
This example shows how to create a Switch button.

Templates
Using templates with jqxButtons.

Toggle Button
This example shows how to create a Toggle button.

Default Functionality
This example shows the default functionality of the Calendars.

Disabled
The jqxCalendar is disabled.

Display Weekends Style
This example shows how to display the weekend styles.

Events
This example shows the calendar events in action.

First Day of Week
This example shows setting the first day of each week for the calendar.

Fluid Size
The width and height of the calendar are in percentages.

Hide
Hide the other days of the month.

Keyboard Navigation
Navigate through the calendar using the keyboard.

Localization
This example shows the localizing of its content and dates for different languages.

Range Selection
This example shows the range selection.

Restrict Date Range
This example restricts calendar navigation with the setMinDate and setMaxDate methods.

Show Week of the Year
This example shows the week of the year.

100% Stacked Area Series
This example shows a 100% Stacked Area Series chart.

100% Stacked Column
This example shows a 100% Stacked Column chart.

100% Stacked Line Series
This example shows a 100% Stacked Line Series chart.

Area Series
This example shows an Area Series chart.

Area Spline Series
This example shows an Area Spline Series chart.

Axis Position
This example shows an Axis position chart.

Bar Series
This example shows a Bar Series chart.

Bubble Series
This example shows a Bubble Series chart.

Color Bands
This example shows a Color Bands chart.

Column Series
This example shows a Column Series chart.

Combination Series
This example shows a Combination Series chart.

Custom Range
This example shows a Custom Range chart.

Dashboard
This example makes use of the dashboard.

Default Functionality
This example shows the Color Picker widget in action.

Settings
This example shows how to pick a color.

Alignment
This example shows ComboBox alignment.

Animation
This example shows how to change the DropDown's Animation.

Binding to JSON
This example shows that the ComboBox is bound to JSON data.

Binding to Remote Data
This example shows that the ComboBox is bound to remote data.

Binding to XML
This example shows that the ComboBox is bound to XML data.

Cascading
This example shows how to create a cascading ComboBox.

Categories
This example shows how to display items in groups by setting each item's group property.

CheckBoxes
This example shows how to display CheckBoxes next to the ComboBox items.

Custom Rendering
This example shows how to use the renderer function.

Default Functionality
This example shows the default functionality of the ComboBox.

Events
This example shows how to use the ComboBox events.

Fluid Size
This example shows the fluid size example.

Change Event
This example shows the change event in action.

Default Functionality
This example shows the default functionality.

Exponential
This example shows the the real and imaginary parts of a complex number.

Fluid Size
This example shows the width of the complex input in percentages.

Right to Left
This example shows right-to-left support.

Spin Buttons
This example shows how spin buttons can be used to increment and decrement the real or imaginary parts of the complex number.

Validation
This example validates the entered complex number on the keydown and change events.

Binding to CSV
This example shows how to bind your source in jqxDataAdapter to CSV data.

Binding to JSON
This example shows how to bind your source in jqxDataAdapter to JSON data.

Binding to JSONP
This example shows how to bind your source in jqxDataAdapter to JSONP data.

Binding to TSV
This example shows how to bind your source in jqxDataAdapter to TSV data.

Binding to XML
This example shows how to bind your source in jqxDataAdapter to XML data.

Default Functionality
This example shows the default functionality of jqxDataAdapter.

Formatting
This example illustrates the data formatting capabilities of jqxDataAdapter.

Numbers and Dates
This example shows how numbers and dates are used by jqxDataAdapter.

Advanced Filtering
This example shows how to perform advanced filtering on a data table.

Aggregates
This example shows how aggregates are used for the data table.

Auto Size
This example shows how to auto-size the data table.

Binding to Array
This example shows how to bind to an array and display the data in the data table.

Binding to CSV
This example shows how to bind to a CSV file and display the data in the data table.

Binding to JSON
This example shows how to bind the DataTable to JSON Data.

Binding to XML
This example shows how to bind the DataTable to XML Data.

Cell Editing
This example shows how to edit a cell.

Cell Rendering
This example shows how to customize the rendering of the data rows.

Column Alignment
This example shows column and cells alignment.

Master Details
This example shows master details with 2 data tables.

Nested Tables
This example shows nested data tables.

Alignment
This example shows how to align text when using jqxDateTimeInput.

Animation
This example shows how to change the DropDown's animation.

Date and Time
This example shows how to edit date and time.

Default Functionality
Click the calendar button to open the popup and select a date from the calendar.

Disabled
In order to disable the widget, set its disabled property to true.

Events
This example shows how to trigger the 'valuechanged', 'nextButtonClick', and 'backButtonClick' events.

Fluid Size
This example shows how to set the width to percentages.

Format Date
This widget has built-in date parsing functionality that allows you to display date feedback in a variety of ways.

Keyboard Support
This widget provides keyboard navigation once it gains focus.

Localization
This widget provides support for localizing its input field and popup for different languages and date formats.

Range Selection
This example shows how to use the range selection mode.

Default Functionality
This example shows default functionality of jqxDocking.

Events
This example shows events which are connected with some actions on the windows inside.

Export Layout
This example shows that the layout is exported to JSON string by using the 'exportLayout' method.

Import Layout
This example shows how to how restore the layout from a JSON string.

Keyboard Navigation
This example shows the events which are connected with some actions on the windows inside.

Right to Left
This example shows how to switch the widget to a right-to-left representation.

Settings
This example shows that the first window into the first panel is pinned and the window with title 'CISC' is in floating mode.

Vertical
This example shows how to dock vertically.

Grid
This example shows how to dock using the Grid.

Dashboard
This example shows how to create a dashboard.

Default Functionality
This example shows the default functionality of creating complex layouts with panels that can be floated, docked, nested, resized, pinned, unpinned and closed.

Fluid Size
This example shows the width of the docking layout and both dimensions of its groups in percentages.

IDE Like
This example shows how to create an IDE-like layout.

Right to Left
This example shows right-to-left support.

Save - Load
This example shows how to save/load the current layout.

Default Functionality
This widget represents a container for other widgets or elements. It arranges its inner elements depending on the value of the 'dock' attribute.

Default Functionality
This example shows default functionality of jqxDragDrop.

Events
This example shows the dragging area of the draggable element is it's parent.

Drawing Basic Shapes
This example shows the basic drawing shapes.

Alignment
This example shows how to align text when using the jqxDropDownList.

Animation
This example shows how to change the animation.

API
This example shows a list of selectable items displayed in a drop-down.

Auto Open
This example shows that moving the mouse cursor over the widget opens the DropDown.

Binding to JSON
This example shows how to bind to JSON data.

Binding to Remote Data
This example shows how to bind to remote data.

Binding to TSV
This example shows how to bind to TSV data.

Binding to XML
This example shows how to bind to XML data.

Categories
This example shows how to display items in groups by setting each item's group property.

Checkboxes
This example shows how to display checkboxes next to the DropDownList items.

Cookies
This example shows how to save and load the jqxDropDownList's selection using cookies.

Default Functionality
This is a widget that contains a list of selectable items displayed in a drop-down.

Custom Toolbar Items
You can add custom commands to the toolbar.

Default Functionality
This is a ready-for-use HTML editor which can simplify web content creation.

Events
This example shows how to display events.

Fluid Size
This example shows the width and height of the Editor in percentages.

In Dialog
This example shows how to display the Editor in a window.

Inline Editing
This example shows how to click on the different parts to edit them in-place.

Line Break
This example uses the web browser's default behavior for breaking content.

Localization
This example shows how to localize the Editor tools.

Printing
This example calls 'print' which allows you to print the Editor's data.

Right to Left
This example shows the right-to-left layout alignment.

Stylesheets
This example shows how to load an external stylesheet.

Tool Customization
This example shows how to customize a tool.

Default Functionality
This example shows default functionality of jqxExpander.

Fluid Size
This example shows the width and height in percentages.

Load on Demand
This example shows how to use the API to dynamically load its header and content elements.

Right to Left
This example shows the right-to-left layout alignment.

Toggle on Double Click
This example shows how to double-click on the Header to toggle its content.

Button Templates
This example shows the button templates.

Default Functionality
This widget can be used for uploading file(s) to a server.

Events
This example shows the events.

Rendering
This example shows how to render selected files.

Right to Left
This example shows the right-to-left layout alignment.

Default Functionality
This example shows how the numeral system of the displayed number can be changed by choosing an option from the dropdown.

Events
This example shows the events - 'open', 'close', 'change' and 'radixChange'.

Exponential
This example shows how decimal numbers can be displayed in exponential notation.

Fluid Size
This example shows the width of the formatted input in percentages.

Keyboard Support
This example shows how to navigate through the numeral system options using the keyboard.

Negative Numbers
This example shows the display of negative numbers in the four supported numeral systems. Negative binary, octal and hexadecimal numbers are represented as 64-bit numbers using the two's complement method.

Right to Left
This example shows right-to-left support.

Simple
This example shows initialized from an HTML input.

Upper Case
This example shows hexadecimal numbers displayed with upper case letters.

Validation
This example shows how the input is restricted from 0 to 1000 (decimal). When the user enters a value whose decimal equivalent is not from 0 to 1000, the input automatically updates the value to the chosen numeral system's equivalent of 0 or 1000 depending on whether the value's decimal equivalent is below 0 or above 1000. That happens on blur event or Enter keypress.

Analog Clock
This example shows an analog clock.

Default Functionality
This example shows how you can customize the ranges.

Fluid Size
This example shows the width and height in percentages.

Linear
This example shows the linear style.

Linear Settings
This example shows the basic linear gauge settings.

Settings
This example shows the basic gauge settings.

Slider
This examples shows how to use a slider control for a gauge.

Aggregates
This example shows aggregates in a grid.

Alignment
This example shows how to set the cells and columns alignment.

Auto Resize Columns
This example shows how to auto-resize the grid columns.

Auto Row Height
This example shows the Auto Row Height functionality.

Auto Size
This example shows the Auto Size functionality.

Binding to Array
This example shows how to create a grid from array data.

Binding to CSV
This example shows how to create a grid from CSV data.

Binding to JS Array
This example shows how to create a grid from a JavaScript array.

Binding to JSON
This example shows how to create a grid from JSON data.

Binding to Large Data Set
This example shows how to create a grid from a large data set.

Binding to Load From Table
This example shows how to create a grid from loading data from a table.

Auto Complete
This example shows how Auto Complete works.

Binding to JSON
This example shows how to bind to JSON data.

Default Functionality
This example shows the basic functionality of the widget.

Fluid Size
This example shows the width of the input is in percentages.

Group
This example shows how to add a button.

Multiple Items
This example shows how to enable autocompleting multiple values into a single field.

Remote Auto Complete
This example shows how suggestions appear while you type into the field.

Right to Left
This example shows how to switch to a right-to-left representation.

Counter Clockwise
This example shows counter clockwise rotation.

Double Pointer
This example shows 2 pointers. The minimum range in the sample is 10, the maximum is 90.

Infinite Knob
This example shows an infinite knob.

Multiple Knobs
This example shows multiple knobs with marks.

Project Meter
This example shows a project meter.

Ranges
This example shows progress ranges.

Semi-Knob
This example shows a semi-knob with draw restrictions.

Small Sample
This example shows a small sample.

With Arrow Pointer
This example shows a knob with an arrow pointer.

With Circle Pointer
This example shows a knob with a circle pointer.

Dashboard
This example shows how to create a dashboard.

Default Functionality
This example shows the basic functionality of the widget.

Fluid Size
This example shows the width of the layout and both dimensions are in percentages.

Right to Left Support
This example shows right-to-left support.

Save and Load
This example shows how to save/load the current layout.

Widget Integration
This example shows how to integrate other jQWidgets controls.

Binding to JSON Data
This example shows how to bind JSON data.

Binding to XML
This example shows how to bind XML data.

Categories
This example shows how to display items in groups by setting each item's group property.

Checkboxes
This example shows how to display checkboxes next to its items.

Custom Rendering
This example shows how to use the renderer function.

Default Functionality
This example contains a list of selectable items.

Drag Drop
This example shows the Drag and Drop capabilities.

Events
This example shows how events are used.

Filtering
This example shows how to filter items.

Fluid Size
This example shows the width and height in percentages.

From Select
This example shows how to replace the 'Select' tags.

Default Functionality
This example shows the default functionality.

Fluid Size
This example shows the width in percentages.

Nested List Views
This example shows the supporting of nested lists.

Right to Left
This example shows how to switch to a right-to-left representation.

Default Functionality
This example shows the default functionality.

Icon
This example shows that the loader overlay can be icon only or icon with text.

Modal
This example is displayed as a modal dialog.

Right to Left
This example shows how to switch to a right-to-left representation.

Text
This example shows that the loader overlay can be icon only, text only or both.

Grid
This example shows how to display the loader in a grid.

Basic
This example shows basic masking.

Default Functionality
This example shows the default functionality.

Events
This example shows how to trigger the 'valuechanged' and 'textchanged' events.

Fluid Size
This example shows the width in percentages.

Right to Left
This example shows how to switch to a right-to-left representation.

Binding to JSON
This example shows how the menu is built from JSON data.

Binding to XML
This example shows how the menu is built from XML data.

Center Menu Items
This example shows how the center menu items work.

Columns
This example shows how to customize items and their sub menus in order to display multiple columns.

Context Menu
This example shows how to use the widget as a Context Menu.

Default Functionality
This example shows how easy it is to add menus to your website.

Events
This example shows some of the built-in events.

Fluid Size
This example shows the width in percentages.

Images
This example shows how to add images to the menu items.

Keyboard Navigation
This example shows how to control the menu thru keyboard navigation.

Default Functionality
This is a simple widget which arranges html elements horizontally or vertically.

Minimized
This example shows a minimized NavBar.

Right to Left
This examaple shows a NavBar with right-to-left layout.

Vertical Layout
This example shows a vertical NavBar.

Container
This example shows a container.

Cookies
This example shows how to keep the expanded item of the navigation bar by using cookies.

Default Functionality
This example shows the default functionality.

Disabled
This example shows the disabled property of the jqxNavigationBar widget is set to true.

Events
The jqxNavigationBar provides several built-in events triggered when the user expands or collapses an item.

Fluid Size
This example shows the width and height in percentages.

Keyboard Support
This example demonstrates how to navigate through the items using the keyboard.

Multiple Expanded
This example shows a built-in mode which allows you to have multiple expanded items.

API
This example shows some of the settings that are available.

Container
This example shows how to display notifications in a custom container.

Custom Icon
This example shows how to display notifications in a custom container.

Default Functionality
This example shows the default functionality for a container.

Events
This example showcases the events.

Fluid Size
This example shows the width of the notification in percentages.

Right to Left
This example shows right-to-left support.

Timer
This example shows how to create a timer notification.

API
This example shows how to edit currency, percentages and any type of numeric data.

Default Functionality
This example shows the default functionality.

Events
This example displays the valuechanged and textchanged events as they happen.

Fluid Size
This example shows the width in percentages.

Input Mode
This example shows how to trigger the valuechanged and textchanged events.

Right to Left
This example shows how to switch the editor to a right-to-left representation.

Settings
This example shows how to change the settings for currency, percentages and any type of numeric data.

Validation
This example shows how the input is restricted from 0 to 1000.

Default Functionality
This example shows the default functionality.

Dock Panel
This example represents a container for other widgets or elements.

Fluid Size
This example shows the width and height of the panel in percentages.

Right to Left
This example shows the panel represented in right-to-left orientation.

Custom Strength Rendering
This example shows custom strength rendering.

Default Functionality
This example shows the default functionality.

Fluid Size
This example shows the width in percentages.

Right to Left
This example shows right-to-left support.

Default Functionality
This example shows the default functionality of a Popover.

Modal
This example shows a modal example.

Positioning
This example shows a positioning example.

Right to Left
This example shows right-to-left support.

Default Functionality
This example shows the default functionality.

Layout
This example shows how it can be displayed either horizontally or vertically.

Right to Left
This example shows the right-to-left representation.

Background Chart
This example shows a chart as a background.

Background Image
This example shows an image as a background.

Date Scale
This example shows a date scale.

Decimal Scale
This example shows a decimal scale.

Default Functionality
This example shows the default functionality.

Filter by Range
This example shows filter by range.

Fluid Size
This example shows range selection by percentages.

Marker Format Function
This example shows customized markers.

Default Functionality
This example shows the default functionality.

Default Functionality
This example shows the default functionality.

Default Functionality
This example shows the default functionality.

Fluid Size
This example opens in a new window and resizes the web browser's window.

Menu Integration
This example has the panel collapsed when the owner's container width is less that the collapseBreakpoint property value.

Right to Left
This example shows right-to-left support.

Bottom
This example shows a ribbon with tabs at the bottom and content at the top.

Default Functionality
This example shows the default functionality.

Events
This example showcases the events.

Fluid Size
This example shows the width of the ribbon in percentages.

Integration
This example shows how to click on a ribbon tab to display its contents.

Layout
This example shows how to set different layouts to the pop-up content sections.

Office
This example showcases an Office-like ribbon.

Right
This example shows a vertical ribbon.

Scrolling
This example shows the built-in scrolling capabilities.

Vertical
This example shows a vertical ribbon.

Appointment Customization
This example demonstrates how to customize the appearance of Scheduler's appointments.

Appointment Restrictions
This example allows you to restrict appointments features such as dragging, resizing, editing.

Appointment Statuses
This example shows Status set to appointments.

Binding to JSON
This example shows binding to JSON.

Configure Row Height
This example shows a row height configuration.

Configure Scales
This example shows scales zooming.

Configure Start End Scale Hours
This example shows the API to exclude some of the time scales from the view.

Configure Work Hours
This example shows work time schedule.

Context Menu
This example shows a context menu.

Default Functionality
This example shows the default functionality.

Right to Left
This example shows the right-to-left representation.

Default Functionality
This example shows the default functionality.

Default Functionality
This example shows the default functionality.

Events
This example shows how to trigger the events.

Fluid Size
This example shows the width in percentages.

Keyboard Support
This example provides keyboard navigation once it gains focus.

Layout
This example shows how it can be displayed either horizontally or vertically.

Range Slider
This example shows how to capture a range of values with two drag handles.

Right to Left
This example shows right-to-left representation.

Tooltip
This example demonstrates the Tooltip.

Vertical Slider
This example demonstrates a vertical slider and allows the user select from a range of values.

Connected Lists
This example shows how to connect to multiple elements.

Default Functionality
This example shows how to re-arrange html elements.

Display Table
This example shows how to display a sortable grid.

Events
This example shows all of the events.

API
This example shows the basics of the API.

Default Functionality
This example shows how to create dynamic layout allowing you to resize, collapse panels.

Events
This example shows the splitter's events.

Fit to Window
This example shows how to create a splitter that fits the entire browser window's contents.

Four Columns
This example shows how to create a splitter with 4 columns.

Horizontal Splitter
This example shows how to create a horizontal splitter.

Horizontal Splitter with Collapsible Second Panel
This example shows how to collapse a second panel by clicking the SplitBar's button.

Integration with jqxGrid
This example shows how to integrate jqxGrid with jqxSplitter.

Integration with jqxTabs
This example shows how to integrate jqxTabs with jqxSplitter.

AJAX Loading
This example shows how the tab contents will be loaded with Ajax when a tab is selected.

Close Buttons
This example shows how to close buttons work.

Collapsible
This example shows how to click on a selected tab to toggle its content closed/open.

Cookies
This example shows how to save and load the tabs's selection using cookies.

Default Functionality
This example shows the basic functionality.

Drag and Drop
This example shows how to drag and drop the tabs to create a new sequence order.

Events
This example shows basic events.

Fluid Size
This example shows the width and height of the tabs in percentages.

Integration
This example shows how to integrate the tabs with other widgets.

Add, Remove, Update Tag
This example shows how to create a grid from observable array data.

Color Selection
This example shows color selection.

Custom Tag Rendering
This example shows custom tag rendering.

Font Size Demo
This example changes the font settings.

Populate from Array
This example shows how to populate from array.

Populate from JSON
This example shows how to populate from JSON.

Populate from Observable Array
This example shows how to populate from an observable array.

Show, Hide Tag
This example shows how to show or hide a tag.

Sort and Filter
This example shows how to sort and filter tags.

Binding to JSON
This example shows how to bind to JSON data.

Default Functionality
This example shows the basic functionality.

Fluid Size
This example shows the width in percentages.

Multiple Items
This example shows how to enable autocompleting multiple values.

Remote AutoComplete
This example provides suggestions while you type into the field.

Right to Left
This example shows how to switch an editor to a right-to-left representation.

API
This example showcases some of the functionalities.

Button Groups
This example shows how to automatically separate buttons into groups.

Default Functionality
This example shows the default functionality.

Events
This example shows how to bind tool events.

Fluid Size
This example shows the width of the toolbar in percentages.

Non-Minimizable Tools
This example shows how some tools can be made non-minimizable.

Resizable
This example shows the resizable functionality.

Right to Left
This example showcases right-to-left support.

Close on Click
This example shows how to close on click.

Default Functionality
This example shows how to display a popup message.

Popover
This example shows how to create a Popover.

Positions
This example shows how it supports 12 built-in position modes.

Default Functionality
This example shows a few useful events for touch devices.

AJAX Loading
This example shows how to load tree items via Ajax.

Binding to JSON
This example shows how a tree is built from JSON data.

Binding to XML
This example shows how a tree is built from XML data.

Checkboxes
This example shows how Checkboxes work.

Context Menu
This example shows how to create a context menu.

Default Functionality
This example displays images next to the tree items.

Drag and Drop
This example shows the tree's drag and drop functionality.

Drop Down
This example shows how you can display the tree in a popup.

Advanced Filtering
This example shows the advanced filtering mode.

Aggregates
This example provides the possibility to display aggregates.

Binding to Array
This example shows how to bind to array data.

Binding to CSV
This example shows how to bind to CSV data.

Binding to JSON
This example shows how to bind to JSON data.

Binding to Nested JSON
This example shows how to bind to nested JSON data.

Binding to Nested XML
This example shows how to bind to nested XML data.

Binding to Tab
This example shows how to bind to Tab data.

Binding to XML
This example shows how to bind to XML data.

Cell Editing
This example shows how to edit the cells.

Auto_Colors
This example shows the auto-color rendering mode.

Automatic Rendering
This example shows how automatic rendering is performed.

Bind with DataAdapter
This example shows how to bind 'TSV' data using the DataAdapter.

Binding to JSON
This example shows how to bind to JSON data.

Binding to Tab Data
This example shows how to bind to tab data.

Custom Colors
This example shows the custom rendering capabilities.

Default Functionality
This example shows hierarchical data as a set of nested rectangles.

Fluid Size
This example shows the width and height as percentages.

Range Colors
This example shows the range rendering capabilities.

Default Functionality
This example shows the default functionality.

Right to Left
This example showcases right-to-left support.

Validation Label
This example displays error labels instead of error tooltips.

API
This example shows the API functions.

Default Functionality
This example shows the default functionality.

Events
This example shows how to trigger some of the events like open, closed and moved.

Keyboard Support
This example shows keyboard navigation.

Multiple Windows
This example shows how to create multiple windows and display them at the same time.

Right to Left
This example shows right-to-left representation.


© 1997-2021    Codehacker - All Rights Reserved