title: knockout model table edit popup
body: <p>I am working on table layout page where the columns and rows will be populated dynamically, And the html is like</p>
  
  <pre><code>&lt;h4&gt;Select Columns:&lt;/h4&gt;
  
  &lt;hr&gt;
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr data-bind="foreach: gridOptions.columns"&gt;
              &lt;th data-bind="text: name"&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr data-bind="foreach: gridData.data"&gt;
              &lt;td data-bind="text: name "&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And the knockout model will be something like</p>
  
  <pre><code>    var vm = {
      gridOptions: {
          columns: [{
              id: '1',
              name: 'Year',
          }, {
              id: '2',
              name: 'Month',
          }, {
              id: '3',
              name: 'Sun',
          }, {
              id: '4',
              name: 'Mon',
          }, ]
  
      },
      gridData: {
          data: [{
              id: '1',
              name: '2014',
          }, {
              id: '2',
              name: 'July',
          }, {
              id: '3',
              name: 'Study',
          }, {
              id: '4',
              name: 'Read',
          }, ]
  
      },
  };
  
  
  ko.applyBindings(vm);
  </code></pre>
  
  <p>And I Want to create a model popup to edit the row in the tables.
  Only the name in the row to edited and the for the column Sun,Mon the edit data is like ['Read', 'Sleep','Exam', 'Study']</p>
  
  <p>How can I create a model popup to edit this and save them back db</p>
  
  <p>Fiddle here : <a href="http://jsfiddle.net/2YKCb/8/" rel="nofollow">sample fiddle</a></p>