Registry / web-framework / jqwidgets-framework

jqwidgets-framework

library25.1.0jsnpmunverified

jQWidgets is a comprehensive JavaScript-based UI framework offering over 60 customizable user interface widgets and 30+ chart types for building web applications across various platforms, including PC, touch, and mobile devices. It provides integrations and directives for modern frameworks like Angular (up to v21), Vue (v3), React, Blazor, and Web Components, while being fundamentally built upon jQuery, HTML5, and CSS3. The current stable version is 25.1.0, released in early 2026. The project maintains a fairly regular release cadence, with major versions often aligning with new Angular releases and focusing on modern framework compatibility, security, and usability. Key differentiators include its extensive suite of widgets, broad framework support, and explicit support for enterprise-grade security features like Content Security Policy (CSP) compliance since v17.0.0. It operates under a dual licensing model, offering a free non-commercial license and various commercial options with dedicated support.

web-framework

npm install jqwidgets-framework

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · JQWIDGETS-FRAMEWOR

jqwidgets-framework

web-frameworkjavascriptv25.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

(Global jQWidgets Core)

✓ import 'jqwidgets-framework/jqwidgets/jqxcore';

✗ import { jqxcore } from 'jqwidgets-framework/jqwidgets/jqxcore';

This is a side-effect import that extends the global jQuery prototype with jQWidgets core functionalities. There are no named exports from `jqxcore` for direct import.

jqxGrid (Widget)

✓ import 'jqwidgets-framework/jqwidgets/jqxgrid';

✗ import { jqxGrid } from 'jqwidgets-framework/jqwidgets/jqxgrid';

Imports the jqxGrid component, making it available as a jQuery plugin (e.g., `$(...).jqxGrid()`). Like the core, it's a side-effect import that extends the jQuery prototype. No named exports for the widget directly.

Theme CSS

✓ import 'jqwidgets-framework/jqwidgets/styles/jqx.base.css';

Import a base or specific theme CSS file (e.g., `jqx.light.css`, `jqx.fluent.css`) to style the components. This is a common pattern for UI libraries.

Demonstrates how to initialize a `jqxGrid` and a `jqxButton` with basic data using ES Modules, explicitly exposing jQuery globally for compatibility with the plugin architecture, including theme imports.

import $ from 'jquery'; import 'jqwidgets-framework/jqwidgets/jqxcore'; import 'jqwidgets-framework/jqwidgets/jqxbuttons'; import 'jqwidgets-framework/jqwidgets/jqxgrid'; import 'jqwidgets-framework/jqwidgets/jqxgrid.selection'; import 'jqwidgets-framework/jqwidgets/styles/jqx.base.css'; // Base theme import 'jqwidgets-framework/jqwidgets/styles/jqx.light.css'; // Specific theme (e.g., Light theme) // jQWidgets plugins often expect jQuery to be available globally. // This is a common workaround for modern module systems when using older plugins. window.jQuery = $; window.$ = $; document.addEventListener('DOMContentLoaded', () => { // Data for the jqxGrid const data = [ { name: "Andrew Fuller", age: 30, city: "Tacoma" }, { name: "Nancy Davolio", age: 25, city: "Seattle" }, { name: "Janet Leverling", age: 32, city: "London" } ]; const source = { localdata: data, datafields: [ { name: 'name', type: 'string' }, { name: 'age', type: 'number' }, { name: 'city', type: 'string' } ], datatype: "array" }; // Create a dataAdapter const dataAdapter = new ($.jqx.dataAdapter as any)(source); // Initialize jqxGrid const gridElement = document.getElementById('jqxgrid'); if (gridElement) { $(gridElement).jqxGrid( { width: 600, source: dataAdapter, autoheight: true, columns: [ { text: 'Name', datafield: 'name', width: 200 }, { text: 'Age', datafield: 'age', width: 100 }, { text: 'City', datafield: 'city', width: 200 } ], selectionmode: 'singlerow' } ); } // Initialize jqxButton const buttonElement = document.getElementById('myButton'); if (buttonElement) { $(buttonElement).jqxButton({ width: 100, height: 30 }); $(buttonElement).on('click', () => { alert('Button clicked!'); }); } }); /* Corresponding HTML file (e.g., index.html) structure: <!DOCTYPE html> <html> <head> <title>jQWidgets Quickstart</title> </head> <body> <div id="jqxgrid"></div> <button id="myButton">Click Me</button> <script type="module" src="./app.js"></script> </body> </html> */

Debug

Known issues

breakingMajor framework compatibility updates (e.g., Angular 21 support in v25.0.0, Vue 3 in v17.0.0) may introduce breaking changes or require specific migration steps for jQWidgets integrations. Always review the release notes for your target framework.

fix

Consult the official jQWidgets release notes and migration guides relevant to your specific framework version before upgrading the jQWidgets package.

affects: >=13.0.0

gotchajQWidgets operates under a dual licensing model. While a free non-commercial license is available, any commercial website, project, or corporate intranet requires a commercial license. Misuse can lead to legal issues.

fix

Ensure your project's usage aligns with the jQWidgets licensing terms. For commercial applications, obtain a suitable commercial license from jqwidgets.com.

affects: >=1.0.0

gotchajQWidgets is fundamentally built on and extends the jQuery prototype. Using it without jQuery, or with conflicting jQuery versions or modes (e.g., jQuery no-conflict mode), will lead to initialization errors or unexpected behavior.

fix

Ensure jQuery is loaded and available globally before any jQWidgets components are initialized. If using a module bundler, you may need to explicitly expose jQuery globally (e.g., `window.jQuery = $;`) for jQWidgets plugins to function correctly.

affects: >=1.0.0

breakingPrior to v17.0.0, jQWidgets components might have used inline styles or scripts that could violate strict Content Security Policy (CSP) directives. Version 17.0.0 introduced SVG icons to enhance CSP compliance.

fix

Upgrade to jQWidgets v17.0.0 or later for improved CSP compliance, especially regarding icon rendering. For older versions or specific issues, adjust your CSP directives to allow `style-src 'self' 'unsafe-inline'` and/or `script-src 'self' 'unsafe-inline'` as necessary, after a thorough security review.

affects: <17.0.0

gotchaAs a jQuery plugin framework, jQWidgets modifies the global `jQuery` object (`$.fn`). This can potentially lead to conflicts with other libraries that also extend jQuery's prototype or operate on the global namespace.

fix

Be mindful of the load order of other jQuery plugins or global scripts. If conflicts arise, consider using jQuery's `noConflict()` mode, although this may require corresponding adjustments in how jQWidgets components are initialized.

affects: >=1.0.0

Errors

Common errors & fixes

$(...).jqxGrid is not a function

The `jqxGrid` plugin (or the core `jqxcore` module) was not loaded or initialized correctly before being called on a jQuery element.

fix

Verify that `import 'jqwidgets-framework/jqwidgets/jqxcore';` and `import 'jqwidgets-framework/jqwidgets/jqxgrid';` are executed *before* attempting to use `$('#element').jqxGrid(...)` in your application.

jQuery is not defined

The jQuery library itself has not been loaded into the global scope or imported correctly within your module context, which jQWidgets relies on.

fix

Ensure `import $ from 'jquery';` is present at the top of your module. If using a bundler and jQWidgets expects a global jQuery, add `window.jQuery = $; window.$ = $;` after your jQuery import.

Refused to load the image '<URL>' because it violates the following Content Security Policy directive: "img-src 'self'"

Your application's Content Security Policy (CSP) is blocking the loading of image resources, which can include jQWidgets' icons or other visual assets.

fix

Review your CSP configuration. For jQWidgets v17.0.0+, ensure SVG icons are used and your `img-src` directive permits them. For older versions or specific icon sources, you might need to broaden your `img-src` or `style-src` directives (e.g., `data:`, `'unsafe-inline'`) as necessary.

TypeError: Cannot read properties of undefined (reading 'dataAdapter')

The `$.jqx` namespace or its `dataAdapter` property is not available, indicating that `jqxcore` or essential data-related modules were not loaded or initialized.

fix

Confirm that `import 'jqwidgets-framework/jqwidgets/jqxcore';` and any other required jQWidgets core data modules are imported and loaded correctly before attempting to create a `dataAdapter`.

Upgrade

Version history

25.1.0latest on npm

Audit

Dependencies

jqueryrequiredjQWidgets is built on jQuery and extends its prototype; it requires jQuery to be available.

Agent activity

7 hits · last 30 days

node

Bingbot

Resources

githubhttps://github.com/jqwidgets/jQWidgets ↗

packagehttps://www.npmjs.com/package/jqwidgets-framework ↗

homepagehttps://www.jqwidgets.com ↗