EPG/TV-Guide with ion-grid

Ionic Framework ionic-v3
1

Hi all, I’m new to ionic (just started with it ~10 days ago so please bear with me). I’m creating a TVGuide/EPG application as part of a larger software suite; for the last week or so I’ve been really stuck on how to display the data in a typical TV-Guide/EPG format ala:

example_format
example_format.png713×342 316 KB

I decided to use the ion-grid and have each column represent a single minute; this with some example data gave me the following:

my_app
my_app.png1344×638 107 KB

The basic grid layout I am using is as follows:


<ion-grid>
    <ion-row>
        <ion-col col-60>
            <p> {{ date }} </p>
        </ion-col>
        <ion-col col-60>
            <p>{{ time }}</p>
        </ion-col>
    </ion-row>
    <ion-row>
        <ion-col col-60>
             <p>{{ Channel Name }}</p>
        <ion-col col-*> <!-- * = minutes the program runs-->
            <p>{{ Programme Title }}</p>
        </ion-col>
    </ion-row>

I’m injecting the html with:

<ion-content [innerHTML]="sanitizer.bypassSecurityTrustHtml(gridPage1)"></ion-content>

I’m unsure of how to go about this next part however:

I’d like the user to be able to scroll horizontally through the listings so they can see upcoming events, but loading everything into the grid seriously slows the page down and sporadically crashes(enough that it was easier to load dummy data than actual program data).

It’s not an issue of processing the data taking a long time, the backend makes the HTML in a matter of seconds (exactly 2 if the console log is to be believed), the browser just has a difficult time loading (in part because there are some external images to query which I’ve yet to implement a caching method for), but mostly because it’s just too much for most browser buffers.

So I want to implement a paging system that reads into memory only a chunk of the entire grid (say 120-240 columns). Ideally it would implement a FIFO buffer that holds n pages (pages in this case would be HTML that is injected) attached to a scroll function that when scrolled horizontally loads more markup.

How would some of you go about this? I suppose for now I could just use a basic button that changes the grid page manually, but scrolling is a feature I’m going to have to add

1 Like
2

Looks good. We are working on a grid guide for our iptv apk now also.