select button

Hi there,

The selectButton in the new framework appears to be different to the selectButton in the old framework.

In the old framework is has nice 'tick' buttons and shows the chosen item on the button once the button has been used. Is there a way to make the new selectbutton appear the same as the old one?



1 Reply
  • The SelectButton control is now coupled to the OptionSelectView class, which allows much more flexibility to determine how the options are presented to the user. Customization of this view is done via extension of the class. Typically you will just be altering the Grid cell methods used when listing the options, which are defined as methods on the OptionSelectView. Here is a quick example to get you going.

    var MyOptionView = new KONtx.Class({

    Extends: KONtx.system.OptionSelectView,

    optionCellCreator: function () {
    // the method provided with the base class returns a GridCell,
    // so we don't need to duplicate that code here. We just want
    // to add the checkmark.
    var cell = this.parent();

    cell.checkmark = new KONtx.element.Image({
    src: 'Framework/Themes/Assets/Common/' + Theme.keys.screen + '/checkmark.png',
    autoShow: false,
    styles: {
    visible: false,
    hAlign: 'right',
    vAlign: 'center'

    return cell;

    optionCellUpdater: function (cell, data) {
    // calling the parent class method here updates the text
    // content created in the default optionCellCreator

    var isChecked = data.value == MY_CONDITION_VALUE;

    cell.checkmark.visible = isChecked;


    var MySelectButton = new KONtx.control.SelectButton({
    optionViewClass: MyOptionView,
    options: [
    { label: "first", value: "1" },
    { label: "second", value: "2" },
    { label: "third", value: "3" }

Recent Posts

in General - Yahoo! TV Widgets