CODEWITHSUNDEEP
knockout.js
Zach M.
Zach M.

Reputation: 1194

Complex table with dropdowns using Knockout

I am building a form to allow a user to change configuration in the database which is already in place.

Example Data:

ProcessorColumnName OutboundColumnName  CatalogColumnId
Active              Active              2
Category            Category            3
Inventory           Inventory           4
Manufacturer        Manufacturer        5
ManufacturerSKU     ManufacturerSKU     6

Knockout model:

function CatalogConfigurationModel(data) {
        var self = this;
        self.processorColumnName = ko.observable(data.ProcessorColumnName);
        self.outboundColumnName = ko.observable(data.OutboundColumnName);
        self.catalogColumnId = ko.observable(data.CatalogColumnId);
        self.currentlyConfigured = ko.observable(data.OutboundColumnName);
    }

Here processorColumnName and currentlyConfigured act as a key value pair.

Table:

<table class="table table-bordered table-striped">
                    <tbody data-bind="foreach: catalogConfiguration">
                        <tr class="h4">
                            <td data-bind="text: processorColumnName"></td>
                            <td><select data-bind="options: $root.catalogConfiguration,
                            optionsText: 'outboundColumnName',
                            optionValue: 'catalogColumnId',
                            value: currentlyConfigured"></select></td>
                        </tr>
                    </tbody>
                </table>

What this is trying to do is build a list of processorColumns and provide a drop down to select a new value for that column. I want to have the value that is currently configured be the default value, but I am not sure how to reference the outer foreach values from within the dropdown. When the user first loads the page the OutboundColumnName column should be the default values for the dropdowns.

I am going to work on mocking up some data to throw a fiddle together.

Having trouble getting fiddle to work, since I'm using a call back I want to just use the sting that is being returned...here is the link but i cannot get the variable up top to map to my model, this works in my program. http://jsfiddle.net/LkqTU/15888/

Upvotes: 0

Views: 495

Answers (1)

Robert Slaney
Robert Slaney

Reputation: 3722

2 issues...

1.You have a typo in the select's binding. It should be optionsValue, not optionValue.

2.The observable used in the value binding should have a backing value the same as the value stored in the "optionsValue" field. In your case 

self.catalogColumnId = ko.observable(data.CatalogColumnId);
self.currentlyConfigured = ko.observable(data.CatalogColumnId);

Upvotes: 1

Related Questions