Aspose.Cells.GridJs 24.12.0

.NET Library to View & Edit Spreadsheets

Aspose.Cells.GridJs is a .NET standard library designed for building cross-platform web applications that allow viewing and editing of spreadsheets. With lightweight, scalable, and customizable features, it supports popular formats such as XLS, XLSX, XLSM, and ODS, and offers export options to formats like PDF and HTML. Developers can implement custom cache storage, customize UI elements, handle cell updates, and manage files programmatically to create powerful, interactive spreadsheet solutions without needing Microsoft Excel.

Working with GridJs Server Side

Configure Folder Paths

Set up appropriate folder paths in configuration for workbook and image cache storage to manage spreadsheet data effectively.

Implement GridCacheForStream

Provide custom implementations for caching spreadsheets, such as using local or server-side storage solutions.

Get JSON from Spreadsheet

Convert spreadsheet files to JSON format using GridJsWorkbook, making it easy to work with data programmatically.

Extract Images and Shapes

Retrieve images and shapes from spreadsheets by saving them in a zip file in cache.

Update Spreadsheet File in Cache

Update spreadsheet files directly in cache by using JSON, facilitating real-time modifications.

Save Spreadsheet in Cache

Save updated spreadsheets to cache for later retrieval, ensuring persistent storage for changes.

Working with GridJs Client Side Script

Create Spreadsheet Instance

Use x_spreadsheet to create an instance for managing spreadsheet elements within an HTML container.

Load Spreadsheet with JSON Data

Load spreadsheets using JSON data to initialize worksheet content programmatically.

Set Active Sheet and Cell

Set the active sheet or cell by specifying IDs or coordinates, enhancing navigation control.

Configure Toolbar and Context Menus

Enable or disable toolbars, and show or hide context menus to customize the user interface.

Set Localization

Configure localization settings for menus and toolbars, supporting multiple languages like English, Chinese, Spanish, and more.

Enable Syntax Checking & Spell Correction

Enable syntax checking for user inputs in cells, along with an option for spell correction.

Configure Formula Explanation

Set URLs to provide users with formula explanations when they hover over cells containing formulas.

Handle Images and Shapes

Set URLs for uploading, copying, and retrieving images or shapes in spreadsheets.

File and OLE Object Operations

Set URLs for downloading files and working with OLE objects within the spreadsheet.

Re-Render Spreadsheet View

Trigger re-rendering of the spreadsheet view to reflect any changes made programmatically.

Zoom and File Naming

Set zoom levels and specify filenames to control the document's visual presentation.

Callback Functions for Email

Define callback functions for handling email sending functionality from the spreadsheet interface.

Highlight Features

Enable, add, update, or remove highlights for cell text, ranges, or shapes to improve readability.

Highlighting Features

Enable Cell Highlighting

Enable highlighting and customize highlight styles for cells in the active worksheet.

Update Highlight Styles

Update the highlight styles applied to cells in the active worksheet.

Disable Cell Highlighting

Disable highlighting for cells in the active worksheet.

Highlight Specific Text in Cells

Add, remove, and get arrays of highlighted text in cells within the active worksheet.

Highlight Cell Range

Add, remove, and get arrays for highlighted cell ranges in the active worksheet.

Inverse Cell Highlighting

Set, remove, and retrieve inverse highlighting for cell ranges in the active worksheet.

Highlight Shapes and Objects

Add, remove, and retrieve highlighted shapes, textboxes, and images in the active worksheet.

Clear Highlight Settings

Clear all highlight settings for the active worksheet.

Worksheet Customization Features

Customize Menu Bar

Show or hide the menu bar for enhanced worksheet interactivity.

Set Home Icon and Link

Set a home icon with a hyperlink for easy navigation.

Set Zoom Level

Adjust the worksheet zoom level to suit your viewing preferences.

Customize Background Color for Textboxes

Change the background color of textboxes in the worksheet for better readability.

Set Display Direction

Set the worksheet display direction for RTL or LTR based on language preferences.

Textbox and Image Features

Manage Textbox and Image Highlights

Highlight textboxes and images, and manage their visibility in the active worksheet.

Set Active Effect for Textboxes

Set and manage active effects for textbox objects to improve interactivity.

Hide or Show Text in Textboxes

Toggle the visibility of text content within textboxes.

Cell and Range Features

Manage Selected Cell Range

Get or set the selected cell range for easy data manipulation.

Set Cell Value and Style

Set values and styles for the selected cells or cell ranges.

Merge and Unmerge Cells

Merge or unmerge the selected cell area for organized data presentation.

Delete Selected Cells

Delete the selected cells to adjust the worksheet structure.

Freeze and Layout Features

Set Freeze Panes

Set freeze panes to keep specific rows or columns visible while scrolling.

Insert and Delete Rows or Columns

Insert or delete rows and columns at the selected cell location.

Set Column Width

Set the width for specific columns, multiple columns, or all columns in the worksheet.

Set Row Height

Set the height for specific rows, multiple rows, or all rows.

Image and Shape Features

Manage Image and Shape Selection

Set selectable states for images and shapes, and get the currently selected object.

Set Visibility Filters for Shapes

Set visibility filters for images and shapes in the worksheet.

Cell Value and Style Features

Get or Set Cell Value

Retrieve or set the value of specific cells in the worksheet.

Get Cell Style

Retrieve the style of a specific cell for formatting consistency.

Callback and Event Features

Set Email Send Callback

Set a callback function to send emails directly from the worksheet.

Enable or Disable Window Key Events

Enable or disable window key events for better control of GridJs interactions.

Destroy All Events in GridJs

Destroy all attached events in GridJs to clean up resources.

Supported Import & Export Formats

• Microsoft Excel®: XLS, XLSX, XLSB, XLSM, XLT, XLTX, XLTM, CSV, TSV, TabDelimited, SpreadsheetML
• OpenOffice®: ODS, SXC, FODS
• Text: TXT
• Web: HTML, MHTML
• Apple iWork®: Numbers

Get Started

Are you ready to give Aspose.Cells.GridJs a try? Simply execute Install-Package Aspose.Cells.GridJs from Package Manager Console in Visual Studio to fetch the NuGet package. If you already have Aspose.Cells.GridJs and want to upgrade the version, please execute Update-Package Aspose.Cells.GridJs to get the latest version.

Build a Web App with Aspose.Cells.GridJs

Aspose.Cells.GridJs is a powerful .NET library that enables you to create web applications to view and edit spreadsheets effortlessly. With support for common file formats like XLS, XLSX, XLSM, XLSB, CSV, SpreadsheetML, and ODS, you can also export to formats like PDF and HTML.

Step 1: Implement Custom Cache Logic

Create your custom cache logic by implementing GridCacheForStream. This helps you manage cache storage for spreadsheets effectively.

Step 2: Import Spreadsheet and Convert to JSON

Create a controller action to convert a spreadsheet file into JSON. Use GridJsWorkbook.ImportExcelFile and GridJsWorkbook.ExportToJson to handle file imports and automatically store them in cache.

Step 3: Handle Cell Updates

Set up another controller action for handling cell updates in real time. Use the GridJsWorkbook.UpdateCell API to update cells in cache and get the updated JSON data.

Step 4: Retrieve Images and Shapes

To access images or shapes within the spreadsheet, create a controller action that retrieves their URLs. GridJs will zip all the images/shapes in cache, and you can get their URL with GridCacheForStream.GetFileUrl.

Step 5: Access Files in Cache

Set up a controller action to retrieve files from cache (such as images/shapes or spreadsheet files) using GridCacheForStream.LoadStream.

Step 6: Enable Spreadsheet Download

Finally, create a controller action to download the modified spreadsheet by using GridJsWorkbook.SaveToCacheWithFileName.

Basic Demo

Please visit the basic demo to learn how to use GridJs to implement a spreadsheet Editor.

Customizing Menus and Toolbars in GridJs

1. Keep Only "File" Menu in the Menubar

// Get menubar parent DOM
const menubar = document.querySelector("#gridjs-divid > div > div:nth-child(1) > div > div.x-spreadsheet-banner-info-s > div.x-spreadsheet-toolbar.x-spreadsheet-menubar");
const childs = menubar.childNodes;

// Keep only the "File" menu
for (let i = childs.length - 1; i >= 0; i--) {
  if (childs[i].childNodes[0].childNodes[0].textContent !== "File") {
    menubar.removeChild(childs[i]);
  }
}

2. Keep Only "Download As XLSX" in File Menu

// Get menubar parent DOM
const menubar = document.querySelector("#gridjs-divid > div > div:nth-child(1) > div > div.x-spreadsheet-banner-info-s > div.x-spreadsheet-toolbar.x-spreadsheet-menubar");
const childs = menubar.childNodes;

// Find and filter the "File" menu items
for (let i = childs.length - 1; i >= 0; i--) {
  if (childs[i].childNodes[0].childNodes[0].textContent === "File") {
    const dropdownParent = childs[i].childNodes[0].childNodes[1];
    const menuItems = dropdownParent.childNodes;
    for (let ii = menuItems.length - 1; ii >= 0; ii--) {
      if (menuItems[ii].textContent !== 'Download As XLSX') {
        dropdownParent.removeChild(menuItems[ii]);
      }
    }
  }
}

3. Keep Only "Zoom" Button in the Toolbar

// Get toolbar parent DOM
const toolbar = document.querySelector("#gridjs-divid > div > div.x-spreadsheet-toolbar > div.x-spreadsheet-toolbar-btns");
const childs = toolbar.childNodes;

// Keep only the "Zoom" button
for (let i = childs.length - 1; i >= 0; i--) {
  if (childs[i].getAttribute("data-tooltip") !== "Zoom") {
    toolbar.removeChild(childs[i]);
  }
}

Spreadsheet Editing API | .NET Cloud API | Aspose.Cells.GridJs | REST API | Excel File Management | Spreadsheet Import and Export | Spreadsheet View and Edit | PDF and HTML Export | UI Customization | Toolbar Customization | Menu Customization | Cross-Platform Development | Spreadsheet Cache Management | Real-time Spreadsheet Updates | Spreadsheet Cell Management | Highlight Cells and Shapes | Localization Support | Excel-like Web Interface | Merge and Unmerge Cells | Spreadsheet Zoom Control | Freeze Panes | Insert Delete Rows Columns | Spreadsheet File Conversion | OLE Object Management | Spreadsheet JSON Conversion | Interactive Spreadsheet Web App | Shape and Image Handling | Callback Functions | Spreadsheet File Download | GridJs Spreadsheet API | Syntax Checking and Spell Correction