Question

I have a table a search link as one of it’s columns. when i click on search, an ajax popup extender panel pops up with a search box option. the search is done through a webservice call and the results are binded in a table inside the panel. I made the table rows clickable and i want the clicked row to be binded to the first table. The problem i’m having is keeping track of each row. When i click a row inside the panel, all rows in the first table are binded instead of just that one row. I can’t figure out how to keep track of which row i clicked.Any help is really appreciated, I’ve been struggling with this for days. Here is my code:

JavaScript

    $(document).ready(function () {
           MyAccountModel = new AccountViewModel()
     ko.applyBindings(MyAccountModel );
 })

      var passedmodel;
      var MyAccountModel;
    var AccountViewModel = function () {
                 var self = this;
                 self.model = {};
                 self.invoice = ko.observableArray([new invoice()]);
                //Ajax Call to search accounts (working and binding fine)
                 self.GetAccounts = function () {
   var searchstring = document.getElementById("<%=txtaccountsearch.ClientID %>").value;
                     var DTO = { 'searchstring': searchstring };
                     var AccountURL = "ajaxwebservicecalls.asmx/GetAccount";
                     $.ajax({
                         type: "Post",
                         url: AccountURL,
                         data: JSON.stringify(DTO),
                         contentType: "application/json; charset=utf-8",
                         dataType: "json",
                         success: function add(msg) {
                             passedmodel = ko.mapping.fromJS(msg.d);
                             MyMasterviewModel.MyAccountModel.invoice(passedmodel);

                         },
                         error: ONAccountFailure

                     });
                 }

                 function ONAccountFailure(xhr, ex) {
                     alert(xhr.responseText);
                  }

      self.CurrentDisplayAccount = ko.observableArray([new CurrentDisplayAccount()])
                 //this is to select a row inside the panel
                 self.selectAccount = function (item) {
                     self.CurrentDisplayAccount(item);
                 };

HTML

I will not show the Popup Extender/Panel code to save space. Here are the knokcout table bindings

        <table id="Table3"> 
        <tr>
        <th> Account Code </th>
        <th> Description </th>
        <th> Account Type </th>
        <th> Purpose </th>

       </tr>
    <tbody  data-bind="foreach:MyAccountModel.invoice().GLAccounts">
    <tr data-bind="click: MyMasterviewModel.MyAccountModel.selectAccount">

    <td  data-bind=" text:  $data.FormattedGLAccount"></td>
    <td data-bind="text:  $data.GLAccountDescription"></td>
    <td data-bind="text:  $data.GLAccountTypeName" ></td>
    <td data-bind="text:  $data.GLAccountLongDescription" ></td>
       </tr>
       </tbody>
       </table>    

Now whenever i click on any row of the above table, the results are binded to both row on the below table. However, I just want it to be binded to the row where i clicked search from.

  <td align="left">
  <table border="0" cellspacing="0" cellpadding="0">
      <th> Account </th>
      <th> Amount </th>
      <th> Reference </th>
      <th> Description </th>     
    <tbody databind="foreach: MyAccountModel.CurrentDisplayAccount()" >
    <td >
    <input  data-bind="text: $data.FormattedGLAccount" />
     </td>
     <td >
<input data-bind="text:$data.GLAccountDescription"/>
    </td>
    <td >
<input  data-bind="text:   $data.GLAccountTypeName" />
 </td>
  <td >
<input  data-bind="text:   $data.GLAccountLongDescription" />     </td>
  <td>
 <asp:HyperLink runat="server" ID="HyperLink1" NavigateUrl="javascript:$find('ModalPopupExtenderaccountsearchbehav').show();" Text="Search"  />
       </td>
         </tbody>

     <--second row:-->
 <tr>
 <td >
<input  data-bind="text: $data.FormattedGLAccount" />    </td>
<td >
 <input  data-bind="text: $data.GLAccountDescription" />     </td>
 <td >
 <input  data-bind="text:   $data.GLAccountTypeName" />     </td>
 <td >
  <<input  data-bind="text:   $data.GLAccountLongDescription" />
 </td>
 <td >        
 <asp:HyperLink runat="server" ID="HyperLink2" NavigateUrl="javascript:$find  ('ModalPopupExtenderaccountsearchbehav').show();" Text="Search"  />

                     </td>
                </tr>
            </table>
        </td>

I tried changing the syntax binding around, but it still kept binding both. I tried a foreach loop, but was unsuccessful. I’m thinking i need to get the index of thr row, but i don’t know how that would be done. Help please!!

UPDATE

Here is a link to a fiddle to what I am trying to do http://jsfiddle.net/KwvrZ/7/.
I want to be able to click on any of the rows in the first table, and that row should be binded to the second table. If i then click on a a different row in the first table, it should be binded to the second row of the second table. Hope this makes sense.

I really need some help!

Answer 1

The description of your problem isn’t very clear. Your update helps, but I’m having trouble trying to figure out what you want to accomplish.

---

Are you only ever going to have 2 rows displayed? If so, you need to keep track of each selection in two observables.

Markup:

<tbody>
    <tr data-bind="with: CurrentDisplayAccount1">
        <td>
            <input data-bind="value: FormattedGLAccount" />
        </td>
        <td>
            <input data-bind="value: GLAccountDescription" />
        </td>
        <td style="padding-left: 4px; padding-right: 2px;"> <a href="#" onclick="javascript:$find('ModalPopupExtenderaccountsearchbehav').show();">Search</a>

        </td>
    </tr>
    <tr data-bind="with: CurrentDisplayAccount2">
        <td>
            <input data-bind="value: FormattedGLAccount" />
        </td>
        <td>
            <input data-bind="value: GLAccountDescription" />
        </td>
        <td style="padding-left: 4px; padding-right: 2px;"> <a href="#" onclick="javascript:$find('ModalPopupExtenderaccountsearchbehav').show();">Search</a>

        </td>
    </tr>
</tbody>

In your ViewModel:

 self.CurrentDisplayAccount1 = ko.observable();
 self.CurrentDisplayAccount2 = ko.observable();
 self.selectAccount = function (item) {
     if(!self.CurrentDisplayAccount1()) {
        self.CurrentDisplayAccount1(item);
     } else if(!self.CurrentDisplayAccount2()){
         self.CurrentDisplayAccount2(item);
     }
 };

Here is your fiddle working that way: http://jsfiddle.net/JoeDoyle23/KwvrZ/11/

---

Or, do you want each selected row added to the table, with no limit? In that case, CurrentDisplayAccount needs to be an observable array and your second table needs to use the foreach binding. When a row is clicked, that row is added to the CurrentDisplayAccount array. If you want the second table to not allow duplicates, you’d just need to check for it in the array before adding it.

Markup:

<tbody data-bind="foreach: CurrentDisplayAccount">
    <tr>
        <td>
            <input data-bind="value: FormattedGLAccount" />
        </td>
        <td>
            <input data-bind="value: GLAccountDescription" />
        </td>
        <td style="padding-left: 4px; padding-right: 2px;"> <a href="#" onclick="javascript:$find('ModalPopupExtenderaccountsearchbehav').show();">Search</a>

        </td>
    </tr>

In your ViewModel:

 self.CurrentDisplayAccount = ko.observableArray([]);
 self.selectAccount = function (item) {
     self.CurrentDisplayAccount.push(item);
 };

Here is your fiddle working that way (minus the duplicate check): http://jsfiddle.net/JoeDoyle23/KwvrZ/12/

Hopefully these examples are able top get you un-stuck.