Web Data Grid Freeze Function via Layered DIV Overlay
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Conventional HTML and scripting techniques for web-based tables provide limited functionality, preventing users from accessing features commonly available in spreadsheet and database applications, such as freeze functionality for data grids.
Innovation Solution
The method involves rendering a first table and a second table with a frozen section overlaid on the first, using JavaScript and HTML DIV tags to maintain a static column or row during horizontal or vertical scrolling, allowing users to select and reposition the frozen section dynamically.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Adaptability or versatility
If conventional HTML and scripting techniques are used for web-based tables, then the implementation is simple and compatible, but the functionality is limited and lacks freeze capabilities
Solution Approach 1:
The patent divides the data grid into multiple sections using HTML DIV tags with different z-index values. A frozen section is separated from the scrollable section, allowing independent control of each portion. This segmentation enables the frozen section to remain stationary while the scrollable section moves, providing freeze functionality without requiring a complete redesign of the table structure.
Solution Approach 2:
The patent introduces a new dimension of control by using CSS z-index properties to create layered display sections. By assigning different z-index values to the frozen section and scrollable section, the patent enables vertical stacking of table portions, allowing the frozen section to appear above or below the scrollable area. This dimensional approach adds freeze capability while maintaining HTML compatibility.
2Ease of operation
If freeze functionality is added to web-based tables, then users can view data more effectively with fixed portions, but the implementation complexity increases
Solution Approach 1:
The patent creates a universal frozen section implementation that works across different web browsers and devices using standard HTML, CSS, and JavaScript. The same DIV tag structure and z-index approach can be applied to any data grid regardless of size or content type. This universal method provides ease of operation for viewing data while avoiding the need for browser-specific or platform-specific implementations.
Solution Approach 2:
The patent creates a visual copy of the frozen section that replicates the appearance and structure of the original table portion. This copied section is then positioned using CSS absolute positioning and z-index to appear as a separate layer. The copying approach allows the frozen section to maintain identical styling and layout as the original table, providing familiar viewing experience while enabling the freeze effect through a separate DOM element.
3Adaptability or versatility
If multiple display sections with different z-index values are used, then freeze functionality is achieved, but the DOM structure becomes more complex
Solution Approach 1:
The patent nests the frozen section DIV and scrollable section DIV within a parent container DIV, creating a hierarchical DOM structure. The parent container holds both sections, with the frozen section having a higher z-index to appear above the scrollable section. This nesting approach organizes the complex DOM structure in a manageable hierarchy, where the parent container coordinates the behavior of both nested sections while maintaining clear parent-child relationships in the DOM tree.
Data Source
AI summary
A system and method for facilitating displaying data in a table via a web-based data grid. The example method includes rendering a first table and then rendering a second table via a layer overlaid on the first table. The second table replicates a user selected portion of the first table. In a specific embodiment, the example method further includes providing a first user option to horizontally scroll the first table. One or more columns of the second table remain static in response to horizontal scrolling of the first table. A second user option enables vertical scrolling of the first table. Vertical scrolling of the first table causes concurrent vertical scrolling of the second table. A third user option enables repositioning of the second table relative to the first table. The first table and overlaid second table, called the frozen section, may be implemented via client-side scripting.