The Zapatec AJAX Grid Demos
Stock Performance
This is a basic example showing a grid with performance data of the stock of various companies.
Phone Bill
This phone bill example shows more advanced capabilities of the Zapatec AJAX Grid, including paging and limiting the data displayed. It also uses the Zapatec Slider to define range filters.
Phone Bill - Server On Demand - JSON
This phone bill example shows how to extract server side data on demand in JSON format. One page of the phone bill is extracted from the server at a time. This server on demand scenario optimizes data transfer from server to client. Without the server on demand the FULL set of grid data (every page) is extracted from the server. This server on demand should be used if you have a large data set.
Phone Bill - Server On Demand - XML
Same as JSON example except grid data from server is in XML format.
Phone Bill with Hidden Column
This phone bill example demonstrates the ability to hide a column and still search and filter based on the values of the hidden column.
Load Grid from Url
This example uses the Zapatec AJAX Transport to fetch the grid data after the page is displayed. The grid data can be defined as an HTML table, JSON, or XML, making it easy to generate using any server-side technology.
Editable Grid With Auto Cell Saving
Control the auto save environment when you edit the cells of the grid.
Yahoo! Search
Fetch the data from an external source, in this case a Yahoo! search, and pass the data to the grid.
Yahoo On Demand
This example demonstrates use of dataOnDemand feature together with cross-domain JavaScript calls. It fetches data from a cross-domain source, in this case a Yahoo! search, and passes it to the grid.
Show Data AS IS
Show data in the grid AS IS. You can preserve your original data format and still use the powerful Zapatec grid features. This is useful for migrating legacy tables to the feature-rich Zapatec Grid.
This demo also illustrates exporting a grid into CSV format (or any other format). This feature allows users to import any Zapatec Grid into their own programs, for example into spreadsheets.
Splice
The grid splice method lets you add, modify, and delete grid data. You can specify exactly where you want the grid data changed. Use the splice and flatfile features to tune and export grid data.
Custom Grid
This demo extends the Zapatec Grid object to apply customized rules for parsing data. This is especially useful for converting data to a single metric for sorting.
Query Updates: generic
This example demonstrates how to use a generic grid query method to insert, replace, and delete grid cells.
Query Updates: specific
This example is similar to the previous one, but it demonstrates how to use specific insert, update and delete grid query methods to insert, replace, and delete grid cells.
Scrolling Grid
A Zapatec Grid can scroll vertically and horizontally. This is similar to the Window Freeze Panes option in many spreadsheet applications.
Scrolling Grid with Sliders
This example shows an alternative grid display method in which the scroll bars are simulated with Zapatec Slider.
Selectable Multiple Rows
This phone bill example demonstrates the ability to select multiple rows in the grid using "Shift" or "Ctrl" click.
Select Multiple Cells
This phone bill example demonstrates the ability to select multiple cells in the grid using "Shift" or "Ctrl" click.
Phone Bill with Pagination Slider
This phone bill example demonstrates a Zapatec Slider to control the pagination of the grid display.
Custom Style Of a Cell/Row/Column
Using CSS rules, you can set your own style for any cell, row or column in the grid.
Data Prepared Without Pagination
Demo on how to speed up loading of extremly large grids without pagination.
Dynamic Grid Height/Width Adjustment - WINDOW
Grid will automatically resize relative to the container it is in.
Dynamic Grid Height/Width Adjustment - PANE
Dynamically adjust the width and height of grid based on the pane size. The number of rows per page in the grid is adjusted automatically depending on the pane size. Width of the grid is adjusted automatically to fit into the pane.
Multiple Row Selection With Checkboxes
Use checkboxes to select multiple rows in the grid and send the results to the server.
Multiple Column Sort
Sort the grid based on sorting criteria. You can sort based on multiple columns. Each column to sort can be ascending or descending.
Tooltips
Tooltips will show you the full row in a vertical format. Helpful when the content of a cell exceeds the cell width. Just mouseover any row in the grid to see this tooltip.
Multiple Row Selection With Radios
Radio buttons are used to transmit the selected rows to the server.
Multiple Row Selection With Checkboxes - JSON
Multiple Row Selection With Checkboxes in JSON format.
