jqwidgets-framework

jQWidgets - the complete JavaScript UI framework for jQuery, React, Vue and TypeScript, with its demos: an enterprise data grid, scheduler, Gantt chart, pivot grid, tree grid, 30+ chart types, editors, date and number inputs, drop-downs, menus, tabs, docking and layout - 82 widgets with 40 themes, and over a thousand runnable demo pages for jQuery/JavaScript, React, Vue, Angular, TypeScript, ASP.NET and PHP, ready to open from disk.

If you only need the library in a build, install jqwidgets-scripts instead: it is the same jqwidgets/ folder and framework components without the demos. jqwidgets-ng is the Angular library.

Demos · Documentation · License & pricing

jQWidgets is commercial software. See Licensing.

Installation

npm install jqwidgets-framework

What is in the package

| Path | Contents | |---|---| | jqwidgets/ | The widgets, one script per widget, plus jqxcore.js (required by every widget) and jqx-all.js (everything in one file) | | jqwidgets/modules/ | One self-contained bundle per widget - the widget and everything it depends on | | jqwidgets/styles/ | jqx.base.css (required) and the 40 theme stylesheets | | jqwidgets/globalization/ | Globalize and 13 culture files for date and number formatting | | jqwidgets-react-tsx/ | React components, one folder per widget, with TypeScript definitions | | jqwidgets-vue3/, jqwidgets-vue/ | Vue 3 and Vue 2 single-file components | | jqwidgets-ts/ | jqwidgets.d.ts, TypeScript definitions for the whole library | | demos/ | The demos as they appear on jqwidgets.com - Javascript & JQuery, React-TSX, Vue.js, Angular, Typescript, ASP.NET, PHP, Showcase - each page loading the jqwidgets/ folder beside them | | images/, scripts/, styles/ | What the demo pages use | | ReleaseNotes.txt, EULA.pdf | What changed in this version, and the license terms |

Open index.htm at the root of the package for the demo index.

Quick start

The library is used exactly as jqwidgets-scripts, whose README walks through plain JavaScript, the per-widget module bundles, React, Vue 3, TypeScript, themes and globalization. The shortest version:

<link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" />
<link rel="stylesheet" href="jqwidgets/styles/jqx.material.css" />
<script src="jqwidgets/modules/jqxgrid.js"></script>

<div id="grid"></div>
<script>
    var source = {
        datatype: 'array',
        localdata: [{ name: 'Nancy', title: 'Sales Representative' }, { name: 'Andrew', title: 'Vice President' }],
        datafields: [{ name: 'name', type: 'string' }, { name: 'title', type: 'string' }]
    };
    $('#grid').jqxGrid({
        theme: 'material',
        source: new $.jqx.dataAdapter(source),
        columns: [{ text: 'Name', datafield: 'name' }, { text: 'Title', datafield: 'title' }]
    });
</script>

jqwidgets/modules/<widget>.js is the widget with everything it depends on. To load scripts individually instead, every widget needs jqxcore.js and its own script, and the documentation page of each widget lists the others it depends on. jQuery is optional: if it is on the page first the widgets attach to it, otherwise they use the built-in JQXLite, exposed as $.

Every demo is a complete page: open one in the browser to see a widget running, and view its source for the exact scripts, markup and options it uses.

Components

Every widget follows one naming convention, so the table is enough to write the code: the jQuery plugin is jqxGrid, its script jqwidgets/jqxgrid.js, its bundle jqwidgets/modules/jqxgrid.js, the React component JqxGrid imported from jqwidgets-framework/jqwidgets-react-tsx/jqxgrid, the Vue 3 component jqwidgets-framework/jqwidgets-vue3/vue_jqxgrid.vue, and in jqwidgets-ng the entry point jqwidgets-ng/jqxgrid. Option, event and method names are the same in every framework and are documented once, per widget, at jqwidgets.com/jquery-widgets-documentation.

| Widget | What it does | jQuery / JavaScript | React | Vue 3 | Angular | |---|---|---|---|---|---| | jqxBarcode | Barcodes encodes value in a specific pattern. | jqxbarcode.js · modules/jqxbarcode.js | JqxBarcode from jqwidgets-react-tsx/jqxbarcode | vue_jqxbarcode.vue | jqwidgets-ng/jqxbarcode | | jqxBarGauge | Displays multiple values in a circular graph. | jqxbargauge.js · modules/jqxbargauge.js | JqxBarGauge from jqwidgets-react-tsx/jqxbargauge | vue_jqxbargauge.vue | jqwidgets-ng/jqxbargauge | | jqxBulletChart | Features two measures - a primary one (the pointer) and a comparative one (the target) and displays them in the context of a number of... | jqxbulletchart.js · modules/jqxbulletchart.js | JqxBulletChart from jqwidgets-react-tsx/jqxbulletchart | vue_jqxbulletchart.vue | jqwidgets-ng/jqxbulletchart | | jqxButtonGroup | Enables the creation of groups of buttons. | jqxbuttongroup.js · modules/jqxbuttongroup.js | JqxButtonGroup from jqwidgets-react-tsx/jqxbuttongroup | vue_jqxbuttongroup.vue | jqwidgets-ng/jqxbuttongroup | | jqxButton | Displays a simple button. | jqxbuttons.js · modules/jqxbuttons.js | JqxButton from jqwidgets-react-tsx/jqxbuttons | vue_jqxbuttons.vue | jqwidgets-ng/jqxbuttons | | jqxCalendar | Enables the user to select a date using a visual monthly calendar display. | jqxcalendar.js · modules/jqxcalendar.js | JqxCalendar from jqwidgets-react-tsx/jqxcalendar | vue_jqxcalendar.vue | jqwidgets-ng/jqxcalendar | | jqxChart | Displays Lightweight and powerful chart widget written 100% in javascript. | jqxchart.js · modules/jqxchart.js | JqxChart from jqwidgets-react-tsx/jqxchart | vue_jqxchart.vue | jqwidgets-ng/jqxchart | | jqxChat | Embeds an AI assistant chat into a web application. | jqxchat.js · modules/jqxchat.js | JqxChat from jqwidgets-react-tsx/jqxchat | vue_jqxchat.vue | jqwidgets-ng/jqxchat | | jqxCheckBox | Displays a check box that allows the end-user to select a true, false or indeterminate condition. | jqxcheckbox.js · modules/jqxcheckbox.js | JqxCheckBox from jqwidgets-react-tsx/jqxcheckbox | vue_jqxcheckbox.vue | jqwidgets-ng/jqxcheckbox | | jqxCheckBoxGroup | Displays a check box group of items. | jqxcheckboxgroup.js · modules/jqxcheckboxgroup.js | JqxCheckBoxGroup from jqwidgets-react-tsx/jqxcheckboxgroup | vue_jqxcheckboxgroup.vue | jqwidgets-ng/jqxcheckboxgroup | | jqxColorPicker | Enables the user to easily pick a color. | jqxcolorpicker.js · modules/jqxcolorpicker.js | JqxColorPicker from jqwidgets-react-tsx/jqxcolorpicker | vue_jqxcolorpicker.vue | jqwidgets-ng/jqxcolorpicker | | jqxComboBox | Enables the user to easily pick an item from a list of selectable items displayed in a drop-down. | jqxcombobox.js · modules/jqxcombobox.js | JqxComboBox from jqwidgets-react-tsx/jqxcombobox | vue_jqxcombobox.vue | jqwidgets-ng/jqxcombobox | | jqxComplexInput | Enables the user to edit complex and scientific numbers. | jqxcomplexinput.js · modules/jqxcomplexinput.js | JqxComplexInput from jqwidgets-react-tsx/jqxcomplexinput | vue_jqxcomplexinput.vue | jqwidgets-ng/jqxcomplexinput | | jqxDataTable | Displays a table of data and allows the user to sort, filter or edit it. | jqxdatatable.js · modules/jqxdatatable.js | JqxDataTable from jqwidgets-react-tsx/jqxdatatable | vue_jqxdatatable.vue | jqwidgets-ng/jqxdatatable | | jqxDateTimeInput | Enables the user to easily pick a date or time from an input or calendar displays in a drop-down. | jqxdatetimeinput.js · modules/jqxdatetimeinput.js | JqxDateTimeInput from jqwidgets-react-tsx/jqxdatetimeinput | vue_jqxdatetimeinput.vue | jqwidgets-ng/jqxdatetimeinput | | jqxDocking | Enables the user to add windows and change their layout. | jqxdocking.js · modules/jqxdocking.js | JqxDocking from jqwidgets-react-tsx/jqxdocking | vue_jqxdocking.vue | jqwidgets-ng/jqxdocking | | jqxDockingLayout | Enables the creation of complex layouts with panels that can be floated, docked, nested, resized, pinned, unpinned and closed. | jqxdockinglayout.js · modules/jqxdockinglayout.js | JqxDockingLayout from jqwidgets-react-tsx/jqxdockinglayout | vue_jqxdockinglayout.vue | jqwidgets-ng/jqxdockinglayout | | jqxDockPanel | Allows the creation of dock layouts. | jqxdockpanel.js · modules/jqxdockpanel.js | JqxDockPanel from jqwidgets-react-tsx/jqxdockpanel | vue_jqxdockpanel.vue | jqwidgets-ng/jqxdockpanel | | jqxDragDrop | Enables the user to easily drag and drop items. | jqxdragdrop.js · modules/jqxdragdrop.js | JqxDragDrop from jqwidgets-react-tsx/jqxdragdrop | vue_jqxdragdrop.vue | jqwidgets-ng/jqxdragdrop | | jqxDraw | Drawing SVG, HTML5 and VML programming interface. | jqxdraw.js · modules/jqxdraw.js | JqxDraw from jqwidgets-react-tsx/jqxdraw | vue_jqxdraw.vue | jqwidgets-ng/jqxdraw | | jqxDropDownButton | Contains a custom content displayed in a drop-down. | jqxdropdownbutton.js · modules/jqxdropdownbutton.js | JqxDropDownButton from jqwidgets-react-tsx/jqxdropdownbutton | vue_jqxdropdownbutton.vue | jqwidgets-ng/jqxdropdownbutton | | jqxDropDownList | Contains a list of selectable items displayed in a drop-down. | jqxdropdownlist.js · modules/jqxdropdownlist.js | JqxDropDownList from jqwidgets-react-tsx/jqxdropdownlist | vue_jqxdropdownlist.vue | jqwidgets-ng/jqxdropdownlist | | jqxEditor | Represents a ready-for-use HTML text editor which can simplify web content creation or be a replacement of your HTML Text Areas. | jqxeditor.js · modules/jqxeditor.js | JqxEditor from jqwidgets-react-tsx/jqxeditor | vue_jqxeditor.vue | jqwidgets-ng/jqxeditor | | jqxExpander | Displays header and content sections(like tabs). | jqxexpander.js · modules/jqxexpander.js | JqxExpander from jqwidgets-react-tsx/jqxexpander | vue_jqxexpander.vue | jqwidgets-ng/jqxexpander | | jqxFileUpload | Enables users to select files and upload them to a server. | jqxfileupload.js · modules/jqxfileupload.js | JqxFileUpload from jqwidgets-react-tsx/jqxfileupload | vue_jqxfileupload.vue | jqwidgets-ng/jqxfileupload | | jqxForm | Form component displaying one or more input elements. | jqxform.js · modules/jqxform.js | JqxForm from jqwidgets-react-tsx/jqxform | vue_jqxform.vue | jqwidgets-ng/jqxform | | jqxFormattedInput | Enables users to format numbers in various numeric formats. | jqxformattedinput.js · modules/jqxformattedinput.js | JqxFormattedInput from jqwidgets-react-tsx/jqxformattedinput | vue_jqxformattedinput.vue | jqwidgets-ng/jqxformattedinput | | jqxGantt | Enables users to create easily Gantt charts | jqxgantt.js · modules/jqxgantt.js | JqxGantt from jqwidgets-react-tsx/jqxgantt | vue_jqxgantt.vue | jqwidgets-ng/jqxgantt | | jqxGauge | Displays an indicator within a range of values. | jqxgauge.js · modules/jqxgauge.js | JqxGauge from jqwidgets-react-tsx/jqxgauge | vue_jqxgauge.vue | jqwidgets-ng/jqxgauge | | jqxGrid | Enables users to display tabular data. | jqxgrid.js · modules/jqxgrid.js | JqxGrid from jqwidgets-react-tsx/jqxgrid | vue_jqxgrid.vue | jqwidgets-ng/jqxgrid | | jqxHeatMap | Displays a heatmap. | jqxheatmap.js · modules/jqxheatmap.js | JqxHeatMap from jqwidgets-react-tsx/jqxheatmap | vue_jqxheatmap.vue | jqwidgets-ng/jqxheatmap | | jqxInput | Represents an Input with auto-complete capabilities. | jqxinput.js · modules/jqxinput.js | JqxInput from jqwidgets-react-tsx/jqxinput | vue_jqxinput.vue | jqwidgets-ng/jqxinput | | jqxKanban | Can be used to implement the kanban method for a project. | jqxkanban.js · modules/jqxkanban.js | JqxKanban from jqwidgets-react-tsx/jqxkanban | vue_jqxkanban.vue | jqwidgets-ng/jqxkanban | | jqxKnob | Displays a graph with round shape which displays a draggable indicator within a range of values. | jqxknob.js · modules/jqxknob.js | JqxKnob from jqwidgets-react-tsx/jqxknob | vue_jqxknob.vue | jqwidgets-ng/jqxknob | | jqxLayout | Allows the creation of complex layouts with panels that can be nested, resized, pinned, unpinned and closed. | jqxlayout.js · modules/jqxlayout.js | JqxLayout from jqwidgets-react-tsx/jqxlayout | vue_jqxlayout.vue | jqwidgets-ng/jqxlayout | | jqxLinearGauge | Displays a linear gauge. | jqxgauge.js · modules/jqxlineargauge.js | JqxLinearGauge from jqwidgets-react-tsx/jqxlineargauge | vue_jqxlineargauge.vue | jqwidgets-ng/jqxlineargauge | | jqxLinkButton | Displays a button with anchor tag. | jqxbuttons.js · modules/jqxlinkbutton.js | JqxLinkButton from jqwidgets-react-tsx/jqxlinkbutton | vue_jqxlinkbutton.vue | jqwidgets-ng/jqxlinkbutton | | jqxListBox | Displays a list of selectable items. | jqxlistbox.js · modules/jqxlistbox.js | JqxListBox from jqwidgets-react-tsx/jqxlistbox | vue_jqxlistbox.vue | jqwidgets-ng/jqxlistbox | | jqxListMenu | Displays a collection of Unordered and Ordered Lists. | jqxlistmenu.js · modules/jqxlistmenu.js | JqxListMenu from jqwidgets-react-tsx/jqxlistmenu | vue_jqxlistmenu.vue | jqwidgets-ng/jqxlistmenu | | jqxLoader | Displays a built-in loading element. | jqxloader.js · modules/jqxloader.js | JqxLoader from jqwidgets-react-tsx/jqxloader | vue_jqxloader.vue | jqwidgets-ng/jqxloader | | jqxMaskedInput | Uses a mask to distinguish between proper and improper user input. | jqxmaskedinput.js · modules/jqxmaskedinput.js | JqxMaskedInput from jqwidgets-react-tsx/jqxmaskedinput | vue_jqxmaskedinput.vue | jqwidgets-ng/jqxmaskedinput | | jqxMenu | Enables you to add menus to your website or web application. | jqxmenu.js · modules/jqxmenu.js | JqxMenu from jqwidgets-react-tsx/jqxmenu | vue_jqxmenu.vue | jqwidgets-ng/jqxmenu | | jqxNavBar | Is Built from UL and LI tags and can be used for creating responsive horizontal/vertical layouts or simple navigation menus. | jqxnavbar.js · modules/jqxnavbar.js | JqxNavBar from jqwidgets-react-tsx/jqxnavbar | vue_jqxnavbar.vue | jqwidgets-ng/jqxnavbar | | jqxNavigationBar | Is Similar to Tabs, NavigationBar has header and content sections. | jqxnavigationbar.js · modules/jqxnavigationbar.js | JqxNavigationBar from jqwidgets-react-tsx/jqxnavigationbar | vue_jqxnavigationbar.vue | jqwidgets-ng/jqxnavigationbar | | jqxNotification | Displays an unobtrusive notification to the user. | jqxnotification.js · modules/jqxnotification.js | JqxNotification from jqwidgets-react-tsx/jqxnotification | vue_jqxnotification.vue | jqwidgets-ng/jqxnotification | | jqxNumberInput | Enables users to input numbers. | jqxnumberinput.js · modules/jqxnumberinput.js | JqxNumberInput from jqwidgets-react-tsx/jqxnumberinput | vue_jqxnumberinput.vue | jqwidgets-ng/jqxnumberinput | | jqxPanel | Enables users to display content in a scrollable panel. | jqxpanel.js · modules/jqxpanel.js | JqxPanel from jqwidgets-react-tsx/jqxpanel | vue_jqxpanel.vue | jqwidgets-ng/jqxpanel | | jqxPasswordInput | Enables users to input passwords. | jqxpasswordinput.js · modules/jqxpasswordinput.js | JqxPasswordInput from jqwidgets-react-tsx/jqxpasswordinput | vue_jqxpasswordinput.vue | jqwidgets-ng/jqxpasswordinput | | jqxPickList | A dual-list picker for moving items between an available list and a selected list. | jqxpicklist.js · modules/jqxpicklist.js | JqxPickList from jqwidgets-react-tsx/jqxpicklist | vue_jqxpicklist.vue | jqwidgets-ng/jqxpicklist | | jqxPivotDesigner | Lets users design a PivotGrid interactively. | jqxpivotdesigner.js · modules/jqxpivotdesigner.js | JqxPivotDesigner from jqwidgets-react-tsx/jqxpivotdesigner | vue_jqxpivotdesigner.vue | jqwidgets-ng/jqxpivotdesigner | | jqxPivotGrid | Displays summarized data in a multi-dimensional, cross-tabulated view. | jqxpivotgrid.js · modules/jqxpivotgrid.js | JqxPivotGrid from jqwidgets-react-tsx/jqxpivotgrid | vue_jqxpivotgrid.vue | jqwidgets-ng/jqxpivotgrid | | jqxPopover | Displays a Small overlay of content that is used to display secondary information of any element when it is clicked by a user. | jqxpopover.js · modules/jqxpopover.js | JqxPopover from jqwidgets-react-tsx/jqxpopover | vue_jqxpopover.vue | jqwidgets-ng/jqxpopover | | jqxProgressBar | Visually indicates the progress of a lengthy operation. | jqxprogressbar.js · modules/jqxprogressbar.js | JqxProgressBar from jqwidgets-react-tsx/jqxprogressbar | vue_jqxprogressbar.vue | jqwidgets-ng/jqxprogressbar | | jqxQRcode | QR Codes encode text values in a two-dimensional pattern. | jqxqrcode.js · modules/jqxqrcode.js | JqxQRcode from jqwidgets-react-tsx/jqxqrcode | vue_jqxqrcode.vue | jqwidgets-ng/jqxqrcode | | jqxRadioButton | Enables users make a choice among a set of mutually exclusive, related options. | jqxradiobutton.js · modules/jqxradiobutton.js | JqxRadioButton from jqwidgets-react-tsx/jqxradiobutton | vue_jqxradiobutton.vue | jqwidgets-ng/jqxradiobutton | | jqxRadioButtonGroup | Displays a check box group of items. | jqxradiobuttongroup.js · modules/jqxradiobuttongroup.js | JqxRadioButtonGroup from jqwidgets-react-tsx/jqxradiobuttongroup | vue_jqxradiobuttongroup.vue | jqwidgets-ng/jqxradiobuttongroup | | jqxRangeSelector | Can easily be used to select a numeric or date range. | jqxrangeselector.js · modules/jqxrangeselector.js | JqxRangeSelector from jqwidgets-react-tsx/jqxrangeselector | vue_jqxrangeselector.vue | jqwidgets-ng/jqxrangeselector | | jqxRating | Allows you to choose a rating. | jqxrating.js · modules/jqxrating.js | JqxRating from jqwidgets-react-tsx/jqxrating | vue_jqxrating.vue | jqwidgets-ng/jqxrating | | jqxRepeatButton | Represents a button, which fires repeating click events, when the button is clicked. | jqxbuttons.js · modules/jqxrepeatbutton.js | JqxRepeatButton from jqwidgets-react-tsx/jqxrepeatbutton | vue_jqxrepeatbutton.vue | jqwidgets-ng/jqxrepeatbutton | | jqxResponsivePanel | Displays responsive panel with collapse point on resize. | jqxresponsivepanel.js · modules/jqxresponsivepanel.js | JqxResponsivePanel from jqwidgets-react-tsx/jqxresponsivepanel | vue_jqxresponsivepanel.vue | jqwidgets-ng/jqxresponsivepanel | | jqxRibbon | Can be used as a tabbed toolbar or a mega menu. | jqxribbon.js · modules/jqxribbon.js | JqxRibbon from jqwidgets-react-tsx/jqxribbon | vue_jqxribbon.vue | jqwidgets-ng/jqxribbon | | jqxScheduler | Displays a set of Appointments in Day, Week, Month, Timeline Day, Timeline Week and Timeline Month and Agenda views. | jqxscheduler.js · modules/jqxscheduler.js | JqxScheduler from jqwidgets-react-tsx/jqxscheduler | vue_jqxscheduler.vue | jqwidgets-ng/jqxscheduler | | jqxScrollBar | Provides a scroll bar that has a sliding thumb whose position corresponds to a value. | jqxscrollbar.js · modules/jqxscrollbar.js | JqxScrollBar from jqwidgets-react-tsx/jqxscrollbar | vue_jqxscrollbar.vue | jqwidgets-ng/jqxscrollbar | | jqxScrollView | Can be used for viewing content which is wider than the visible area outlined by the device's screen. | jqxscrollview.js · modules/jqxscrollview.js | JqxScrollView from jqwidgets-react-tsx/jqxscrollview | vue_jqxscrollview.vue | jqwidgets-ng/jqxscrollview | | jqxSlider | Represents a flexible Slider that lets the user select from a range of values by moving a thumb along a track. | jqxslider.js · modules/jqxslider.js | JqxSlider from jqwidgets-react-tsx/jqxslider | vue_jqxslider.vue | jqwidgets-ng/jqxslider | | jqxSortable | Enables users to change the position of elements through drag and drop. | jqxsortable.js · modules/jqxsortable.js | JqxSortable from jqwidgets-react-tsx/jqxsortable | vue_jqxsortable.vue | jqwidgets-ng/jqxsortable | | jqxSplitLayout | Enables users to create complex Layouts and to re-arrange them dynamically | jqxsplitlayout.js · modules/jqxsplitlayout.js | JqxSplitLayout from jqwidgets-react-tsx/jqxsplitlayout | vue_jqxsplitlayout.vue | jqwidgets-ng/jqxsplitlayout | | jqxSplitter | Displays a Splitter. It divides two panels with a split bar and the size of each panel can be adjusted through the split bar. | jqxsplitter.js · modules/jqxsplitter.js | JqxSplitter from jqwidgets-react-tsx/jqxsplitter | vue_jqxsplitter.vue | jqwidgets-ng/jqxsplitter | | jqxSwitchButton | Displays a switch button. | jqxswitchbutton.js · modules/jqxswitchbutton.js | JqxSwitchButton from jqwidgets-react-tsx/jqxswitchbutton | vue_jqxswitchbutton.vue | jqwidgets-ng/jqxswitchbutton | | jqxTabs | Displays Tabs that break the content into multiple sections. | jqxtabs.js · modules/jqxtabs.js | JqxTabs from jqwidgets-react-tsx/jqxtabs | vue_jqxtabs.vue | jqwidgets-ng/jqxtabs | | jqxTagCloud | Displays a collection of user-generated tags accompanying the articles, posts, or videos on your website. | jqxtagcloud.js · modules/jqxtagcloud.js | JqxTagCloud from jqwidgets-react-tsx/jqxtagcloud | vue_jqxtagcloud.vue | jqwidgets-ng/jqxtagcloud | | jqxTextArea | Displays a Text area on a web page. | jqxtextarea.js · modules/jqxtextarea.js | JqxTextArea from jqwidgets-react-tsx/jqxtextarea | vue_jqxtextarea.vue | jqwidgets-ng/jqxtextarea | | jqxTimeline | Displays a timeline of items. | jqxtimeline.js · modules/jqxtimeline.js | JqxTimeline from jqwidgets-react-tsx/jqxtimeline | vue_jqxtimeline.vue | jqwidgets-ng/jqxtimeline | | jqxTimePicker | Represents hours and minutes as an o'clock in a circular graph. | jqxtimepicker.js · modules/jqxtimepicker.js | JqxTimePicker from jqwidgets-react-tsx/jqxtimepicker | vue_jqxtimepicker.vue | jqwidgets-ng/jqxtimepicker | | jqxToggleButton | Displays a Button which can be toggled and have two states - checked and unchecked. | jqxbuttons.js · modules/jqxtogglebutton.js | JqxToggleButton from jqwidgets-react-tsx/jqxtogglebutton | vue_jqxtogglebutton.vue | jqwidgets-ng/jqxtogglebutton | | jqxToolBar | Displays a bar with tools such as buttons, drop-downs and others. | jqxtoolbar.js · modules/jqxtoolbar.js | JqxToolBar from jqwidgets-react-tsx/jqxtoolbar | vue_jqxtoolbar.vue | jqwidgets-ng/jqxtoolbar | | jqxTooltip | Enables users to display a popup message. | jqxtooltip.js · modules/jqxtooltip.js | JqxTooltip from jqwidgets-react-tsx/jqxtooltip | vue_jqxtooltip.vue | jqwidgets-ng/jqxtooltip | | jqxTree | Represents a Tree that displays a hierarchical collection of items. | jqxtree.js · modules/jqxtree.js | JqxTree from jqwidgets-react-tsx/jqxtree | vue_jqxtree.vue | jqwidgets-ng/jqxtree | | jqxTreeGrid | Represents data in a tree-like structure. | jqxtreegrid.js · modules/jqxtreegrid.js | JqxTreeGrid from jqwidgets-react-tsx/jqxtreegrid | vue_jqxtreegrid.vue | jqwidgets-ng/jqxtreegrid | | jqxTreeMap | Displays hierarchical data as a set of nested rectangles. | jqxtreemap.js · modules/jqxtreemap.js | JqxTreeMap from jqwidgets-react-tsx/jqxtreemap | vue_jqxtreemap.vue | jqwidgets-ng/jqxtreemap | | jqxValidator | Enables you to validate users input. | jqxvalidator.js · modules/jqxvalidator.js | JqxValidator from jqwidgets-react-tsx/jqxvalidator | vue_jqxvalidator.vue | jqwidgets-ng/jqxvalidator | | jqxWindow | Enables you to direct a user�s attention to a particular activity in your web application, such as entering data or viewing information. | jqxwindow.js · modules/jqxwindow.js | JqxWindow from jqwidgets-react-tsx/jqxwindow | vue_jqxwindow.vue | jqwidgets-ng/jqxwindow |

If something goes wrong

| What you see | Why | What to do | |---|---|---| | $(...).jqxGrid is not a function | The widget's script is not loaded, or was loaded before jqxcore.js | Load jqxcore.js first, then the widget's script - or its module bundle | | Please include jqxinput.js (or another script name) | The widget depends on a script that is not on the page | Load the named script, or the widget's module bundle, which carries every dependency | | $.jqx is undefined | $ is a different library - typically a second jQuery loaded after jqxcore.js | Load jQuery once, before jqxcore.js | | The widget renders unstyled | jqx.base.css or the theme stylesheet is not loaded, or theme names one that is not | Load both; the theme value must match a loaded jqx.<theme>.css | | A demo that loads sample data shows nothing when opened from disk | Browsers block the request for the data file from a file:// page | Serve the package folder over HTTP (npx http-server .) and open the demo from there | | "jQWidgets License Key Not Found" in the console, a www.jqwidgets.com label on the widget | The evaluation build is running without a license key | Apply the license key from your license email; see Licensing |

Working with an AI assistant

npx jqwidgets-mcp-server gives Claude Code, Cursor, Copilot and any other MCP client the full API of every widget - properties, methods, events and data types - and a code generator for jQuery, React, Angular and Vue, so generated code uses real names and real options. See jqwidgets-mcp-server on npm.

Licensing

jQWidgets is commercial software distributed under the jQWidgets license; the full terms are in the EULA.pdf shipped with the package. You are welcome to evaluate it. Builds without a license key show an evaluation notice and are not licensed for production use.

Sales and licensing: [email protected]

Support

• Documentation: https://www.jqwidgets.com/jquery-widgets-documentation/
• Demos: https://www.jqwidgets.com/jquery-widgets-demo/
• Angular demos: https://www.jqwidgets.com/angular/
• React demos: https://www.jqwidgets.com/react/
• Forums: https://www.jqwidgets.com/community/
• Source and issues: https://github.com/jqwidgets/jQWidgets
• What changed: ReleaseNotes.txt in the package

Security reports: email [email protected] with a subject line beginning SECURITY:. Please include the affected version and a reproduction; you will hear back from a person within three business days.