I am creating a meeting attendance manager, and the information is being saved into our db. I have a drop down select list on my sign in form called "Attendee Type" which contains values that are populated from an observable array called attendeeTypes. Attendee types is filled with objects in the form
{Id:1, Name: "Parent"}
{Id:2, Name: "Staff"}, etc.
Now, the rows in my table are also dynamically created by running a foreach over an observable array, meetingAttendees.
Meeting Attendees
self.meetingAttendees = ko.observableArray([{ AttendeeTypeId: ko.observable(1),<br> AttendeeNames: ko.observableArray([{ Name: "Marlin" }, { Name: "Dory" }]),<br> AttendeeSiteNumber: ko.observable(40), <br>StudentNames: ko.observableArray([{ Name: "P. Sherman" }, { Name: "42 Wallaby Way" }, { Name: "Sydney" }]), <br>Email: ko.observable("[email protected]"), <br>Telephone: ko.observable("559-222-5555") }
As you can see, each row in the table has an attendeeTypeId in it. If this value is pre-populated, like it is here, I would like the dropdown to switch to the appropriate value. This will be helpful in preserving data in case a refresh happens.
My Html:<table class="table table-responsive table-condensed table-bordered table-striped">
<thead>
<tr>
<th class="attendeeTypeCol">Attendee Type</th>
<th class="attendeeNameCol">Attendee Name(s)</th>
<th class="schoolNameCol">School Name</th>
<th class="studentNameCol">Student Name</th>
<th class="emailCol">E-Mail Address</th>
<th class="telephoneCol">Telephone Number</th>
</tr>
</thead>
<tbody data-bind="foreach: $root.meetingAttendees">
<tr>
<td class="attendeeTypeCol">
<select style="margin-right: 15px;" data-bind="options: $root.attendeeTypes, optionsText: 'Name',value: $root.meetingAttendees()[$index()].AttendeeTypeId,optionsValue: 'Id', optionsCaption: 'I am a(n)...'">
</select>
<span data-bind="text:$index()"></span>
<span data-bind="text:$root.meetingAttendees()[$index()].AttendeeTypeId()"></span>
</td>
...
</tr>
</tbody>
</table>
I have two debugging spans so that I can always see the value of $root.meetingAttendees()[$index()].AttendeeTypeId(). When I select a value from the dropdown list, the value does update and change accordingly, so I'm confident it is looking in the right location, but on initial load the value binding is not setting the drop down list to the appropriate option. It is actually setting the the variable to the default 'undefined'.
Does anyone have any thoughts on how I can get the dropdown to set to the appropriate value from the Id in $root.meetingAttendees()[$index()].AttendeeTypeId()?