Easy trick table view scroll horizontally?

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Easy trick table view scroll horizontally?

Post by D Oliveira » 2020-12-06 02:59

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


User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: Easy trick table view scroll horizontally?

Post by D Oliveira » 2020-12-06 19:29

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.

User avatar
onoehring
AppGini Super Hero
AppGini Super Hero
Posts: 1156
Joined: 2019-05-21 22:42
Location: Germany
Contact:

Re: Easy trick table view scroll horizontally?

Post by onoehring » 2020-12-07 07:24

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

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: Easy trick table view scroll horizontally?

Post by pbottcher » 2020-12-07 08:34

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.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Easy trick table view scroll horizontally?

Post by jsetzer » 2020-12-07 09:51

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
6WfpHtFOoF.gif (206.91 KiB) Viewed 2118 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
chrome_NFFcFgRsXc.png (66.66 KiB) Viewed 2118 times

If you are interested in such an extension, you can contact me. If it's not what you meant, forget this article.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

User avatar
D Oliveira
AppGini Super Hero
AppGini Super Hero
Posts: 347
Joined: 2018-03-04 09:30
Location: David

Re: Easy trick table view scroll horizontally?

Post by D Oliveira » 2020-12-07 19:38

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! :D


Post Reply