title: GUI patterns to edit data with many-to-many relationship
body: <p>I often run into a situation where I need to come up with a GUI to edit data that has a n:m relationship. I'm looking for user friendly GUI ideas.</p>
  
  <pre><code>[table1]
     |
    /|\
  [table2]
    \|/
     |
  [table3]
  </code></pre>
  
  <p>Usually the GUI resembles something like this:</p>
  
  <hr>
  
  <p><code>Grid that shows all items from table1</code> </p>
  
  <p><kbd>Add table3 item...</kbd> <sub>(shows modal window with table3 items)</sub></p>
  
  <hr>
  
  <p><code>Grid that shows all items from table3</code></p>
  
  <hr>
  
  <p>After the user picked a table3 item, I add a new row to table2 and refresh the grids.</p>
  
  <p><strong>Disadvantages:</strong></p>
  
  <ul>
  <li>You can only add table3 items to table1, and not the other way around;</li>
  <li>You can only browse table1 items and see related table3 items;</li>
  <li>I need to have one filtered grid of table3 items, and a similar one to pick new items;</li>
  </ul>
  
  <p><strong>My question:</strong></p>
  
  <p>Does anyone know a better way to visually browse and edit data that has a n:m relationship? 
  Or any nice patterns that I could "steal" from existing software packages? </p>