Introducing GrapeCity Documents JavaScript Data Viewer

December 15 2022

The GrapeCity Documents for Excel (GcExcel) v6 release introduces the new GrapeCity Documents DataViewer (GcDataViewer), a JavaScript-based client-side viewer that you can use to load and preview data documents such as Excel (XLSX) and CSV files. It aims to provide a unified solution to view any data-related document in one place.

In this blog, we’ll learn, explore, and understand the new GrapeCity Documents DataViewer through the following topics:

Understand the Need
The First Look
Special Highlights
Getting Started with GcDataViewer in ASP.NET Core Application
What’s more…

Ready to Check it Out? Download GcExcel to get the GcDataViewer Today!

Understand the need: How will GcDataViewer help users?

Business these days is mostly about data; tons of data are generated daily by Enterprise systems. These data are stored in different data formats such as Excel (XLSX), CSV, JSON, XML, and many others. Viewing data in these files require particular tools, thus ending up with multiple third-party applications on your machine or searching for disparate sources online. Further, if the data is in a raw form within the system, you are required to write a lot of code to parse and present the data in a readable form.

GcDataViewer can help here by allowing data viewing capabilities that can be seamlessly integrated into existing systems or in new applications.

GrapeCity Documents DataViewer can find its use in any data-driven business or company, such as Sales, E-Commerce, Stock Market, Healthcare, Consultation, etc., looking for a solution to:

integrate a client-side viewer in their existing systems to view data files
to build a web-based data viewer for its customers/users (e.g., SaaS company)

It can be used by developers searching for an option to open data files generated by the server side of their applications and view the data.

Download GcDataViewer | Get the npm package | License Info

The First look: Explore the User-Interface

We are excited to share the first glimpse of the GcDataViewer in the image below:

The user interface of the viewer comprises the following:

Toolbar
Data Display Area
Status Bar

TOOLBAR

A Toolbar lies at the top of the GcDataViewer and consists of viewer options as shown below:

These options (in the order) serve the following purpose:

Open: Use this option to load a data document into the GcDataViewer. This option opens a dialog where you can choose the data file type from among Excel (XLSX), CSV, and SpreadJS (SSJSON) data formats. Further, it provides several options to manage and control your data load. For example:

show filters and keeps groups, show hidden rows/columns/sheets with Excel or SpreadJS files

column/row separators, encoding, etc., with CSV files

View CSV files in JavaScript Data Viewer

Zoom: This option controls the viewing area of the data display area. It allows the user to select a value from a set of preset values, or enter a value manually in the zoom input box, or click the +/- buttons, and also zoom using the mouse wheel, touchpad, or touch screen.

Zoom in on data in the JS viewer control

Toggle View: Click the Toggle View button to switch to a full-screen display of the data display area as illustrated below:

Theme: Cycle through a list of pre-defined themes that change the color and font appearance of the viewer's component as shown below:

These built-in themes are included in the themes folder of the GcDataViewer JS package. Keep the themes folder in the same directory as the gcdataviewer.js script file.

About: Shows the product information in a pop-up at the bottom.

DATA DISPLAY AREA

The Data Display Area is the space in the viewer where the data from your data document appears in a structured layout.

It consists of the following components:

Grid: A 2D layout comprising cells, similar to Microsoft Excel, to present the data in an organized and structured layout from the data files. The data is shown in read-only mode, i.e., it cannot be edited or modified.
Scroll bars: If some rows and columns are beyond the screen view area, use the scroll bars to look for them vertically and horizontally.
Sheet tabs: Separate tabs appear at the bottom of the grid when multiple sheets are in the document. You can switch between the tabs to view the data.
Group outline: If your document has grouped rows/columns and you choose to keep the groups in the Open Dialog, the group outline(s) appear on the left and top sides for the row and column, respectively. You can use it to collapse or expand the grouped records.

Supported Sheet Operations

The grid allows the following operations on the sheet:

Cell Selection: You can select cells using a mouse and copy the selected cells using the Ctrl+C shortcut on the keyboard.
Resize Rows/columns: The grid supports Row and Column Resizing by dragging the grid decorator.
Frozen panes: If the document has frozen rows/columns, the freeze line is displayed in the data area, and you can scroll to see the relevant data on the right/bottom.
Auto-fit rows/columns: Rows and Columns can be Auto-Fit to the content using the respective header or the top-left corner.
Toggle Notes: If a cell in your document has a Note (also called Comments in MS Excel), a small red triangle is displayed on the top-right corner of the cell with the note content.

STATUS BAR

The status bar appears at the bottom of the Data display area. It shows information about the selected area and the aggregate information, such as Average, Count, and Sum, captured within that area.

Check out the GcDocs Data Viewer Demo Samples.

Special Highlights: A look at some key features

You can find the use of GcDataViewer in different applications because of the varied features it provides, including:

Unified solution - It is a unified JavaScript based client-side viewer that can load and preview any data-related document. Currently, it supports Excel (XLSX), CSV, and SpreadJS (SSJSON). Users are not required to look for different/separate tools to view these data files. GcDataViewer allows viewing them all in a single application, eliminating the need to switch to multiple tools to view their content
UI for GcExcel - Customers using GcExcel can have a graphical interface to view the data file generated by its server-side APIs
Cross-platform solution - Being a JS product, GcDataViewer can be integrated easily with .NET 7, Java, or JS Frameworks such as NodeJS, AngularJS, React, Preact, Express, and others. One can view data files on Windows, Mac, Linux, iOS, and Android devices, and it works in all modern browsers, including Edge, Chrome, Firefox, Opera, and Safari
Responsive UI - The user interface of GcDataViewer is responsive for viewing on different devices, screen orientations, and sizes
Light-weight Data Viewer - Less server-side dependency, and simple syntax and semantics make it a suitable choice for lightweight applications
Extensive support for Excel features - The GcDataViewer supports viewing the majority of MS Excel features such as Tables, Pivot Tables, Formulas, Conditional Formatting, DataBar, Icons, Outline Groups, Password-Protected Documents, Frozen Rows/Columns, and many more. However, features that require editing or modification capabilities are restricted (and not supported by design) due to the nature of the viewer, such as Data Validation
CSV options - Configure loading of CSV document using various available settings
Themes - Support for Built-In Themes to meet different UI appearance needs
API integration - Support for public APIs that can be used to integrate and embed the viewer in existing applications
Localize to match your market - GcDataViewer can adapt its display according to the browser language. Currently supported languages are English, Chinese, and Korean

Learn more about GcDataViewer from the documentation.

Getting Started with GcDataViewer in ASP.NET Core Application

Let us look at the steps to configure the GcDataViewer in a new ASP.NET Core Application.

Step 1 - Create a new ASP.NET Core Web App in Microsoft Visual Studio (VS): provide a project name, choose .NET 6 Framework, and uncheck HTTPS.

Step 2 - In Solution Explorer, select the wwwroot/lib folder, open the terminal to run the npm command, and download the gcdataviewer package.

Step 3 - In the terminal, run the command - npm install @grapecity/gcdataviewer. After downloading, you can find the files under the lib/node_modules/@grapecity/gcdataviewer folder:

Alternatively, you can manually copy the gcdataviewer files available in the GcExcel .NET | Java package to the wwwroot/lib folder.

Step 4 - In VS, add a new HTML page to the wwwroot folder and name it index.html:

Step 5 - Paste the following code in the index.html file:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="description" content="Grapecity Data Viewer">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
    <title>Grapecity Data Viewer Sample</title>
    
    <script type="text/javascript" src="lib/node_modules/@grapecity/gcdataviewer/gcdataviewer.js"></script>
    <script>function loadDataViewer(selector) {
            var viewer = new GcDataViewer(selector, {});
        }
    </script>

    <style>
        #root {
            height:100vh;
        }
    </style>
</head>

<body onload="loadDataViewer('#root')">
    <div id="root"></div>
</body>

</html>

Step 6 - Replace the content of the Program.cs with the following code. This will open the index.html by default when the app starts.

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
     app.UseDeveloperExceptionPage();
}

app.UseDefaultFiles();
app.UseStaticFiles();
app.UseRouting();

app.Run();

Step 7 - Build and run the application. A page with the GcDocuments for Excel Data Viewer appears in the browser as shown below:

Step 8 - Click the Open Document button to load your favorite document. The viewer with a document appears as below:

Check out our video tutorial to get started with the new GcDocs Data Viewer.

What's more!

This is just the beginning of revolutionizing data viewing needs for a business. There are many more things planned for GcDataViewer in the future, including support for more data formats, data transform capabilities, making calculations, changing data formats, converting to other data formats, and much more.

Explore the new data viewing experience and share it with us in the comments section below or write to us at us.sales@grapecity.com

Ready to Check it Out? Download GcDataViewer Here Today!