Sep
10

ProtoType LiveGrid now comes with XSLT

Posted in Ajax, LiveGrid by Chris van de Steeg

26


I just finished up the newest release of my RicoLiveGrid fork…
Probably this will be the last version I can build with Rico’s code, since there are to many differences with their version now. (Unless they follow my code, wich I encourage of course!).

So what’s all the difference then….

  • Superb scroll feeling… it looks just real ;)
  • We can still produce any HTML, in stead of fixed table-rows
  • We now have XSLT support!!! I’m really happy with this one. It allows to have
    any xml source as dataset for the grid. Just before it gets placed into the grid for viewing, you can do some xslt magic on it. Just have a look at the source of the yahoo demo to see how it works. This demo will take the literal html of the yahoo-api and gets parsed by our own xslt.
  • Auto-size. the livegrid can automatically do calculations and resizing if the grid is empty on forehand. This way your HTML page doesn’t need to know the exact row-size that will be returned by the
  • In stead of keeping a set of rows in the buffer, we keep the xml-source in the buffer, and any newly loaded source is merged with the first one. For merging that is not-standard, you can specify an xpath to select the rows that should be buffered & used for display.
  • And ofcourse, last but not least, the reason why I started the fork in the first place: the scrollwheel support!

The sources, demo’s etc can be found at:

Enjoy!


26 Responses to “ProtoType LiveGrid now comes with XSLT”

Fjoggen says:

Sep 14, 2005

There seem to be a problem using this in Opera.

Execpt from that thanks for a good tool. I am quite impresed



Fabio says:

Oct 18, 2005

To enable sorting, you should add LiveGridSort (it works taking code from ricoLiveGridSort and deleting the string “Rico.”).



Daniel says:

Oct 20, 2005

There seems to be a problem with Safari (never finishes loading the data). Didn’t happen with the last version.



thompsa6 says:

Nov 14, 2005

I cannot get your onComplete, onLoading, onTimedOut functions to work. I’m trying to work these into the current Rico code (because I already have quite a bit of components up using Rico). Any help would be appreciated. Through my debugging I’ve found that the onComplete() function is being called but the onLoading function is never called???



Leo says:

Dec 16, 2005

Greets. Nice work on the Grid.

I’m running all html, php, css, and js on my site through gzip php outputbuffering to serve it as compressed content. As such, all aforementioned files also are passed to the PHP parser. Usually no problem, until I came across the “



leo says:

Dec 16, 2005

Is there anyone having experience to use livegrid in rails? If so, please give me some hints>
tnaks



Leo says:

Dec 16, 2005

BTW, both ULRs listed above with the grid script will work in IE, as my output buffering skips compression with IE, because of an IE bug that causes it to not cache compressed web pages! However the script will fail on FF because it can accept compressed pages, and therefore compression is turned on. Thought it might be useful to know. 8)



Leo says:

Dec 16, 2005

One must preserve the headers header(“Content-Type: text/xml”). My compression script changed it. Hence your script spitting the dummy. Any chance your script could process valid XHTML?



Hinnack says:

Feb 19, 2006

has someone ever tried to load the from a url, too? vi ja and prototype?
the xsl i sjs notation is everything, but readable…


Hinnack



Hinnack says:

Feb 27, 2006

I have problems with reloading (getting the content again from the server starting at the first row):
myGridUpdater.requestContentRefresh(0);

if the table content changes before reloading and the rows become fewer than the shown rows and afterwards just before a second reload the table content changes again and becomes larger again the content is not shown correctly.

e.g. if we start with 5 shown rows (content is 25 rows in the table), before 1st reload the content changes to 3 lines, it renders correct, but before the 2nd reload the content grows to 10 lines the rendering stays at 3 lines until a 3rd reload attempts (without changing the content before that again)

any ideas?



Hinnack says:

Feb 28, 2006

general problem with changing data in the back while scrolling…
how does one avoid that? a session snapshot of the whole table for each user? or is this concept just for static data useful?



rishid says:

Mar 30, 2006

Does anyone know how to set the header in a cold fusion document? I am trying to use CF instead of a PHP file for my data source.

I have tried:

It returns the exact same results as the PHP file, yet the data won’t load.

Thanks



rishid says:

Mar 30, 2006

Adding the code I am using for my CF page, hopefully it shows up:

#i+1#
So, this is
row #i+1#



Mark says:

Apr 26, 2006

Hi there,
I’m using your livegrid on project and have done some modifications allready, but one little bug still appears.
Maybe you’ll know if allready had to deal with –
The scrolling issue when scrolling by wheel or with scrollbar –
under some conditions livegrid may repeat itself, and it seems from requests that Offset parametr is wrong like 0 0 0 and then 30 30 30 30 many times

Please don’t throw the project away as it’s actually very usefull thing

Thanks



Richard Tallent says:

May 5, 2006

Sweet! Doesn’t seem to honor anything but fixed heights, though, which is a bummer.

Perhaps a simpler solution for this code would be a single scrolled DIV with an internal height set by calculating the approximate height of the entire results. Then, just *position* an internal viewport div, synchronizing its top attribute with scrollTop and using scrollTop to determine which portion of the content to load. Make the total height of the inner div non-linearly increasing with the number of search results to prevent creating a DIV high enough for millions of rows.



dizel says:

May 5, 2006

This livegrid not work in mozila, firefox, safari, opera, just work in ie :(



Alley=>Chris van de steeg says:

May 8, 2006

@Richard Tallent:
It should calculate the rowheight just the way you describe it. The only requirement is that each row is exactly the same height though



Alley=>Chris van de steeg says:

May 8, 2006

@dizel:
the livegrid itself works in firefox, ie & opera (did not test safari, no mac).
Maybe you used some other functions that are IE only.
Checkout the demo’s … they’re cross-browser



Serg says:

May 23, 2006

I have problem with auto row height.
I use the following code to display only 3 visible rows:
myGridUpdater = new LiveGrid (‘mygrid’, 3, 100000, ‘getrows.php’, opts);


getrows.php produce the following xml:
————————————————–

111
222
333
444

————————————————–
When I open it in any browser i’ve got 15(!) visible rows NOT 3. Why?
How to set height manualy or what am I doing wrong ?



Alley=>Chris van de steeg says:

Jun 5, 2006

@Serg: sorry for the late response.
But if you set the height of your grid (the real physical height), it will display too many rows. Don’t set any heights with style attributes, and it will auto-size to 3 rows.



John Farrar says:

Jun 10, 2006

There seems to be issues with XSL in IE7 also.



Kim, Kyeok says:

Oct 16, 2006

Hi~
These days, I’m studying about Rico’s LiveGrid..
then, I found your blog.. I’m so glad..
It’s a little hard that finding sample codes in web site of my country.
Sometimes, I’ll visit your blog. :)

and..

How about my code..?
I made a code of jsp version.. named “getrows.jsp”..

———————————————————————-
“>
” style=”border-bottom: 1px dashed silver”>

So, this is

row

well… Have a good day..
Bye~~



Kim, Kyeok says:

Oct 16, 2006

oops.. ;;

There was a little problem posting..
I posted again..

getrows.jsp

<%        /////////////////////////////////////////////////////////////        // NOTICE. The first line doesn’t have space line.    //         It has to started with “<?xml viersion=….”.        //        // (코드 첫째줄에 공백이 있으면 안된다.)        /////////////////////////////////////////////////////////////        // step1. get Parameter        String  id = null;        int     offset = 0;        int     page_size = 15; //default size = 15;    if(request.getParameter(“id”)!=null)                id = request.getParameter(“id”);        if(request.getParameter(“offset”)!=null)                offset = Integer.parseInt(request.getParameter(“offset”));        if(request.getParameter(“page_size”)!=null)                page_size = Integer.parseInt(request.getParameter(“page_size”));%><% response.setHeader(“Content-Type”, “text/xml”); %><?xml version=”1.0″ encoding=”ISO-8859-1″ ?><ajax-response totalrows=”12129″ rowcount=”<%=page_size%>”><%        int index = 0, i=0;    int start_row = offset + 1;    int end_row = start_row + page_size;    for(i=start_row; i<end_row; i++){%><div rownum=”<%=index++%>” style=”border-bottom: 1px dashed silver”>  <h2 style=”margin: 0px;”><%=i%></h2>  <span>So, this is</span>  <br />  <b>row <%=i%></b>  </div><%        }%></ajax-response>



Alex Botez says:

Oct 20, 2008

If you are looking for an ASP.NET LiveGrid version check out the http://www.sharppieces.com/free-aspnet-controls/LiveGrid.aspx .



Schleevoigt says:

Nov 9, 2008

I try to make an editable grid. Here is my construction site:
http://tools.webmasterei.com/kinogrid/

If the field is editable, I wish to disable scrolling and after saving I want repaint the viewport. Any ideas?

If I set $$(‘.scrollerdiv’)[0].style.overflowY =’hidden’; then the scroll bar disappear but the spot is on top of liste of DIVs.

Rainer



Schleevoigt says:

Nov 9, 2008

I have covert the scroll with a layer. It works fine.
Now I ahve updated the texts in DB and I want to refresh the viewport.

===
new Ajax.Request(‘./lib/updateDB.ajax.php’, {
parameters: params,
onSuccess: function() {
var posi = myGridUpdater.scroller.lastScrollPos;
myGridUpdater.requestContentRefresh(posi);
}
});
===
doesnt work. Any ideas?

Rainer



Leave a Reply