Back to General - Yahoo! TV Widgets Forum
0

Using Grid to make a list of entries grouped under headers.

My Basic Question:
I am trying to use KONtx.control.Grid to create a list of entries grouped by headers, similar to the way the calendar on the iPhone groups appointments by date (as seen here: http://media.wiley.com/Lux/57/117457.image0.jpg ) Does anyone know of a good way to do this?


More Information:

Theres a couple of problems in the way this works that make it tricky:
1. The header’s height is less than that of the height of the actual entries.
2. The headers should be skipped over by the roving highlight. Only the actual entries should be able to be focused.
3. There may be more entries than fit on a single page, I need it to be paginated. (this is further complicated by #4, see below)
4. There can be a different number of entries under each heading. Depending on how many entries fall under the same headings, a different number of entries may be able to fit on each page.

I’ve tried two approaches, both of which I can’t get to work fully:

Approach A:
Each header and each entry gets its own grid cell. There are two problems with this approach, firstly, I can’t figure out how to make the header cells have a smaller height than the entry cells, is this possible?. Secondly, the roving highlight does not skip the headers. From what I have read in this post: http://developer.yahoo.net/forum/?showtopi...mp;endsession=1 skipping the headers doesn’t seem possible without extending Grid.

Approach B:
Every page gets its own gridcell. The problem here is that this makes everything on the whole page focus together at the same time. From what I’ve read here: http://developer.yahoo.net/forum/?showtopi...mp;endsession=1 it doesn’t seem like its possible to get things within a gridcell to focus individually.

It seems like I might need to create a custom grid-like class and/or extend the existing Grid class to get this working, but I don’t really know where to start on something like this. I would greatly appreciate any advice/examples on how to best accomplish this.

by
Report Abuse
3 Replies
  • I just implemented something similar yesterday. In the list of items to update the grid I manually inserted "header" items. Then in _cellUpdater when I saw a header item I set up the cell differently. I did cell.config.focus = false. But perhaps you could use any cell.setStyle() option also, I didn't try as I didn't need to.

    QUOTE (Winston Hsu @ Jun 14 2011, 09:12 AM) <{POST_SNAPBACK}>
    My Basic Question:
    I am trying to use KONtx.control.Grid to create a list of entries grouped by headers, similar to the way the calendar on the iPhone groups appointments by date (as seen here: http://media.wiley.com/Lux/57/117457.image0.jpg ) Does anyone know of a good way to do this?


    More Information:

    Theres a couple of problems in the way this works that make it tricky:
    1. The header’s height is less than that of the height of the actual entries.
    2. The headers should be skipped over by the roving highlight. Only the actual entries should be able to be focused.
    3. There may be more entries than fit on a single page, I need it to be paginated. (this is further complicated by #4, see below)
    4. There can be a different number of entries under each heading. Depending on how many entries fall under the same headings, a different number of entries may be able to fit on each page.

    I’ve tried two approaches, both of which I can’t get to work fully:

    Approach A:
    Each header and each entry gets its own grid cell. There are two problems with this approach, firstly, I can’t figure out how to make the header cells have a smaller height than the entry cells, is this possible?. Secondly, the roving highlight does not skip the headers. From what I have read in this post: http://developer.yahoo.net/forum/?showtopi...mp;endsession=1 skipping the headers doesn’t seem possible without extending Grid.

    Approach B:
    Every page gets its own gridcell. The problem here is that this makes everything on the whole page focus together at the same time. From what I’ve read here: http://developer.yahoo.net/forum/?showtopi...mp;endsession=1 it doesn’t seem like its possible to get things within a gridcell to focus individually.

    It seems like I might need to create a custom grid-like class and/or extend the existing Grid class to get this working, but I don’t really know where to start on something like this. I would greatly appreciate any advice/examples on how to best accomplish this.
    Report Abuse
    0
  • Yes, you will have to extend the current Grid class. I don't have time to go into how, but by viewing some of the Y! framework code should give you an idea. The Y! code borrows many concepts from MooTools/OO-programming (class, extends, implements, etc). It will take you some time to dig into, and understand the Grid code. Try starting with the changeDataSet method.

    I would imagine you would add two callbacks, headerCreator & headerUpdater, similar to cellCreator & cellUpdater.

    So, when you instantiate your grid, it would be:

    CODE
    new KONtx.control.Grid({
        cellCreator : function(){ ... },
        cellUpdater : function(){ ... },
        headerCreator : function(){ ... },
        headerUpdater : function(){ ... }
    });


    You'll have to structure your JSON data someway to identify what is a header & not:

    CODE
    [
        {
            header : "Header 1',
            items : [
                { name : "item 1" },
                { name : "item 1" },
                ....
            ]
        },
       {
            header : "Header ",
            items : [
                { name : "item 1" },
                { name : "item 1" },
                ....
            ]
        },
        ....
    ]
    Report Abuse
    0
  • Thanks guys, after a lot of digging around in the framework source code for Grid/GridCell/PageIndicator, i solved the problem by creating my own custom view which extends Container. It just empties and fills itself up with Buttons and Headers according to which page its on. I didn't end up extending Grid because it had a lot of code for dealing with multiple columns/roving highlight which I didn't want to figure out.
    Report Abuse
    0
Ask a Question

Recent Posts

in General - Yahoo! TV Widgets