libre-jqgrid

A modern, open-source fork of jqGrid, designed for seamless integration with modern JavaScript environments and compatibility with jQuery 4.0 and beyond.

Overview

Libre jqGrid is a powerful and flexible jQuery grid plugin for displaying and manipulating tabular data. It's a fork of the popular jqGrid project, but with a focus on:

• Modernization: Adopting modern JavaScript practices and removing legacy code.
• jQuery 4.0 Compatibility: Ensuring compatibility with the latest jQuery version, including addressing any breaking changes.
• Improved Performance: Optimizing the codebase for better performance, especially with large datasets.
• Enhanced Accessibility: Improving accessibility features to make grids more usable for everyone.
• Open Source Commitment: Maintaining a fully open-source and community-driven project.

If you're looking for a robust grid solution that works well with modern JavaScript tooling and the latest jQuery, Libre jqGrid is an excellent choice.

Key Features

• Data Binding: Supports binding to various data sources, including JSON, XML, and local JavaScript arrays.
• Data Manipulation: Provides built-in support for CRUD (Create, Read, Update, Delete) operations.
• Paging and Sorting: Offers client-side and server-side paging and sorting capabilities.
• Filtering and Searching: Includes advanced filtering and searching options.
• Column Management: Allows users to customize column visibility, order, and resizing.
• Inline Editing: Supports inline editing of grid cells.
• Form Editing: Provides form-based editing of grid rows.
• Subgrids: Enables the creation of hierarchical grids with nested data.
• Customizable Appearance: Highly customizable appearance through CSS and themes.
• Accessibility: Improved accessibility features for screen readers and keyboard navigation.
• jQuery 4.0 Compatibility: Specifically designed to work seamlessly with jQuery 4.0, addressing any breaking changes and leveraging new features.

Demo

• https://libre-jqgrid.myridia.com

Installation

You can install Libre jqGrid using npm:

npm install libre-jqgrid

Or, you can download the latest release from the GitHub repository and include the necessary files in your project.

Usage

1. Include jQuery and Libre jqGrid:

   <link rel="stylesheet" href="node_modules/libre-jqgrid/css/ui.jqgrid.css" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/4.0.0/jquery.min.js"></script> <!-- Or your local jQuery 4.0 -->
   <script src="node_modules/libre-jqgrid/js/jquery.jqGrid.min.js"></script>

   Important: Make sure you include jQuery before Libre jqGrid.

2. Create a Grid Container:

   <table id="grid"></table>
   <div id="pager"></div>

3. Initialize the Grid:

   $(document).ready(function () {
     $("#grid").jqGrid({
       url: "your_data_url.json", // Replace with your data URL
       datatype: "json",
       colNames: ["ID", "Name", "Price"],
       colModel: [
         { name: "id", index: "id", width: 60 },
         { name: "name", index: "name", width: 150 },
         { name: "price", index: "price", width: 80, align: "right" },
       ],
       pager: "#pager",
       rowNum: 10,
       rowList: [10, 20, 30],
       sortname: "id",
       sortorder: "asc",
       viewrecords: true,
       gridview: true,
       autoencode: true,
       caption: "My Grid",
     });
   
     $("#grid").jqGrid("navGrid", "#pager", { edit: true, add: true, del: true });
   });

   • url: The URL to fetch the data from.
   • datatype: The data type (e.g., "json", "xml", "local").
   • colNames: An array of column names.
   • colModel: An array of column definitions. Each column definition specifies the column's name, index, width, alignment, and other properties.
   • pager: The ID of the pager element.
   • rowNum: The number of rows to display per page.
   • rowList: An array of options for the number of rows per page.
   • sortname: The column to sort by initially.
   • sortorder: The sort order ("asc" or "desc").
   • viewrecords: Whether to display the total number of records.
   • gridview: Enables faster rendering of the grid.
   • autoencode: Automatically encodes data to prevent XSS attacks.
   • caption: The grid's caption.
   • navGrid: Adds navigation buttons (edit, add, delete) to the pager.

jQuery 4.0 Compatibility Notes

Libre jqGrid has been specifically tested and adapted to work with jQuery 4.0. This includes:

• Addressing Breaking Changes: Identifying and resolving any breaking changes introduced in jQuery 4.0 that affect jqGrid's functionality.
• Leveraging New Features: Taking advantage of any new features or performance improvements in jQuery 4.0 to enhance Libre jqGrid.
• Ongoing Testing: Continuously testing Libre jqGrid with the latest jQuery 4.0 releases to ensure compatibility.

If you encounter any compatibility issues with jQuery 4.0, please report them as an issue on the GitHub repository.

Documentation

• Original jqGrid Documentation: Much of the original jqGrid documentation is still relevant to Libre jqGrid. You can find it online by searching for "jqGrid documentation." However, be aware that some features might have been modified or removed in Libre jqGrid.
• Libre jqGrid Specific Documentation: We are working on creating comprehensive documentation specifically for Libre jqGrid. Check the GitHub repository for updates.
• Examples: The GitHub repository contains examples of how to use Libre jqGrid with different data sources and configurations.

Contributing

We welcome contributions to Libre jqGrid! If you'd like to contribute, please:

1. Fork the repository.
2. Create a new branch for your changes.
3. Make your changes and commit them with clear, concise commit messages.
4. Submit a pull request.

License

Libre jqGrid is licensed under the MIT License.

Credits

Libre jqGrid is a fork of the original jqGrid project. We would like to thank the original jqGrid developers for their work.

Support

If you have any questions or need help with Libre jqGrid, please:

• Open an issue on the GitHub repository.
• Ask a question on Stack Overflow with the tag libre-jqgrid.

We appreciate your support!

**Key Improvements and Explanations:**

*   **Clear Overview:**  Starts with a concise description of what Libre jqGrid is and its goals.
*   **Modernization Focus:**  Highlights the focus on modern JavaScript practices and jQuery 4.0 compatibility.
*   **Key Features Expanded:**  Provides a more detailed list of features.
*   **Installation Instructions:**  Includes clear installation instructions using npm.
*   **Usage Example:**  Provides a basic usage example with explanations of the key options.
*   **jQuery 4.0 Compatibility Section:**  Dedicated section emphasizing the jQuery 4.0 compatibility efforts.  This is crucial given your prompt.
*   **Documentation Notes:**  Explains the current state of documentation (relying on original jqGrid docs but with a promise of Libre jqGrid-specific docs).
*   **Contributing Guidelines:**  Provides clear guidelines for contributing to the project.
*   **License Information:**  Specifies the license (MIT).
*   **Credits:**  Acknowledges the original jqGrid project.
*   **Support Information:**  Provides ways to get help.
*   **Badges:** Adds badges for license, npm version, and GitHub stars to make the README more visually appealing and informative.

**Important Considerations:**

*   **Replace Placeholders:**  Remember to replace the placeholder URLs (e.g., `your_data_url.json`) with your actual data URLs.
*   **Update Documentation Link:**  As you create Libre jqGrid-specific documentation, update the "Documentation" section with the correct links.
*   **Verify jQuery 4.0 Compatibility:**  Thoroughly test Libre jqGrid with jQuery 4.0 and document any specific compatibility notes or workarounds.
*   **Keep it Up-to-Date:**  As the project evolves, keep the README up-to-date with the latest information.








* Compatible with  jQuery 4.0 

Hard Fork from 
* https://github.com/rany2/jqGrid 
* https://github.com/free-jqgrid/jqGrid
* https://github.com/tonytomov/jqGrid 


## Install 

npm install libre-jqgrid

## Include to your browser with:

Developer to build the dist:

npm install
grunt default