[Dynapi-Widgetdev] RE: grid widget

SourceForge Headquarters 1320 Columbia Street Suite 310 San Diego, CA 92101 +1 (858) 422-6466

Okay...

Here is my initial framework for the grid code that I was looking for.

<html>
<head>
<title>Grid test</title>
<script language="JavaScript" src="../src/dynapi.js"></script>
<script language="Javascript">
DynAPI.setLibraryPath('../src/lib/');
DynAPI.include('dynapi.api.*');
DynAPI.include('dynapi.util.thread.js');
DynAPI.include('dynapi.util.pathanim.js');
DynAPI.include('dynapi.gui.dynimage.js');
DynAPI.include('dynapi.gui.button.js');
DynAPI.include('dynapi.gui.scrollbar.js');
DynAPI.include('dynapi.gui.viewport.js');
DynAPI.include('dynapi.gui.scrollpane.js');
DynAPI.include('dynapi.gui.label.js');

</script>
<script language="Javascript">
function Grid()
{
  this.DynLayer = DynLayer;
  this.DynLayer();

  this.grid = new DynLayer();
  this.scrollObj = new ScrollPane(this.grid);

  // hack start
  // this.addChild(this.scrollObj);
  DynAPI.document.addChild(this.scrollObj);
  this.scrollObj.myParent = this;
  this.scrollObj.z = 10;
  // hack stop

     var buttonListener = new EventListener(this.scrollObj);
     buttonListener.onmousedown = function(e)
  {
          var o = e.getTarget().myParent;
    if (e.getSource().direction == "Left" || e.getSource().direction
== "Right")
    {
      o.colHeaders["scroll"+e.getSource().direction]();
      o.colHeaders.findDimensions();
    }
    else
    {
      o.rowNumbers["scroll"+e.getSource().direction]();
      o.rowNumbers.findDimensions();
    }
     };
     buttonListener.onmouseup = function(e)
  {
    var o = e.getTarget().myParent;
    if (e.getSource().direction == "Left" || e.getSource().direction
== "Right")
      o.colHeaders.cancelScroll();
    else
      o.rowNumbers.cancelScroll();
     };

     this.scrollObj.rt.addEventListener(buttonListener);
     this.scrollObj.lt.addEventListener(buttonListener);
     this.scrollObj.up.addEventListener(buttonListener);
     this.scrollObj.dn.addEventListener(buttonListener);

  var barListener = new EventListener(this.scrollObj);
  barListener.onscroll = function(e)
  {
    var bar = e.getSource();
    if (!bar.created) return;

    // hack start
    var o = e.getTarget().myParent;
    // hack stop

    if (bar.direction == "h")
      o.colHeaders.setRatioX(o.scrollObj.getRatioX());
    else
      o.rowNumbers.setRatioY(o.scrollObj.getRatioY());
  }
  this.scrollObj.vbar.addEventListener(barListener);
  this.scrollObj.hbar.addEventListener(barListener);

  this.rows = new DynLayer();
  this.rowNumbers = this.addChild(new ViewPort(this.rows));
  this.rowNumbers.setVisible(false);

  this.cols = new DynLayer();
  this.colHeaders = this.addChild(new ViewPort(this.cols));
  this.colHeaders.setVisible(false);

  this.cornerUL = this.addChild(new Button());
  this.cornerUL.setEnabled(false);
  this.cornerUL.setVisible(false);

  this.cornerUR = this.addChild(new Button());
  this.cornerUR.setEnabled(false);
  this.cornerUR.setVisible(false);

  this.cornerLL = this.addChild(new Button());
  this.cornerLL.setEnabled(false);
  this.cornerLL.setVisible(false);

  this.addEventListener(Grid.listener);
}

Grid.SCROLLBAR_SIZE = 30;

Grid.listener = new EventListener();
Grid.listener.onprecreate = function(e)
{
  var o = e.getSource();
  var h = o.getHeight();
  var w = o.getWidth();

  o.grid.setSize(w + 50, h + 50);
  o.grid.setHTML("<h1>a1&nbsp;&nbsp;b1&nbsp;&nbsp;c1<br />a2&nbsp;
&nbsp;b2&nbsp;&nbsp;c2<br />a3<br />a4<br />a5<br />a6<br /></h1>");

  o.scrollObj.moveTo(o.getX() + Grid.SCROLLBAR_SIZE, o.getY() +
Grid.SCROLLBAR_SIZE);
  o.scrollObj.setSize(w - Grid.SCROLLBAR_SIZE, h - Grid.SCROLLBAR_SIZE);

  o.rows.setSize(Grid.SCROLLBAR_SIZE, o.grid.h);
  o.rows.setHTML("<h1>1<br />2<br />3<br />4<br />5<br />6</h1>");

  o.rowNumbers.setSize(Grid.SCROLLBAR_SIZE, o.scrollObj.h -
o.scrollObj.hbar.h);
  o.rowNumbers.moveTo(0, Grid.SCROLLBAR_SIZE);
  o.rowNumbers.setBgColor("silver");

  o.cols.setSize(o.grid.w, Grid.SCROLLBAR_SIZE);
  o.cols.setHTML("<h1>A&nbsp;&nbsp;&nbsp;B&nbsp;&nbsp;&nbsp;C&nbsp;&nbsp;
&nbsp;D&nbsp;&nbsp;&nbsp;E&nbsp;&nbsp;&nbsp;F</h1>");

  o.colHeaders.setSize(o.scrollObj.w - o.scrollObj.vbar.w,
Grid.SCROLLBAR_SIZE);
  o.colHeaders.moveTo(Grid.SCROLLBAR_SIZE, 0);
  o.colHeaders.setBgColor("silver");

  o.cornerUL.setSize(Grid.SCROLLBAR_SIZE, Grid.SCROLLBAR_SIZE);

  o.cornerUR.setSize(o.scrollObj.vbar.w, Grid.SCROLLBAR_SIZE);
  o.cornerUR.moveTo(Grid.SCROLLBAR_SIZE + o.colHeaders.w, 0);

  o.cornerLL.setSize(Grid.SCROLLBAR_SIZE, o.scrollObj.hbar.h);
  o.cornerLL.moveTo(0, Grid.SCROLLBAR_SIZE + o.rowNumbers.h);

  o.rowNumbers.setVisible(true);
  o.colHeaders.setVisible(true);
  o.cornerUL.setVisible(true);
  o.cornerUR.setVisible(true);
  o.cornerLL.setVisible(true);
};

Grid.prototype = new DynLayer;

DynAPI.onLoad = function() {
  gridObj = new Grid();
  gridObj.setSize(200, 200);
  DynAPI.document.addChild(gridObj);
}

</script>
</head>
<body bgcolor="#ffffff">
</body>
</html>

--- AFr...@ba... wrote:
> Hello.
>
> I am looking to either implement or extend an existing widget that by
> and large looks like a spreadsheet.  Features that I am looking for:
>
> - horizonal and vertical scrollbars
> - column headers
> - optional row numbering
> - single and/or multi column selection (by clicking on the col header)
> - single and/or multi row selection (by clicking on the row number)
> - row selection with a checkbox
> - row insertion (which requires renumbering of rows/ids)
> - column insertion
> - column freezing
> - ability to scroll around on the grid with the cursor keys
>
> Optionally I would like to have it have these type of features:
> - column based datatypes (text, number, dropdown)
> - column based [un]locking of cells
> - inline cell editing based on the colum's datatype or the cell's
>   datatype
> - copy insert of a row(s)
>
> I have implemented a DOM based version, more a (poor) proof of concept,
> of this using a table; however, it does not implement all of the
> features that I need.  One of the primary problems is that my version
> does not fix the column headers and the row numbers to the sides of the
> grid.  This makes the grid useful with only a screenful of data.  Since
> I have the potential to have 60 columns and 150 rows, it is very
> unlikely that all of the data will fit on one screen.
>
> Also, since I have more than a screenful of data, it is essential that
> it displays a screenful of data ASAP.  I was able to accomplish this by
> using the setTimeout function in JS.  Talk about a hack... ;)
>
> I found the example on Scott Andrew's site:
> http://www.scottandrew.com/dhtml/demos/dynchart.html
> but this does not help with the scrolling issue.  I am also concerned
> with the number of layers his approach creates.  If I have a 60x150
> grid I am looking at 9000 DIV tags just for the grid.  That does not take
> any of the other layers that may be needed in to account.
>
> Being that I am not by any stretch of the imagination familiar enough
> with the DynAPI and all of the changes that it has been undergoing the
> past several weeks to know where to start on this I would appreciate any
> suggestions.  At this point I have looked at modifying the
> dynapi.gui.ScollPane but I do not know if that is really where I should
> be starting.
>
> I would appreciate any suggestions that anyone can offer.
>
> Thanks,
> Andy