Latest

A Preview of ZK Spreadsheet Component

Dennis Chen, Engineer, Potix Corporation
December 21, 2007

Introduction

In the previous article, Henri Chen explained the concept of the ZK Spreadsheet Component. Because the UI part was not ready, he proved the concept by integrating ZK Spreadsheet Model with ZK components (Grid and Textbox). In this article I will show you the preview of ZK Spreadsheet Component, which already has UI and is easy to use for user and developer.

Live Demo - A Simple Travel Expense Example

I use the same Excel file from previous article, the Excel file is a simple travel expense calculator, it sums the expenses by formula. In this demo, you can see the looks of Spreadsheet Component, the formula supporting and the interactivity of ZK Spreadsheet Component and other components.

The demo zul file is shown below, the deference between this and previous article is I use the sparedsheet component.
<?xml version="1.0" encoding="UTF-8"?>
<?taglib uri="http://www.zkoss.org/ss/function" prefix="ss" ?>
<zk>
  <window title="Travel Expense Calculator" use="org.zkoss.ss.demo.MainWindow"
    border="normal" style="heigth:300px;width:400px">
    <hbox>
      <label style="font-weight:bold" id="lbpos" value="A1"/>
      <textbox id="tbxval" width="300px" />
    </hbox>
    <spreadsheet id="ss1" url="/WEB-INF/travel.xls" maxrow="20" maxcolumn="20" height="300px" width="390px" />
    <vbox>
      <hbox>Reimbursement (Total * 0.5) : <label id="lb" value="${ss:formula(ss1.book, '=Sheet1!B5 * 0.5')}"/></hbox>
    </vbox>
    <zscript>
      ss1.book.addFormulaListener(new SimpleFormulaListener(lb, "value", "=Sheet1!B5 * 0.5"));
    </zscript>
  </window>
</zk>

How to play?

Down the demo war file and deploy it into your web application server, then open the url(for example http://localhost:8080/zssdemo/index.zul, please modify url to correct value of you) by browser.

In browser, you must click the Spreadsheet UI first, then you could use keys: UP, DOWN, LEFT, RIGHT, PAGEUP, PAGEDOWN, HOME and END to move the cell focus. Of course you could click a cell directly by mouse.

To Edit a cell, you could double click on it or press F2, then it will show a in-line editing textbox.

When editing, you can input a simple text, number, even a formula.(for example: =SUM(B1:B4) )

To end an editing, you can accept the value by ENTER or cancel it by ESC. If you click out side the editing textbox, it will auto accept the editing value and stop the editing.

Download

Down the demo application : zssdemo.war

Summary

In this article you saw the looks and functions of the ZK Spreadsheet Component. It shows the possibility of embedding a spreadsheet into your web application and interactivity with other ZK components. We are keeping developing the ZK Spreadsheet Component, hoping you like this feature. We also need your feedbacks on this component and we can make it fit your needs.

Comments

Jeff Owens

2007-12-21

This is a VERY NICE beginning for this component. I wasn't expecting this much to be implemented yet. Excellent!

I'd like to see repeated keys (I'm only testing with Firefox so far, so maybe it's a limit of FF) when holding down up down left and right.

One small bug - when I enter only an = sign and move away from the cell I get an EmptyStackException.

I'll be running a lot more tests on this, but so far I'm very pleased with the progress. Thanks again for all your hard work. My clients are going to love having an "on-the-fly" integrated spreadsheet!!

weixing.gu

2007-12-21

Very nice!

Swamy

2007-12-21

This looks quite good. However, one feature that is very essential to a spreadsheet component is the ability to drag and fill (like in MS Excel and Google Spreadsheet). No other spreadsheet component online offers that functionality. Of course, Google also offers the ability to draw charts etc, but that is not absolutely required for the first release of the spreadsheet component.

Vimlendu Mishra

2008-03-18

Hi,
I was wondering if zk spreadsheet could save data into a database. If so, how? Can you show me with an example ? Also, how do I show the updated data back into the spreadsheet component ?

Also is there any way wherein I could create views( for eg pivot tables) within the spreadsheet component, save it in the database and then retrieve it back in the spreadsheet, the way I had saved it. Please let me know.

Jorge

2008-09-24

Hi,

This looks very nice and cool !!! , EditGrid an comercial product also use ZUL for rendering ... (see http:\\www.editgrid.com) ...

you approach its very better!!

Leonardo

2008-12-11

Very cool..

soubha

2009-06-24

Hi,
This is really cool and good online excel. I didnt find any other online excel like this with free of cost. But can we integrate this spreadsheet with mysql database. If yes how?

2009-12-21

To get spring beans in ZK spreadsheet,we have to do is to modify configuration files and then, layout the Spreadsheet at proper place. In the near future, we will introduce more useful tools of ZK Spreadsheet. But still i expect your response to make it better.Thanks!!.

2009-12-22

This is really cool and good online excel.

2009-12-24

I have web based application which used sql reporting services to generate web based reports. Myapplication has dynamic column reports. Entire application get displayed in a pop window ,hence there is no proble with sql injection. But while I do import to excel or any other format it opens another browser where I found the Sql injection (my sql clause).This can be achieved if there is any fascility to use form post method. If this is possible then please let me know the configuration or any other solution.

2010-01-29

Greetings Sir

On my OCW chart I want to display an upper limit line goign across the chart that shows the limit of a certain branch’s capacity. A sort of trend line but not really a trendline but a max line….

Thanks

2010-02-03

one feature that is very essential to a spreadsheet component is the ability to drag and fill (like in MS Excel and Google Spreadsheet). No other spreadsheet component online offers that functionality.UnderLine TextBold Text

2010-02-05

I didnt find any other online excel like this with free of cost. But can we integrate this spreadsheet with mysql database. If yes how?

2010-02-06

I didnt find any other online excel like this with free of cost. But can we integrate this spreadsheet with mysql database. If yes how?

2010-03-12

I use the same Excel file from previous article, the Excel file is a simple travel expense calculator, it sums the expenses by formula. In this demo, you can see the looks of Spreadsheet Component, the formula supporting and the interactivity of ZK Spreadsheet Component and other components.


	Post