1

I have successfully set up a cell on a row to be a select option using the template bellow:

<div data-bind="kgCell: $cell"> 
<select data-mini="true" data-bind="options: $cellValue, event : { change : function(data, event) { mymodel.gridCallBack(data, event, $cell, $cellValue); } } "> <option value="undefined">Selecione...</option> 
</select> 
</div>

But I have not been able to find out the value of the select box. Is there a way I can set things so that I am able to know the value binding of the select per row for the specific cell?

Augusto

Augusto Bernardo
  • 21
  • 1
  • 5

1 Answers1

2

Usually what you want is for the 'options' to be some array, and you use the 'value' binding to keep your viewmodel observable in sync with the selectbox. Then when the user chooses a different option, you can get the updated value from that same observable that you put in the 'value' binding.

As for the event handler - the first 'data' argument will be the "viewmodel" for the koGrid row, and from there it's easy to access the VM data for this row (e.g. data.name()).

Here's a simple example: (JSFiddle here: http://jsfiddle.net/qjNUQ/1/ )

HTML:

<script type="text/html" id="tmpl">
    <div data-bind="kgCell: $cell"> 
        <select data-mini="true" data-bind="options: $root.availableTypes, 
            value: $cellValue, 
            optionsCaption: 'Selecione...', 
            event: { change: $root.typeChanged }"></select> 
    </div>
</script>


<div id="grid" data-bind="koGrid: { 
    data: items,
    columnDefs: 
        [{field: 'name', width: 120}, 
         {field: 'type', cellTemplate: 'tmpl', width: 120}],
    autogenerateColumns: false
}"></div>

JS:

function Item(item)
{
    var self = this;
    this.name = ko.observable(item.name);
    this.type = ko.observable(item.type);
}

function VM() {
    var self=this;

    this.availableTypes = ['weapon', 'armour', 'food', 'document', 'potion'];

    this.items = ko.observableArray([
        new Item({ name: 'sword', type: 'weapon' }), 
        new Item({ name: 'city map', type: 'document' }),
        new Item({ name: 'healing cider', type: 'potion' }),
        new Item({ name: 'new item' })
    ]);    

    this.typeChanged = function(itemRow, event) {        

        console.log( 'type changed to ', itemRow.type(), 
                     ', for item: ', itemRow.name() );

    }
};

ko.applyBindings( new VM() );​
antishok
  • 2,910
  • 16
  • 21