Page 1 of 1
Easy trick table view scroll horizontally?
Posted: 2020-12-06 02:59
by D Oliveira
Hi, is there an easy code snippet to change orientation of scroll in tableview to horizontally? Instead of building record on top of record they would be side by side
Re: Easy trick table view scroll horizontally?
Posted: 2020-12-06 06:50
by onoehring
Re: Easy trick table view scroll horizontally?
Posted: 2020-12-06 19:29
by D Oliveira
I tried implementing this css code in the tableview.html template but it didnt quite work, I think the way appgini builds that page is more elaborate than I thought, thank you for your contribution.
Re: Easy trick table view scroll horizontally?
Posted: 2020-12-07 07:24
by onoehring
Hi,
strange. As the side scrolling in the link above is made only by CSS, it would seem to me, that - if implemented correct (not meant to seem negative) - should also work in AG applications.
Ad AG makes use of bootstrap, you may need to make some CSS options more important maybe? I myself sometimes have problems finding the correct css path which makes a lot of fiddling around needed to get the effect I want. So, maybe more testing needed?
Olaf
Re: Easy trick table view scroll horizontally?
Posted: 2020-12-07 08:34
by pbottcher
Hi David,
you can try this in hooks/tablename-tv.js
Code: Select all
$j('.table-responsive table').each(function() {
var $this = $j(this);
var newrows = [];
$this.find("thead tr, tbody tr").each(function(){
var i = 0;
$j(this).find("td, th").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $j("<tr></tr>"); }
if(i == 1)
newrows[i].append("<th>" + this.innerHTML + "</th>");
else
newrows[i].append("<td>" + this.innerHTML + "</td>");
});
});
$this.find("thead tr, tbody tr").remove();
$j.each(newrows, function(){
$this.append(this);
});
});
Warning. This will remove all Class and attr setting. But you can adjust that to your needs.
Re: Easy trick table view scroll horizontally?
Posted: 2020-12-07 09:51
by jsetzer
Hi D Oliveira,
I'm not quite sure what exactly you mean. Maybe you mean some kind of "tile"-view?
I've been working on something like this for a while now.
- 6WfpHtFOoF.gif (206.91 KiB) Viewed 3397 times
It is pure Javascript using hooks in TABLENAME-tv.js.
The "card"-template can be configured in a very flexible way and I can use placeholdes for all available fieldnames like %first_name% and even %image%:
Code: Select all
// fragment:
// ...
.setTitleTemplate('Patient <b class="pull-right">%PK%</b>')
.setTemplate('<div style="min-height: 160px;"><p class="text-center" style="min-height: 64px"><img src="%image%" clss="img-responsive" /></p><b>%last_name%</b>, %first_name% %middle_names%<p>Age: %age%</p></div>')
// ...
It already supports paging:
- chrome_NFFcFgRsXc.png (66.66 KiB) Viewed 3397 times
If you are interested in such an extension, you can contact me. If it's not what you meant, forget this article.
Re: Easy trick table view scroll horizontally?
Posted: 2020-12-07 19:38
by D Oliveira
Thank you all for your time and for bringing insightful solutions, I tried the above js code in the tablename-tv.js and nothing really happened, I did some changes in the templateTV html file and Im guessing this is generating some conflict for this code to work. No console error though. Jan your solution would work perfectly Im just skeptical because my app is stuck in 5.81 with a lot of custom work, I would not be able to update this app to current Appgini version and add your library without popping hundreds of errors when replacing some core files. This app is very stable and bug free and by reading feeback here in the forum I've seen folks run into all kinds of issues when updating to 5.9+, Im gonna play around with some .css and try to make it work manually, thanks guys!
Re: Easy trick table view scroll horizontally?
Posted: 2020-12-08 15:42
by onoehring
Hi,
let us know how (not if
) you get it to work for you.
Take care
Olaf