CODEWITHSUNDEEP
javascriptjqueryknockout.js
aman
aman

Reputation: 6242

Knockout JS: Get dropdown selected data and populate other fields

Using Knockout JS here.

I have a HTML table and the table has 4 columns. I have button to add a row to table and then remove button against each row to delete it. I also have a dropdown in the first column of this table. The dropdown is populated from the button click event outside the table. Below is my html:

   <table class="table table-bordered">
    <thead class="mbhead">
      <tr class="mbrow">
       <th>Input</th>
       <th>First Name</th>
       <th>Last Name</th>
        <th>Address</th>
      </tr>
    </thead>
 <tbody data-bind="foreach: items">
<tr>
  <td>
    <select class="form-control" data-bind="options: $parent.ddl, optionsText: 'name', value: $parent.selectedColumnValue, optionsCaption: '--Select--',  event: { change: $parent.ddlChanged }">                          
                    </select>
  </td>
  <td><span class="input-small" data-bind="value: firstName" /></td>
  <td><span class="input-small" data-bind="value: lastName" /></td>
  <td><span class="input-small" data-bind="value: address" /></td>
  <td>
    <input type="button" value="Remove Row" data-bind="click: $parent.removeRow" class="btn btn-danger" />
  </td>
</tr>
</tbody>
</table>

<div class="col-xs-12 col-sm-6">
  <input type="button" value="Add Row" class="btn btn-primary" data-bind="click: addRow" />
 <input type="submit" value="Get Data" data-bind="click: GetData" class="btn btn-primary" />
</div>

My knockout code can be seen in the jsfiddle link as below.

What I am looking for is:

When the user selects the dropdown the selected dropdown text gets populated to that rows one column and the value gets populated to that rows other columns/cell.

My Issue:

1.) I am not able to get the selected text and selected value from the dropdown

When the dropdown selected index change event is fired the event param has the below value as seen in console:

firstName : ƒ c()

lastName: ƒ c()

address : ƒ c()

proto : Object

2.) Secondly I don't know how I could update other column values based on the dropdown selection.

The json that gets binded to dropdown is like below:

'[{"FirstName":"Alex","LastName":"Sanders","Address":123},{"FirstName":"Sam","LastName":"Billings","Address":"Mahony Street"}]';

Here is my fiddle:

https://jsfiddle.net/aman1981/njbyumrs/12/

Inputs are appreciated.

Upvotes: 0

Views: 1593

Answers (1)

Joe Wilson
Joe Wilson

Reputation: 5671

You've got some parent and level stuff mixed up, and your table was binding on value instead of text. I moved the drop down binding, selectedValue to Item since it's at the row level and not the parent level. I used the KO with binding to show the values inside selectedValue for that part of the HTML.

I also added a <pre> tag with the KO values so you can see what happens as you interact with it and the KO model data changes.

Side note: The three properties in Item don't need to be observable in this demo as the values do not change while on the screen.

var ViewModel = function() {
  var self = this;

  //Empty Row
  self.items = ko.observableArray([new Item()]);
  self.ddl = ko.observableArray();  

  self.addRow = function() {
    self.items.push(new Item());
  };

  self.removeRow = function(data) {
    self.items.remove(data);
  };
  self.GetData = function() {
    if (self.ddl().length === 0) {
      var item1 = new Item("Alex", "Sanders", "Maple Street");
      self.ddl.push(item1);
      var item2 = new Item("Sam", "Billings", "Mahony Street");
      self.ddl.push(item2);
    }
  }
}

var Item = function(fname, lname, address) {
  var self = this;
  self.firstName = ko.observable(fname);
  self.lastName = ko.observable(lname);
  self.address = ko.observable(address);
  self.selectedValue = ko.observable();
};

vm = new ViewModel()
vm.GetData();
ko.applyBindings(vm);
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table class="table table-bordered">
  <thead class="mbhead">
    <tr class="mbrow">
      <th>Input</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: items">
    <tr>
      <td><select class="form-control" data-bind="options: $parent.ddl, optionsText: 'firstName', value: selectedValue, optionsCaption: '--Select--'"> </select></td>
      <td data-bind="with: selectedValue">
        <span data-bind="text: firstName"></span>
      </td>
      <td data-bind="with: selectedValue">
        <span data-bind="text: lastName"></span>
      </td>
      <td data-bind="with: selectedValue">
        <span data-bind="text: address"></span>
      </td>
      <td>
        <input type="button" value="Remove Row" data-bind="click: $parent.removeRow" class="btn btn-danger" />
      </td>
    </tr>
  </tbody>
</table>

<div class="col-xs-12 col-sm-6">  
  <input type="button" value="Add Row" class="btn btn-primary" data-bind="click: addRow" />
</div>

<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

Upvotes: 3

Related Questions