Urgent Help Needed - Drill-Down Data

rovers_boy

Hello Everyone, Hope this post finds you all in best of spirits!

We are trying to implement Drill-Down data widget into a Datatable and have come across this example: http://datatables.net/blog/Drill-down_rows . Our design is slightly different in a sense that as user expands one row, the data is displayed horizontally ( as opposed to how it is displayed in the above link).

If we implement this widget, the alignment is all messed up and data is not aligned with column headers. Please help me in achieving this result using datatable and drill down widget. Any help will be greatly appreciated! Thanks!!

For example: we have a datatable with two columns (Name, Amount):

Default Collapsed View

------------------------------------------------
Name Amount
------------------------------------------------

+ Company A $ 1000.00

-------------------------------------------------

Expanded View

------------------------------------------------
Name Amount
------------------------------------------------

- Company A $ 1000.00

Expense $ 2000.00

Profit $ 3000.00

-------------------------------------------------

GregP

It's all just CSS, rovers_boy. For the "expense" and "profit" lines, wrap them up in an element (like a span) and give them a class, and then style that class to indent them.

Doesn't have to be a span. Whereever you are rendering the drill-down view, have it create anything that makes sense. For example:

[code]


Expense$2000
Profit$3000


[/code]

then in CSS

[code]
.drillDown { /* whatever styles you need to get rid of borders and junk */ }
.col1 {width: 100px}
.col2 {width: 120px}
[/code]

It's kind of a mediocre example since I'm just winging it on the spot, but hopefully you get the idea. Just create markup that makes sense, and then style it in a way that makes sense.

rovers_boy

Hi GregP,

Thank you very much for the feedback. I tried that approach before posting it on the forum, but am experiencing alignment issues if I assign any specific width to a cell or column. Not sure where am going wrong! :(

This is what I expect table to do. Assume that Datatable has two columns and 3 rows. Also assume that all 3 rows are identical as far as width, style and css properties are concerned. I want second and third rows to display only when user expands first row.

I was hoping it'll be a straightforward approach, but doesn't look like that.

Can you help us in providing a link to example?

Thanks!

Rovers_Boy

PS: Unfortunately, I cannot share the code because it is in violation of code of conduct rules here at client side :(

GregP

Without seeing a live example, who can say? Following the example, there is indeed a TR being added, so if the number of TDs matches up, the contents will align.

Based on the ASCII art, it's hard to say, but is the "+" part of the cell content or no? It seems to me that only two things can be messing with your alignment:

1. The "+" is part of a cell, and is making that first "control" line ("+ Company A $ 1000.00") align differently than the subsequent expanded details view.

2. The CSS is different for the row. It's not getting the same classes as the row above, and so it's simply and literally styled differently. This is a matter of inspecting your CSS and seeing why there are differences. I couldn't even hazard a guess.

rovers_boy

Thanks again for the feedback, GregP. Can you please take a look at this link:

http://live.datatables.net/overox/24/edit

You'll notice how values are mis-aligned once you expand a row. Can you please take a look at it and let me where am going wrong?

Thanks a lot, GregP! Appreciate your timely help!!

GregP

To begin with, there is padding around the entire nested table, taken from the way the CSS applies styles to tables in general. You will need to override this by adding this rule to your CSS file:

[code]
/* this affects all the collapseRows... er... still seeing if there's a better selector! */
table.display tbody tr > td.collapseRow { padding: 0 }
[/code]

(note: I'm kinda poking around still... it's a bit tricky to make sure the styles are all the same)

Next, you have explicitly set widths for all your columns in the parent table. Since this expanded portion is a whole new table, it will not inherit those widths. You will need to set them manually again. I would consider doing this with classes (or otherwise using CSS) instead of the width attribute which will always need maintaining in two places.

Finally, you have some cells set to text-align: right (or whatnot) and this new nested table is using align-left as the default.

GregP

I have to give up for now-- it's too time-consuming to tweak!

The bottom line is that it's only CSS. Here's where I was at when I decided to throw in the towel:

http://live.datatables.net/overox/27/edit#preview

Somewhere along the way I fixed the +/- and now they're again not working... not sure why.

When you start managing column widths, you're in for a world of hurt. CSS will always let you do what you want until the content dictates otherwise. And then it fills in the gaps to make sure the table gets filled out. Consequently, the columns in the parent table end up not actually being the widths specified. And since the content for the details tables are different, too, those end up different than specified.

Once you can figure out how to manage the widths in a consistent way, you'll be set. I don't remember offhand all the properties you'll need to set...

A place like StackOverflow with the CSS tag might be more useful than the dataTables forum-- after all, it's CSS you need to worry about, not the dataTables API.

rovers_boy

Thanks, GregP! I will focus on CSS aspect of it then. Appreciate your help.