Datatable - How to colspan > 1 on certain rows?

[Frank Dietrich-3]

Hi,

I have kind of a scheduling application and a datatable showing the
details of the days in a month (date, checkIN, checkOUT, remark etc.)

Now on certain days like holidays, vacation and thelike, I would like
to have just one single cell spanning most of the row saying "Holiday"
or "Blocked".

I think, I'll need a custom formatter on the first column that detects
those days and sets a custom property accordingly.

Then I would need to hook into the other's cell generation and cancel
their creation.

Can anyone help me jumpstart on this? Surely a snap for Satyam.

Thanks a lot in advance

Kind regards from Berlin

Frank  

[Satyam-3]

I am not sure it would work safely. Most internal workings are made on
the data stored in the Recordset, not in what is shown.  The problem is
that in order to save rendering time, the DataTable tries to reuse the
drawn cells as much as possible.  When you sort on a column, the number
of cells on the table does not change, it doesn't make sense to delete
all the DOM structure built to hold it and start anew.  This process
will get mightily confused when it doesn't find the number of cells it
expects.  But you might try.

You cannot prevent a cell from being drawn.  By the time the formatter
is called, the TD element is there and so is the liner inside it.  
Fortunately, formatting the content of a cell is the last thing done in
the rendering of the row cells so there is nothing happening afterwards
that will miss it if it is gone (this may change in future releases) so,
in the formatter, you could go up from the cell element given in the
first argument of the formatter looking for a TD element and remove that
one from the DOM.  Before refining this process too much, something I
would immediately do is to sort the table.  My feeling is that it will fail.

Then, my next try would be to create a div inside the cell and position
it relative to the top-left corner of the cell and give it the width of
the spanned cells and draw the contents in it.  It will take some
adjusting until you get the size right so it fits well within the
borders of the spanned cells, but it would be the safest.  The overlaid
div, being within the cell though apparently floating over it, would
follow its styling and change colors accordingly.

Actually, this last being safest and not relying in any particular
implementation details which might change at any time would be my first try.

Satyam




dietrich.frank wrote:

> Hi,
>
> I have kind of a scheduling application and a datatable showing the
> details of the days in a month (date, checkIN, checkOUT, remark etc.)
>
> Now on certain days like holidays, vacation and thelike, I would like
> to have just one single cell spanning most of the row saying "Holiday"
> or "Blocked".
>
> I think, I'll need a custom formatter on the first column that detects
> those days and sets a custom property accordingly.
>
> Then I would need to hook into the other's cell generation and cancel
> their creation.
>
> Can anyone help me jumpstart on this? Surely a snap for Satyam.
>
> Thanks a lot in advance
>
> Kind regards from Berlin
>
> Frank  
>
>
>
>
> ------------------------------------
>
> Yahoo! Groups Links
>
>
>
>
> No virus found in this incoming message.
> Checked by AVG - http://www.avg.com 
> Version: 8.0.138 / Virus Database: 270.4.5/1535 - Release Date: 04/07/2008 17:03
>
>
>
>  

[Frank Dietrich-3]

Satyam,

first of all:

as I am quite new to JavaScript and the YUI, and my application, that
I (quite successfull) build is complex, I am reading alot in this
forum and several blogs in order to catch as much knowledge and
information as I can.
Your activity and input here and in other sources is awsome and always
of top notch quality. Thanks a million times for being here!


> You cannot prevent a cell from being drawn.  
> By the time the formatter is called, the TD element
> is there and so is the liner inside it. Fortunately,
> formatting the content of a cell is the last thing done in
> the rendering of the row cells so there is nothing happening
> afterwards

Yes, sure. I just thought, I could set a flag on the first column and
somewhere else hook into an event that then prevents the other cells
from being drawn. Somewhere where the actual <TD> elements are being
created, imagining this would work from left to right.
I might have to look into the datatable's source and try to understand
what actually is going on there.
I was hoping for a beforeRenderCell() that simply could return "false"
under certain circumstances.  

Sorting would be no issue in this scenario. It's simply listing the
days from 1 to 31 (30, 29, 28 resp)with some detail-info and I don't
want the user to reorder that.

I have this working with a "normal" table but as I use the DataTable
in other places of the application, I'd prefer to have the same
appearance throughout the app.



> The problem is that in order to save rendering time, the
> DataTable tries to reuse the drawn cells as much as possible.  

There is a "leaf" for each month with its own table that is built only
once. When the leaf is put aside it gets destroyed within it's table.
Refreshing also is a complete rebuild of the page, as currently the
whole table comes in a CDATA[] - section from the server. being nicely
animated this works wonderful and fast enough


> in the formatter, you could go up from the cell element
> given in the first argument of the formatter looking for a TD
> element and remove that one from the DOM....

and set another to colspan=2... hmm... at least worth a try. I
already tried an elCell.colSpan=2 in order to produce some rubbish,
but the datatable was not impressed at all. You have just done a too
good job on this.

> Then, my next try would be to create a div inside the cell
> and position it relative to the top-left corner of the cell
> and give it the width of the spanned cells and draw the contents
> in it.  It will take some {good time of ;-D} adjusting until you
> get the size right so it fits well within the borders of the
> spanned cells, but it would be the safest.  

Dirty, but yes this could work. the div would then need a higher
z-index, right? ... not really nice though.

Thanks a lot for Your response

Frank

[Lucas Smith]

--- In ydn-javascript@..., "dietrich.frank"
<fdietrich@...> wrote:

>
> Satyam,
>
> first of all:
>
> as I am quite new to JavaScript and the YUI, and my application, that
> I (quite successfull) build is complex, I am reading alot in this
> forum and several blogs in order to catch as much knowledge and
> information as I can.
> Your activity and input here and in other sources is awsome and always
> of top notch quality. Thanks a million times for being here!
>

+1
 

>
> > You cannot prevent a cell from being drawn.  
> > By the time the formatter is called, the TD element
> > is there and so is the liner inside it. Fortunately,
> > formatting the content of a cell is the last thing done in
> > the rendering of the row cells so there is nothing happening
> > afterwards
>
> Yes, sure. I just thought, I could set a flag on the first column and
> somewhere else hook into an event that then prevents the other cells
> from being drawn. Somewhere where the actual <TD> elements are being
> created, imagining this would work from left to right.
> I might have to look into the datatable's source and try to understand
> what actually is going on there.
> I was hoping for a beforeRenderCell() that simply could return "false"
> under certain circumstances.  
>
> Sorting would be no issue in this scenario. It's simply listing the
> days from 1 to 31 (30, 29, 28 resp)with some detail-info and I don't
> want the user to reorder that.
>
> I have this working with a "normal" table but as I use the DataTable
> in other places of the application, I'd prefer to have the same
> appearance throughout the app.

[snip]

Frank,

You might also look for inspiration in this example
http://developer.yahoo.com/yui/examples/datatable/dt_row_coloring.html

and instead modify the DataTable rows in response to a
renderEvent/initEvent.  You can store the records of the special rows,
then render cells assigned with a target class name into the spots
where the important cell will span.  Then in your event subscriber,
access the rows using the stored records, remove the place holder
cells and modify the important cells' colspans accordingly.

No guarantees that other DataTable functionality will work after
messing with its DOM tree, but that's another option, at least.

Incidentally, it sounds like you're rendering a calendar.  If so, why
not use YUI Calendar widget?

Luke

[Frank Dietrich-3]

> You might also look for inspiration in this example
> http://developer.yahoo.com/yui/examples/datatable/dt_row_coloring.html
>
> and instead modify the DataTable rows in response to a
> renderEvent/initEvent.  You can store the records of the special rows,
> then render cells assigned with a target class name into the spots
> where the important cell will span.  Then in your event subscriber,
> access the rows using the stored records, remove the place holder
> cells and modify the important cells' colspans accordingly.
>
> No guarantees that other DataTable functionality will work after
> messing with its DOM tree, but that's another option, at least.

Luke,

THX, I had seen the that example. Yes, I might try something like
create an array during the build-process and keep the records the
special rows come by. Then in the initEvent() simply rip out TD's that
are over and extend the second one.

The table is just for presentation and maybe vertical scrolling.

However, the whole project already takes a lot more time than we get
payed for (we knew it would be a "for glory and honour" - project, but
wanted to do it) and this bears a lot of potential for spending
another few days (or longer nights).

 
> Incidentally, it sounds like you're rendering a calendar.
> If so, why not use YUI Calendar widget?

Yes and no, it's for checkIN/Checkout (Punchclock) and time-keeping
and several balances.

Have a look, and You'll probably understand.

http://ddtech.kicks-ass.net/wwSchedule/YUIGroup.html

Log in with Username "1015" and no password.

the first page "Zeiterfassung" shows the punchclock for instant
checkIN / checkOUT and in the lower part the user can enter other times.

the second tab "Gleitbogen", has the monthly overview and the
balances. Navigation to another month can be done by clicking the
leaves that lurke in from the sides. Details and editing can be done
by clicking on a date.  

In July You'll see that the person is on vacation. Those days don't
show balances and cannot be edited by the user.

It's all in German, but not much text anyway.


Regards

Frank

[jminkler]

Frank,

You might want to rethink the login. Anyone can "remove" the panels
from the DOM and be able to click beyond the "lightbox" login, just a
security reminder there. Of course, it might probably be fine for your
implementation.

Jarret

[Frank Dietrich-3]

 
> You might want to rethink the login. Anyone can "remove" the panels
> from the DOM and be able to click beyond the "lightbox" login, just a
> security reminder there. Of course, it might probably be fine for your
> implementation.

Thanks Jarret,

This is going to be an inhouse-solution running under HTTPS. Also, all
content is user-specific. Each person can only see his times and data.
I could even have a close box on the login dialog. Bypassing the
login-dialog does not bring any vital information at all and any
action of the elements results in a "session-timeout" forcing an
immediate logOFF.

Upon logOFF all Userinformation gets removed (all the pages from the
second tab are completely removed, punchclock gets removed ...). So
bypassing the login would show a more or less empty Tabview.

I think this way all is very safe, but sometimes one overlooks the
obvious and I'm grateful for any hint.



Frank

[Frank Dietrich-3]

Luke, Satyam,

>
> ...You might also look for inspiration in this example
> http://developer.yahoo.com/yui/examples/datatable/dt_row_coloring.html
>
>
> ...No guarantees that other DataTable functionality will work after
> messing with its DOM tree, but that's another option, at least.
>

Meanwhile I've tried it and it works wonderful, even with refreshing
the grid (at least in my scenario where the basic structure = days do
not change).

What I did, was employ the row marking as done in the example
mentioned above. then, in the "UpdateMarks-part", I recall the cached
records, fetch the TR-element and go to the second TD, seth this to
colspan="7" and remove the following six TD's. The table appears as it
should (at least in IE7 and FF. It becomes too wide in IE6 but maybe I
can fix that)

...

    var TR = DT.getTrEl( recCache[recKey] );
 
    if (TR !=null){
        var oData       = recCache[recKey]._oData;
        var lBlockDay   = false;

        ....
        // doing something with the data here,
        // setting classes on TR's and checking
        // if this should be a blocked day
        ....

        if (lBlockDay) {
            // Yes, display this row in blocked mode          
            TR.childNodes[1].colSpan                        = 7;
            TR.childNodes[1].childNodes[0].style.width      = "90%";
            TR.childNodes[1].childNodes[0].style.textAlign  = "center";
            TR.childNodes[1].childNodes[0].innerHTML        = oData.TEXT;

            for (var i=1; i<=6; i++){
              // remove the third col, six times
                TR.removeChild( TR.childNodes[2] );
            }

         }  // lBlockDay
    }  // TR !=null
 
    // done!


There may be better ways, but this works wonderful.

Meanwhile this has become quite a complex table including row coloring
on special rows and cell coloring on certain criteria + conditional
colspanning. If anyone is interested, here is an example.

http://ddtech.kicks-ass.net/wwSchedule/YUIGroup.html

Log in with Username "1015" and no password.

the first page "Zeiterfassung" shows the punchclock for instant
checkIN / checkOUT and in the lower part the user can enter other times.

the second tab "Gleitbogen", has the monthly overview and the
balances. Navigation to another month can be done by clicking the
leaves that lurke in from the sides. Details and editing can be done
by clicking on a date.

In July You'll see that the person is on vacation. Those days don't
show balances and cannot be edited by the user. Going back to May or
forward to September, You'll find highlighted holidays

It's all in German, but not much text anyway.


Frank

[Matthias Nitsch // dunkelbunt.media]

Frank,

I looked at your example and was quite impressed.  I plan to implement an
similar tool in my application i am currently developing. Maybe I come back
to you if I have problems :-)

Matthias  


Am 24.07.08 11:21 schrieb "dietrich.frank" unter <fdietrich@...>:

> Luke, Satyam,
>
>>
>> ...You might also look for inspiration in this example
>> http://developer.yahoo.com/yui/examples/datatable/dt_row_coloring.html
>>
>>
>> ...No guarantees that other DataTable functionality will work after
>> messing with its DOM tree, but that's another option, at least.
>>
>
> Meanwhile I've tried it and it works wonderful, even with refreshing
> the grid (at least in my scenario where the basic structure = days do
> not change).
>
> What I did, was employ the row marking as done in the example
> mentioned above. then, in the "UpdateMarks-part", I recall the cached
> records, fetch the TR-element and go to the second TD, seth this to
> colspan="7" and remove the following six TD's. The table appears as it
> should (at least in IE7 and FF. It becomes too wide in IE6 but maybe I
> can fix that)
>
> ...
>
>     var TR = DT.getTrEl( recCache[recKey] );
>  
>     if (TR !=null){
>         var oData       = recCache[recKey]._oData;
>         var lBlockDay   = false;
>
>         ....
>         // doing something with the data here,
>         // setting classes on TR's and checking
>         // if this should be a blocked day
>         ....
>
>         if (lBlockDay) {
>             // Yes, display this row in blocked mode
>             TR.childNodes[1].colSpan                        = 7;
>             TR.childNodes[1].childNodes[0].style.width      = "90%";
>             TR.childNodes[1].childNodes[0].style.textAlign  = "center";
>             TR.childNodes[1].childNodes[0].innerHTML        = oData.TEXT;
>
>             for (var i=1; i<=6; i++){
> // remove the third col, six times
>                 TR.removeChild( TR.childNodes[2] );
>             }
>
>          }  // lBlockDay
>     }  // TR !=null
>  
>     // done!
>
>
> There may be better ways, but this works wonderful.
>
> Meanwhile this has become quite a complex table including row coloring
> on special rows and cell coloring on certain criteria + conditional
> colspanning. If anyone is interested, here is an example.
>
> http://ddtech.kicks-ass.net/wwSchedule/YUIGroup.html
>
> Log in with Username "1015" and no password.
>
> the first page "Zeiterfassung" shows the punchclock for instant
> checkIN / checkOUT and in the lower part the user can enter other times.
>
> the second tab "Gleitbogen", has the monthly overview and the
> balances. Navigation to another month can be done by clicking the
> leaves that lurke in from the sides. Details and editing can be done
> by clicking on a date.
>
> In July You'll see that the person is on vacation. Those days don't
> show balances and cannot be edited by the user. Going back to May or
> forward to September, You'll find highlighted holidays
>
> It's all in German, but not much text anyway.
>
>
> Frank
>

--
Matthias Nitsch
dunkelbunt.media

p: [phone]
f: [phone] 11472
m: [phone]
 
w: http://dunkelbunt-media.com

/**
 * dunkelbunt-media, Peterssteinweg 1, 04107 Leipzig, Deutschland
 */

[Frank Dietrich-3]

> ...I plan to implement a similar tool in my application
> i am currently developing. Maybe I come back to you if
> I have problems :-)
>


Any time. If You like to contact me directly, get me via
www.dd-tech.de or www.personalplanung.com.

Frank

[Lucas Smith]

--- In ydn-javascript@..., "dietrich.frank"
<fdietrich@...> wrote:

>
> Luke, Satyam,
>
> >
> > ...You might also look for inspiration in this example
> > http://developer.yahoo.com/yui/examples/datatable/dt_row_coloring.html
> >
> >
> > ...No guarantees that other DataTable functionality will work after
> > messing with its DOM tree, but that's another option, at least.
> >
>
> Meanwhile I've tried it and it works wonderful, even with refreshing
> the grid (at least in my scenario where the basic structure = days do
> not change).
>
> What I did, was employ the row marking as done in the example
> mentioned above. then, in the "UpdateMarks-part", I recall the cached
> records, fetch the TR-element and go to the second TD, seth this to
> colspan="7" and remove the following six TD's. The table appears as it
> should (at least in IE7 and FF. It becomes too wide in IE6 but maybe I
> can fix that)
>
> ...
>
>     var TR = DT.getTrEl( recCache[recKey] );
>  
>     if (TR !=null){
>         var oData       = recCache[recKey]._oData;
>         var lBlockDay   = false;
>
>         ....
>         // doing something with the data here,
>         // setting classes on TR's and checking
>         // if this should be a blocked day
>         ....
>
>         if (lBlockDay) {
>             // Yes, display this row in blocked mode          
>             TR.childNodes[1].colSpan                        = 7;
>             TR.childNodes[1].childNodes[0].style.width      = "90%";
>             TR.childNodes[1].childNodes[0].style.textAlign  = "center";
>             TR.childNodes[1].childNodes[0].innerHTML        =

oData.TEXT;

>
>             for (var i=1; i<=6; i++){
>               // remove the third col, six times
>                 TR.removeChild( TR.childNodes[2] );
>             }
>
>          }  // lBlockDay
>     }  // TR !=null
>  
>     // done!
>
>
> There may be better ways, but this works wonderful.
>
> Meanwhile this has become quite a complex table including row coloring
> on special rows and cell coloring on certain criteria + conditional
> colspanning. If anyone is interested, here is an example.
>
> http://ddtech.kicks-ass.net/wwSchedule/YUIGroup.html
>
> Log in with Username "1015" and no password.
>
> the first page "Zeiterfassung" shows the punchclock for instant
> checkIN / checkOUT and in the lower part the user can enter other times.
>
> the second tab "Gleitbogen", has the monthly overview and the
> balances. Navigation to another month can be done by clicking the
> leaves that lurke in from the sides. Details and editing can be done
> by clicking on a date.
>
> In July You'll see that the person is on vacation. Those days don't
> show balances and cannot be edited by the user. Going back to May or
> forward to September, You'll find highlighted holidays
>
> It's all in German, but not much text anyway.
>
>
> Frank
>

Wow, great work!  Thanks for sharing, and glad we could help!

Luke

[Frank Dietrich-3]

>
> Wow, great work!  Thanks for sharing, and glad we could help!
>

My pleasure. Yes, You guys are a great source of help. I thank *You*