0

Grids and Pagination

Can someone provide me with some information on having a grid in a widget that updates and reflects pagination appropriately?

I have a location selector in our widget that relies on ajax. Users begin by selecting a region from a grid (Europe, Africa, Australia, etc.) then selecting a country, then selecting a city within that country. So, for instance, you would select Europe from the grid, and it would refresh the grid with a selection of countries in Europe. Next you could choose a country, and finally a city.

The person who coded this initially used getCurrentApp().switchSection('country/city') and this has caused bugs, the inability to go back in the process, and generally a headache in the code.

I'd like to clean it up as following:
1. Grid is populated with regions (this is static and not dynamically pulled from anywhere)
2. User selects an item, and it sends it to ajax.
3. The ajax results are parsed and the grid is cleared and refilled with countries.
4. 2-3 are repeated for cities.
5. The city is finally stored.

I can't seem to get started on this. I just don't know which elements to use to get it done. Will KONtx.element.TextGrid be the right choice for this? Will it provide pagination when there are more items are what the widget will hold? And finally, can someone provide me with a little enlightenment on how to clear and populate a textgrid from a function? I think my textgrid will be 10 rows, 1 column (if that matters/helps)

Thanks!

by
11 Replies
  • So TextGrid is mostly used just for paging text (from my understanding), what you want is a normal grid with a text element in the cell, pretty much exactly as whats in the docs for the Grid Element.



    What is not really there is the line
    [code]
    updateView: function() {
    this.controls.listGrid.changeDataset(myArray, true);
    }
    [code]

    The basics is that everytime you call changeDataset you pass in an array of elements. Then the framework iterate through the array you pass into changeDataset (myArray) and call your cell Updater function with the cell that it creates and one element from your array.

    So for you you'll call changeDataset(regionsArray), then changeDataset(countries), changeDataset(cities).... each time the user makes a selection.

    There's a bit more to it but this should get you started.
    0
  • Thanks Mike! This is exactly what I needed.

    Cheers!
    0
  • So, after trying to build a grid, I'm running into problems. I opted to use KONtx.control.Grid instead of the element Grid, being that it's themed already. Following the documentation, I built the cellCreator and cellUpdater methods, followed by my grid. Problem is, when I run the widget, the console tells me that I'm throwing an error in element.js on line 2468 -- a file that I'm guessing is part of the framework. The specific error is "this.body has no properties"

    I've tried several things to fix this, including declaring the cellCreator and cellUpdaters as both variables and functions. I've also included them as attributes to the grid itself (in the code posted below) to no avail.

    CODE
    (function() {

    var view = ######.getCurrentView();

    view.onShow.subscribe(function(type, args, obj) {
    var host = this.application.host;
    var application = this.application;
    var controller = this;
    var window = this.body;
    var panel = this.body.panel;
    var data = this.data;
    var referrer = this.referrer;
    var platform = KONtx.platform;

    var buttonHeight = this.scale(37);
    var indicatorHeight = this.scale(25);
    var buttonCount = 10;
    var menuHeight = buttonHeight * buttonCount + indicatorHeight;
    var buttonTextStyles = {
    hAlign: 'left',
    vAlign: 'center',
    paddingLeft: this.scale(5),
    color: '#FFFFFF',
    fontFamily: '"Helvetica Neue"',
    fontSize: this.scale(19)
    };

    var selectText = new KONtx.element.Text({
    label: $_('change_region'),
    styles: {
    textAlign: 'center',
    hOffset: '0',
    vOffset: '0',
    width: this.width,
    color: '#FFFFFF',
    fontSize: this.scale(24),
    paddingBottom: this.scale(10)
    }
    }).appendTo(panel);

    var locationGrid = new KONtx.control.Grid({
    columns: 1,
    rows: 10,
    carousel: false,
    cellCreator: function(){
    var cell = new KONtx.control.GridCell({
    styles: {
    height: KONtx.utility.scale(35),
    width: this.width,
    },
    events: {
    onSelect: function(event) {
    log("WHEEEEEEEEEE");
    }
    }
    });
    cell.textLabel = new KONtx.element.Text({
    styles: {
    color: '#FFFFFF',
    fontSize: KONtx.utility.scale(18)
    }
    }).appendTo(cell);
    return cell;
    },
    cellUpdater: function(cell, dataitem){
    cell.textLabel.data = dataitem.label;
    cell.originalButtonNumber = dataitem.buttonNumber;
    },
    styles: {
    width: this.width,
    height: buttonHeight * 10
    }
    }).appendTo(this);
    });
    })();


    Any gridmasters want to help?
    0
  • QUOTE (t.knapton @ Jul 1 2009, 10:30 AM) <{POST_SNAPBACK}>
    So, after trying to build a grid, I'm running into problems. I opted to use KONtx.control.Grid instead of the element Grid, being that it's themed already. Following the documentation, I built the cellCreator and cellUpdater methods, followed by my grid. Problem is, when I run the widget, the console tells me that I'm throwing an error in element.js on line 2468 -- a file that I'm guessing is part of the framework. The specific error is "this.body has no properties"

    I've tried several things to fix this, including declaring the cellCreator and cellUpdaters as both variables and functions. I've also included them as attributes to the grid itself (in the code posted below) to no avail.

    CODE
    (function() {

    var view = ######.getCurrentView();

    view.onShow.subscribe(function(type, args, obj) {
    var host = this.application.host;
    var application = this.application;
    var controller = this;
    var window = this.body;
    var panel = this.body.panel;
    var data = this.data;
    var referrer = this.referrer;
    var platform = KONtx.platform;

    var buttonHeight = this.scale(37);
    var indicatorHeight = this.scale(25);
    var buttonCount = 10;
    var menuHeight = buttonHeight * buttonCount + indicatorHeight;
    var buttonTextStyles = {
    hAlign: 'left',
    vAlign: 'center',
    paddingLeft: this.scale(5),
    color: '#FFFFFF',
    fontFamily: '"Helvetica Neue"',
    fontSize: this.scale(19)
    };

    var selectText = new KONtx.element.Text({
    label: $_('change_region'),
    styles: {
    textAlign: 'center',
    hOffset: '0',
    vOffset: '0',
    width: this.width,
    color: '#FFFFFF',
    fontSize: this.scale(24),
    paddingBottom: this.scale(10)
    }
    }).appendTo(panel);

    var locationGrid = new KONtx.control.Grid({
    columns: 1,
    rows: 10,
    carousel: false,
    cellCreator: function(){
    var cell = new KONtx.control.GridCell({
    styles: {
    height: KONtx.utility.scale(35),
    width: this.width,
    },
    events: {
    onSelect: function(event) {
    log("WHEEEEEEEEEE");
    }
    }
    });
    cell.textLabel = new KONtx.element.Text({
    styles: {
    color: '#FFFFFF',
    fontSize: KONtx.utility.scale(18)
    }
    }).appendTo(cell);
    return cell;
    },
    cellUpdater: function(cell, dataitem){
    cell.textLabel.data = dataitem.label;
    cell.originalButtonNumber = dataitem.buttonNumber;
    },
    styles: {
    width: this.width,
    height: buttonHeight * 10
    }
    }).appendTo(this);
    });
    })();


    Any gridmasters want to help?


    The problem is that you are using Framework 0.2.2 and trying to use Framework 1.0+ level functionality. You also haven't sent an email to my knowledge (my apologies if I am not recognizing who you are) as mentioned in the sticky post at the top of the forums which reads "Calling all users of Framework 0.2.2". The sticky posts are important, please do not ignore them.

    -Jeremy
    0
  • Mike,

    After figuring out the grid system, I've tried to invoke the changeDataset method in any capacity. I've tried including it in the updateView: of the grid itself (to be honest I don't know what would trigger that to execute), as well as assigning it in functions to buttons and such. It always just returns that the object I'm calling it on doesn't have any properties. This includes when the call is entirely outside of the block that creates the grid.
    0
  • Sorry to double-post, but if someone has the time, can they explain in a little more detail how to build and populate paginated grids with KONtx.element.Grid? I read the documentation, but still don't understand how the cellCreator and cellUpdater functions work/are called/take in data.

    I've included some code in which I'm trying to build and fill a simple grid in the template widget. It's for wdk0.9.6-19 // framework 1.1 (at least, I'm including the 1.1 framework js file in my init)

    I really feel like I'm on the edge of really getting how these things work, I just still need a bit of help =/ thanks everyone.

    CODE
    var CustomView = new KONtx.Class({
    ClassName: 'MyCustomView',

    Extends: KONtx.system.SidebarView,

    createView: function() {

    //will be full of cities eventually
    regionButtonList = [];
    regionButtonList.push('1');
    regionButtonList.push('2');
    regionButtonList.push('3');
    regionButtonList.push('4');
    regionButtonList.push('5');
    regionButtonList.push('6');
    regionButtonList.push('7');
    regionButtonList.push('8');
    regionButtonList.push('9');

    //regionButtonList array in reverse for debugging purposes.
    testarray = [];
    testarray.push('9');
    testarray.push('8');
    testarray.push('7');
    testarray.push('6');
    testarray.push('5');
    testarray.push('4');
    testarray.push('3');
    testarray.push('2');
    testarray.push('1');

    //begin gui stuff
    this.controls.backButton = new KONtx.control.BackButton({
    label: ('Change your Location'),
    guid: "back_button",
    }).appendTo(this);

    //borrowed mainily from the documentation
    this.controls.grid = new KONtx.control.Grid({
    guid: 'cityGrid',
    orientation: 'horizontal',
    dataSet: regionButtonList,
    rows: 10,
    columns: 1,
    render: true,
    styles: {
    width: this.width,
    height: this.height -this.controls.backbutton.height - this.controls.pageindicator.height,
    vOffset: this.controls.backbutton.height
    },
    cellCreator: function () {
    var cell = new KONtx.control.GridCell({
    events: {
    onSelect: function (event){
    var dataItem = this.getDataItem();
    log('selected a cell!',dataItem);
    }
    }
    });
    cell.content = new KONtx.element.Text({
    styles: {
    color: 'white',
    hAlign: 'center',
    vAlign: 'center'
    }
    }).appendTo(cell);
    return cell;
    },
    cellUpdater: function (cell, dataitem) {
    cell.content.data = dataitem.label;
    }
    }).appendTo(this);

    },

    updateView: function() {
    // heaven knows how I trigger these functions...
    }
    });
    0
  • So updateView gets called when the view is initially shown. (to be totally honest I haven't gone through the source enough to understand exactly when). It can also of course be called manually when you want to update some content.

    so for your example you'd want something like

    CODE
    updateView:function() {
    this.controls.grid.changeDataset(regionButtonList);
    }


    Now you have one issue, your sample arrays don't have a label so you need to change your update cellUpdater to something like
    CODE
    cellUpdater: function(cell, dataItem) {
    cell.content.data = dataItem // no label
    cell.dataItem = dataItem // you need this for your log statement to work
    }


    If this works then you can work on the next step of changing the data.

    Now when you launch your view you should have a bunch of rows with 1..10
    0
  • t.knapton, Does Mike's response help? Are you still having an issue with the grid?
    0
  • QUOTE (Jim Cortez @ Jul 23 2009, 07:50 AM) <{POST_SNAPBACK}>
    t.knapton, Does Mike's response help? Are you still having an issue with the grid?


    Yes. My grids are working great. =)

    I was thinking about maybe writing something for beginning developers, like the basic anatomy of a widget and a few key components to them. I was assigned the job of updating our widget, and after learning that it should move to the new framework, I ended up learning both new and old frameworks in very little time. Having something like this would really help others in similar positions.
    0
  • QUOTE (t.knapton @ Jul 23 2009, 09:28 AM) <{POST_SNAPBACK}>
    I was thinking about maybe writing something for beginning developers, like the basic anatomy of a widget and a few key components to them. I was assigned the job of updating our widget, and after learning that it should move to the new framework, I ended up learning both new and old frameworks in very little time. Having something like this would really help others in similar positions.


    Agreed on the usefulness of this. It's been on my personal todo list for a while, but sadly with all the developers we are supporting (on top of my own development work) not had the time. If you do have something you want to share later, please don't hesitate to let me know.

    -Jeremy
    0

Recent Posts

in General - Yahoo! TV Widgets