DOCSEARCHbyAlgolia
Submit Docs

Ignite UI for jQuery Documentation

repository·master·Indexed 19 days ago

https://github.com/igniteui/ignite-ui

A suite of high-performance UI components and controls for professional line-of-business web applications. Built on jQuery and jQuery UI, it provides a wide range of editors, data visualization tools (igDataChart, igMap), layout managers, and robust grid solutions (igGrid, igTreeGrid). It supports integration with AngularJS, Knockout, and jQuery Mobile, and offers multiple theming options including Bootstrap 3, Bootstrap 4, Metro, and iOS.

Tokens
5.4K
Snippets
10
Records
34
Agent score
64%

What's inside Ignite UI for jQuery

  1. Overview of Ignite UI for jQuery

    master
    Ignite UI for jQuery is a library designed for building high-performance, web-based line-of-business applications. It provides user experience controls and components optimized for both mobile and desktop browser environments.

  2. Available Features in Ignite UI for jQuery Grid

    master

    The Ignite UI for jQuery igGrid supports a wide range of features for data manipulation, display, and interaction. Key features include:

    Data Manipulation & Display

    • Filtering: Enable column-based filtering.
    • Sorting: Support for sorting data.
    • Unbound Columns: Create columns that are not directly tied to the data source.
    • Paging: Implement pagination for large datasets.
    • Virtualization: Optimize performance for large grids by rendering only visible rows.
    • Grid Load On Demand: Append rows as the user scrolls.
    • Cell Merging: Merge cells for specific visual layouts.
    • Grid Multi-Row Layout: Display data in a multi-row format.
    • Columns and Layout: Comprehensive control over grid structure.

    User Interaction & Selection

    • Feature Chooser: Allow users to toggle grid features.
    • Row Selectors: Provide UI elements for selecting rows.
    • Selection: Manage row and cell selection states.
    • Tooltips: Display information on hover.
    • Updating: Support for basic cell editing and data updates.
    • REST Updating: Synchronize grid changes with a RESTful backend.

    Advanced Integration & Design

    • Responsive Web Design (RWD) Mode: Adapt the grid layout for different screen sizes.
    • jsRender Integration: Use jsRender for custom cell rendering.
    • Knockout Support: Bind the grid to Knockout.js observables.
    • Theming: Apply visual styles like Metro or iOS themes.

  4. Compare Ignite UI for jQuery OSS and Full versions

    master

    The following table outlines the features available in the Open Source Software (OSS) version of Ignite UI for jQuery compared to the Full and Infragistics Ultimate versions. Use this to determine if the OSS version meets your project requirements.

    Available in OSS version:

    Editors

    • igCombo
    • igHtmlEditor
    • igRating
    • igValidator
    • igCurrencyEditor
    • igDateEditor
    • igMaskEditor
    • igNumericEditor
    • igPercentEditor
    • igTextEditor
    • igCheckboxEditor
    • igDatePicker

    Frameworks

    • igLoader
    • igDataSource
    • Templating Engine

    Interactions

    • igTree
    • igDialog
    • igToolbar
    • igToolbarButton
    • igSplitButton
    • igNotifier
    • igPopover
    • igColorPicker
    • igColorPickerSplitButton

    Not available in OSS version:

    • JS Excel Engine (Full/Ultimate only)
    • igGridExcelExporter (Full/Ultimate only)
    • igRadialMenu (Full/Ultimate only)

  6. Understand the Bootstrap 4 theme file structure

    master

    The Bootstrap 4 theme for Ignite UI for jQuery is organized into several key directories and files. To customize or use the theme, you should be aware of these components:

    • images: Contains all images related to the theme.
    • infragistics.theme.less: The root file that imports all sub-files. This is the single file required to compile the theme into CSS.
    • Modules: Contains all theme styles related to Ignite UI for jQuery modules.
    • Styles-guide: Contains the theme style guide (currently under development).
    • framework.less: Contains styles necessary to ensure Ignite UI for jQuery components work correctly with jQuery UI components.
    • variables.less: Theme variables.
    • ignite-ui-variables.less: Ignite UI for jQuery specific theme variables.
    • mixins.less: Contains all mixins related to Ignite UI for jQuery components.

  7. Knockout.js Extensions for Ignite UI

    master

    Several Ignite UI components include built-in support for Knockout.js, allowing for seamless data binding with observables. Supported extensions include:

    • Combo: igCombo with Knockout support.
    • Editors: igEditors with Knockout support.
    • Tree: igTree with Knockout support.
    • Grid: igGrid with Knockout support.
    • Chart: igDataChart with Knockout support.

  8. OLAP Pivot Features in Ignite UI

    master

    Ignite UI provides specialized components for OLAP (Online Analytical Processing) and pivot-based data analysis:

    • igPivotDataSelector: A component used to select and prepare data for pivoting.
    • igPivotGrid: A grid component designed specifically for displaying pivoted data.
    • igPivotView: A view component for interacting with pivoted data sets.

  9. Theme file structure and compilation

    master

    The theme is built using LESS. The root file infragistics.theme.less is the only file that needs to be compiled into CSS. The structure includes:

    • images/: Contains all images related to the theme.
    • infragistics.theme.less: The root file that imports all sub-files.
    • Modules/: Contains theme styles for all Ignite UI for jQuery modules.
    • Styles-guide/: Theme style guide (work in progress).
    • framework.less: Essential styles to ensure Ignite UI for jQuery components work correctly with jQuery UI components.
    • variables.less: Theme variables.
    • mixins.less: Mixins related to all Ignite UI for jQuery components.

  10. Compatibility and Integration with jQuery

    master

    Ignite UI for jQuery is built on top of jQuery and jQuery UI. It follows the standard jQuery core model and conventions, allowing for seamless integration. Specifically, it supports all styling via the jQuery UI Theme Roller.

    Beyond the core jQuery ecosystem, Ignite UI for jQuery provides support for:

    • Bootstrap themes
    • AngularJS
    • Knockout
    • jQuery Mobile

  11. Understand the role of structure CSS files

    master
    Ignite UI for jQuery relies on specific CSS files that define the component structure, including widths, heights, margins, and paddings. These files are mandatory; if they are missing or not loaded correctly, Ignite UI for jQuery controls will not function as intended. Note that these structure files are independent of any visual theme.

  12. Understand the Ignite UI for jQuery theme file structure

    master

    The Ignite UI for jQuery theme is built using LESS. The structure is organized as follows:

    • images: Contains all theme-related images.
    • infragistics.theme.less: The root file that imports all partial files. This is the only file that needs to be compiled to .CSS.
    • Modules: Contains theme styles specific to Ignite UI for jQuery modules.
    • Styles-guide: Contains the theme style guide (in progress).
    • framework.less: Contains styles required to ensure Ignite UI for jQuery components work correctly with jQueryUI components.
    • variables.less: Contains theme variables.
    • mixins.less: Contains mixins related to Ignite UI for jQuery components.