Tables are powerful tools for displaying data, but they can become unwieldy when scrolling through large datasets. Enter GridViewScroll, a versatile JavaScript library that allows you to freeze columns and headers, making it easier to view your data. In this guide, we’ll walk you through getting started with GridViewScroll step by step. Let’s dive in!

Features

• Default scrollbar of the browser
• Freeze Header, Column, and Footer (only last row)

Getting Started

Follow these steps to implement GridViewScroll in your project:

1. Download the latest release from GitHub.
2. Include the gridviewscroll.js in your webpage:

<script type="text/javascript" src="js/gridviewscroll.js"></script>

3. Initialize the table with options and then call enhance:

<script type="text/javascript">
    window.onload = function () {
        var gridViewScroll = new GridViewScroll({
            elementID: "gvMain" // Target element id
        });
        gridViewScroll.enhance();
    };
</script>

Options

You can customize various options when initializing GridViewScroll:

<script type="text/javascript">
var gridViewScroll = new GridViewScroll({
    elementID: "gvMain", // String
    width: 700, // Integer or String (Percentage)
    height: 350, // Integer or String (Percentage)
    freezeColumn: false, // Boolean
    freezeFooter: false, // Boolean
    freezeColumnCssClass: "", // String
    freezeFooterCssClass: "", // String
    freezeHeaderRowCount: 1, // Integer
    freezeColumnCount: 1, // Integer
    onscroll: function (scrollTop, scrollLeft) {
        // onscroll event callback
    }
});
</script>

Understanding the Code: An Analogy

Think of your table as a busy restaurant. The tables (or rows) are where diners (or data) are seated, and when the restaurant gets crowded, it becomes challenging to see your favorite table (or data). Here, GridViewScroll acts as a head waiter who has the special ability to keep certain tables (columns and headers) visible while you scroll down to see the other diners. Just like the head waiter allows you to enjoy your meal while keeping an eye on your favorite table, GridViewScroll lets you view important information while navigating through large tables.

Properties

Some properties you may want to set include:

<script type="text/javascript">
var gridViewScroll = new GridViewScroll({
    elementID: "gvMain"
});
gridViewScroll.enhance();

var scrollPosition = gridViewScroll.scrollPosition; // Get scroll position
var scrollTop = scrollPosition.scrollTop; // Get vertical scroll position
var scrollLeft = scrollPosition.scrollLeft; // Get horizontal scroll position

scrollPosition = {
    scrollTop: 50,
    scrollLeft: 50
};
gridViewScroll.scrollPosition = scrollPosition; // Set scroll position
</script>

Methods

Here are some helper methods:

<script type="text/javascript">
var gridViewScroll = new GridViewScroll({
    elementID: "gvMain"
});
gridViewScroll.enhance(); // Apply the GridViewScroll features
gridViewScroll.undo(); // Undo the DOM changes and remove GridViewScroll features
</script>

Events

If you want to listen to scrolling events:

<script type="text/javascript">
var gridViewScroll = new GridViewScroll({
    elementID: "gvMain",
    onscroll: function (scrollTop, scrollLeft) {
        console.log("scrollTop: " + scrollTop + ", scrollLeft: " + scrollLeft);
    }
});
gridViewScroll.enhance();
</script>

Supported Browsers

GridViewScroll works efficiently on:

• Internet Explorer 9+
• Google Chrome (61.0.3163.100)
• Mozilla Firefox (56.0.2)

Troubleshooting

If you run into any challenges while using GridViewScroll, here are some troubleshooting ideas:

• Ensure that your browser version is compatible, as mentioned above.
• Check the console for any JavaScript errors.
• Make sure you are correctly using the correct element ID in the script.
• If the header or columns are not freezing as expected, verify your freeze options during initialization.
• For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Technical Support

If you have any questions about GridViewScroll, feel free to file an issue on GitHub. Alternatively, you can send an email to twlikol@msn.com for assistance.