Switch from left to right to top down

JustMe

Member

Posted 09 March 2013 - 22:56 PM

I have a data driven application.

I have like 30 columns per record.

So when viewing the table, the user has to scroll left to right to see the values.

Is there a way to display it top down?

Thanks

Brian

davidoster

Member

Posted 10 March 2013 - 09:17 AM

Hmmm! Interesting! We need to investigate this.

Probably via css you might have some luck and be able to change the layout completely but what you are looking for is actually a new theme.

Both flexigrid and datatables have ways to change the theme, hence the display of the contents.

You need to play around with the javascript options of these two themes in order to get this effect.

Good luck.

likhon3k

Member

Posted 10 March 2013 - 10:42 AM

I have a data driven application.

I have like 30 columns per record.

So when viewing the table, the user has to scroll left to right to see the values.

Is there a way to display it top down?

Thanks

Brian

you can do one thing, you can unset 20-22 column and show 8 column per record and use extra 'view' links which show you all 30 column in very page or every record.

---

in your question, that is not possible in my sense, because of if you scrol top to bottom for a record, then when your record will be larger than screen size then you have to scroll left to right and top to bottom both.

JustMe

Member

Posted 10 March 2013 - 15:20 PM

Thanks gentlemen. Let me look at these two options and report back.

Brian

JustMe

Member

Posted 10 March 2013 - 15:59 PM

This seems to solve my immediate need. It does not display as pretty as I would like but it will work.

I looked at these links.

http://datatables.net/forums/discussion/2954/table-transpose/p1

http://datatables.net/examples/basic_init/scroll_x.html

I added in three lines to the file grocery_crud/themes/datatables/js/datatables.js

oTable = $('#groceryCrudTable').dataTable({

"sScrollX": "100%", <= new

"sScrollXInner": "110%", <= new

"bScrollCollapse": true, <= new

"bJQueryUI": true,

"sPaginationType": "full_numbers",

"bStateSave": use_storage,

"fnStateSave": function (oSettings, oData) {

localStorage.setItem( 'DataTables_' + unique_hash, JSON.stringify(oData) );