Table Pagination.. and hidden columns

I've just discovered this stunning set of tools and I'm more than impressed.

I've been trying to get some more mature display technologies in place where I am for a little while now. Our data display paradigm is an XML data islands approach with paginated tables providing a view over the data.

There are three things I need to understand before I can start showing proof of concepts of this technology:

1) Table Pagination - this is really the lifeblood of the application I develop/maintain/support. On occasion, users have the need to pull back data sets that might span a couple of "pages". That's no problem with the MSXML data islands technology, we just hook into the javascript controls. I haven't yet seen pagination hooks with the AW Grid component. Are there any? Are there any plans for any?

2) Hidden Columns - Usually, the table is displayed to allow the user to make a choice and take the selected item off to a further page to work on it. This is done through a value stored in the first cell of each row. That column is hidden. For a direct translation, I'd be looking to mimic that behaviour using the AW Grid (although to be honest, I think there are other ways to achieve the same aim). Can we hide columns? If so, how does this affect column numbering?

3)ID Values - Related to point 2. Can rows have arbitrary values associated with them (that are not contained in the visible cells)? If so, how is this currently handled when using XML data islands?

I'm still ploughing on through the documentation so I might end up answering my own questions but if anyone out there already knows I'd appreciate the heads-up.

Many thanks.

And again, nice work on these components.

Okay, I've just found the paging example. Cool. I know page-fu.

From looking at the paging example, it looks as though the current implementation is not set up to work with xml, only javascript arrays.

Obviously, I can see a key line with regards to displaying the data:

obj.setProperty("data/text", function(i, j){return myData[i][j]});

As we are passing a function in the contents of that function are free for us to define.

I'm just now trying to load in the xml as a distinct data island and then use a function to access the row/column values.

The xml has 500 records. This seems to cane the grid's performance; IE just hangs for a while.


My file is the same as the pagin1 example but with the following changes:

//removed the data array to use a data island called xmlSource

var myColumns = ["D00", "D01", "D02", "D03", "D04"];
//var numRecords = xmlSource.documentElement.childNodes.length
var rows = xmlSource.documentElement.childNodes;

function getNumRows(){
return xmlSource.documentElement.childNodes.length;
}

function getData(rowIndex,columnIndex){
var record = rows.item(rowIndex).childNodes;
return record.item(columnIndex).firstChild.nodeValue;
}


// create the grid object
var obj = new Active.Controls.Grid;

// replace the built-in row model with the new one (defined in the patch)
obj.setModel("row", new Active.Rows.Page);

obj.setProperty("row/count", getNumRows());
obj.setProperty("column/count", 5);
obj.setProperty("data/text", getData);//function(i, j){return getData(i,j)}
obj.setProperty("column/texts", myColumns);

// set page size
obj.setProperty("row/pageSize", 30);

// make grid multi select
obj.setSelectionProperty("multiple", true);

// write grid html to the page
document.write(obj);


I'm running from within the patches folder so I should have access to all the same resources as the original file.

The performance problem seemed to be a result of my repeated tests along the way to getting it right.

My solution works fine. I can load up an xml file and display it in the paginated table.

For my own specific needs, I need to exclude some fields from the display. I haven't seen anything about this so far so I'm still open to suggestion.

I had a hard time figuring this out when I first implemented these controls in my app. Here is how I have implemented "hidden" columns (used for ID fields in my web-apps):

<!-- grid format -->
<style>
  .active-column-0 {display: none!important;} 
  .active-column-1 {display: none!important;} 
  .active-column-2 {width:85px;} 
  .active-column-3 {width:100px;} 
  .active-column-4 {width:100px;} 
</style>

You can place that code anywhere on the page, and the grid control will be affected by it. In this example, I have 2 hidden columns, indeces 0 and 1. The other styles are used to size the other columns to the desired width. I used those for CompanyID and ContactID in a CRM application.

My life is complete... almost. And the answer was staring me in the face!

In my own hand-rolled table control I was of course using display:none to hide columns, rows and table bodies. I think in this case I was simply trying to look into the API and find the "hide this column flag". If only I'd looked at the style block I already had in the page...

Anyway, thanks for the tip. Given that I can now page through an xml data island, hide the "ID" column(s) and preserve some multi-select functionality I have the tools I need to improve the presentation (and speed I think) of the app I work on.

One last thing, in our current setup, users select multiple rows by checking a checkbox in the first column. I'd like to be able to retain that functionality so as to better sell the transition.

Any hints or tips on that last one?

Can someone direct me to this paging example?

Anyone?