is it possible to simulate dynamic row details for data grid?

s.roetus shared this question 6 years ago
Answered

I have to simulate a complex table like in the following sample of JQuery UI DataTables Plugin example:


http://datatables.net/release-datatab...


The most things I could do with justinmind Prototyper, but what about requirement


to show dynamically extra information for a special table row (when clicking expand icon)?


Thank you very much in advance.

Comments (10)

photo
1

I'm afraid Prototyper doesn't have that option (yet). But it's a frequent requested feature so you will eventually see it implemented in one the next updates.

photo
1

What is meant here with the word "Dynamically"?


I did similar thing "manually".


First I laid out the whole table so that the extra information was visible for each row. Each row (and extra row) here is one separate table and/or group/container that is nested inside a larger container that has vertical layout control applied.


Then I created an interaction "on page load" Change Style/Size; height = is the size of the main row per each row (30). This height was also recorded to a variable per each row.


The for the "Plus" sign I created "on click" interaction; read the variable, if height is 30 then expand the row to 120 and write 120 to variable, or read variable and if it is 120 the contract the row to 30 and write that to variable.


That is pretty slow to do but you can at least demonstrate the interaction successfully.

photo
1

Sure, Markku is right, you can do it 'manually'. But I know one might expect to have some kind of 'elastic' property for the containers. Thanks Markku for your help here.

photo
1

I did not completely understand, how you could do the initially layout. I was not able to add a "extra info container" per row, only per column.


Did you really used one separate table for each row? (In my case I have a pageable grid showing 10 of 83 rows ...)


Could you explain it a little more in detail or attach a simple showcase - vp?


Thank you very much in advance!

photo
1

You are welcome!


Oh, I wish you were able to add this elastic property for the containers fairly soon.

photo
1

The trick I think is to have just one column and lay out all the information inside that column. Then you can insert tables inside that column as well.

photo
1

I'm a bit busy, but would you make me a simple file and I could try to do the magic for it?


Btw. I hope it is not a Data Grid that you want to edit this way?

photo
1

Thank you, Markku, I just found and try an approach which could probably work for me. your advices gave me the right direction!


@Victor Conesa: Thank you, this would be another possible approach

photo
1

I'm glad I was of help to you. Your turn next time to help me :)

photo
1

Good to know. Could you write a few lines of what solution did you find? It can be helpful for other Justinminders.