{"id":17277,"library":"jqwidgets-framework","title":"jQWidgets Framework","description":"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.","status":"active","version":"25.1.0","language":"javascript","source_language":"en","source_url":"git://github.com/jqwidgets/jQWidgets","tags":["javascript","JavaScript","jQuery","HTML5","jQWidgets","Angular 20","Angular 19","Angular 18","Angular 17"],"install":[{"cmd":"npm install jqwidgets-framework","lang":"bash","label":"npm"},{"cmd":"yarn add jqwidgets-framework","lang":"bash","label":"yarn"},{"cmd":"pnpm add jqwidgets-framework","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"jQWidgets is built on jQuery and extends its prototype; it requires jQuery to be available.","package":"jquery","optional":false}],"imports":[{"note":"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.","wrong":"import { jqxcore } from 'jqwidgets-framework/jqwidgets/jqxcore';","symbol":"(Global jQWidgets Core)","correct":"import 'jqwidgets-framework/jqwidgets/jqxcore';"},{"note":"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.","wrong":"import { jqxGrid } from 'jqwidgets-framework/jqwidgets/jqxgrid';","symbol":"jqxGrid (Widget)","correct":"import 'jqwidgets-framework/jqwidgets/jqxgrid';"},{"note":"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.","symbol":"Theme CSS","correct":"import 'jqwidgets-framework/jqwidgets/styles/jqx.base.css';"}],"quickstart":{"code":"import $ from 'jquery';\nimport 'jqwidgets-framework/jqwidgets/jqxcore';\nimport 'jqwidgets-framework/jqwidgets/jqxbuttons';\nimport 'jqwidgets-framework/jqwidgets/jqxgrid';\nimport 'jqwidgets-framework/jqwidgets/jqxgrid.selection';\nimport 'jqwidgets-framework/jqwidgets/styles/jqx.base.css'; // Base theme\nimport 'jqwidgets-framework/jqwidgets/styles/jqx.light.css'; // Specific theme (e.g., Light theme)\n\n// jQWidgets plugins often expect jQuery to be available globally.\n// This is a common workaround for modern module systems when using older plugins.\nwindow.jQuery = $;\nwindow.$ = $;\n\ndocument.addEventListener('DOMContentLoaded', () => {\n  // Data for the jqxGrid\n  const data = [\n    { name: \"Andrew Fuller\", age: 30, city: \"Tacoma\" },\n    { name: \"Nancy Davolio\", age: 25, city: \"Seattle\" },\n    { name: \"Janet Leverling\", age: 32, city: \"London\" }\n  ];\n\n  const source = {\n    localdata: data,\n    datafields: [\n      { name: 'name', type: 'string' },\n      { name: 'age', type: 'number' },\n      { name: 'city', type: 'string' }\n    ],\n    datatype: \"array\"\n  };\n\n  // Create a dataAdapter\n  const dataAdapter = new ($.jqx.dataAdapter as any)(source);\n\n  // Initialize jqxGrid\n  const gridElement = document.getElementById('jqxgrid');\n  if (gridElement) {\n    $(gridElement).jqxGrid(\n      {\n        width: 600,\n        source: dataAdapter,\n        autoheight: true,\n        columns: [\n          { text: 'Name', datafield: 'name', width: 200 },\n          { text: 'Age', datafield: 'age', width: 100 },\n          { text: 'City', datafield: 'city', width: 200 }\n        ],\n        selectionmode: 'singlerow'\n      }\n    );\n  }\n\n  // Initialize jqxButton\n  const buttonElement = document.getElementById('myButton');\n  if (buttonElement) {\n    $(buttonElement).jqxButton({ width: 100, height: 30 });\n    $(buttonElement).on('click', () => {\n      alert('Button clicked!');\n    });\n  }\n});\n\n/*\n  Corresponding HTML file (e.g., index.html) structure:\n  <!DOCTYPE html>\n  <html>\n  <head>\n      <title>jQWidgets Quickstart</title>\n  </head>\n  <body>\n      <div id=\"jqxgrid\"></div>\n      <button id=\"myButton\">Click Me</button>\n      <script type=\"module\" src=\"./app.js\"></script>\n  </body>\n  </html>\n*/","lang":"typescript","description":"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."},"warnings":[{"fix":"Consult the official jQWidgets release notes and migration guides relevant to your specific framework version before upgrading the jQWidgets package.","message":"Major 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.","severity":"breaking","affected_versions":">=13.0.0"},{"fix":"Ensure your project's usage aligns with the jQWidgets licensing terms. For commercial applications, obtain a suitable commercial license from jqwidgets.com.","message":"jQWidgets 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"jQWidgets 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Prior 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.","severity":"breaking","affected_versions":"<17.0.0"},{"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.","message":"As 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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"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.","cause":"The `jqxGrid` plugin (or the core `jqxcore` module) was not loaded or initialized correctly before being called on a jQuery element.","error":"$(...).jqxGrid is not a function"},{"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.","cause":"The jQuery library itself has not been loaded into the global scope or imported correctly within your module context, which jQWidgets relies on.","error":"jQuery is not defined"},{"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.","cause":"Your application's Content Security Policy (CSP) is blocking the loading of image resources, which can include jQWidgets' icons or other visual assets.","error":"Refused to load the image '<URL>' because it violates the following Content Security Policy directive: \"img-src 'self'\""},{"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`.","cause":"The `$.jqx` namespace or its `dataAdapter` property is not available, indicating that `jqxcore` or essential data-related modules were not loaded or initialized.","error":"TypeError: Cannot read properties of undefined (reading 'dataAdapter')"}],"ecosystem":"npm","meta_description":null}