title: What jquery Grid supports a continuous stream of updates (json)
body: <p><strong>Since this is a huge post here is a short summary</strong> (please read the hole post if you want to answer though):</p>
  
  <p>Implemented now:</p>
  
  <ul>
  <li>Website pulls lot of json (full dataset everytime ~30kb, already gzipped)</li>
  <li>Renders data to as html table client side</li>
  <li>Too much traffic</li>
  <li>Too long rendering times</li>
  </ul>
  
  <p><strong>Link to one of the sites: <a href="http://www.bet-mate.com/Views/BetfairCoupon.aspx" rel="nofollow">Sample</a></strong> </p>
  
  <p>We already implemented the partial data retrieval, what we need now is to find a solution that:</p>
  
  <ul>
  <li>Does only render the changes</li>
  <li>Flash updated cells</li>
  </ul>
  
  <p><strong>Question: What grid or other solutions exist to make this happen?</strong></p>
  
  <p><strong>UPDATE</strong>: The client wants to see all available data at once, <strong>no paging</strong>.</p>
  
  <hr>
  
  <p>Full description:</p>
  
  <p>In our application we need to display a certain number of rows (~300-1000) in a grid. Visitors can <strong>sort (client side)</strong> by clicking on the headers. Additionally each row contains multiple links that open an <strong>iframe using colorbox</strong>.  </p>
  
  <p>The data</p>
  
  <ul>
  <li>is refreshed every 30 seconds (json from server)</li>
  <li>consists of multiple fields (strings, ints and decimals).</li>
  <li>Only the decimals are changing though, that means the links (colorbox) stay the same as well</li>
  <li>not all the data is displayed, some is used just for client side sorting</li>
  </ul>
  
  <p>Currently we are using a combination of <strong>jTemplates, tablesorter and colorbox</strong> to render the entire json dataset into an html table. The current flow is:</p>
  
  <ol>
  <li>Retreive data from server (full dataset)</li>
  <li>Render data to html using jTemplates</li>
  <li>Initialize colorbox for the table</li>
  <li>Initialize tablesorter for the table</li>
  <li>Start again from #1</li>
  </ol>
  
  <p>The solution above works, but there are some issues:</p>
  
  <ul>
  <li>Lots of duplicate data gets
  transferred. This adds up fairly
  quickly (>5GB/day)</li>
  <li>The rendering of the data takes quite
  a while (~300ms), its worse on mobiles</li>
  <li>Reinitializing the colorbox and tablesorter every time take quite a while as well (~400ms), also worse on mobiles</li>
  </ul>
  
  <p>So our goal is to <strong>just transfer the updated and new data</strong> via json. Every row has a simple unique key (int), so they can be identified easily.<br>
  Additionally we want to <strong>flash</strong> the container of the updated or newly inserted data, as a notification for the user that there have been changes.</p>
  
  <p>The flow we have in mind is:</p>
  
  <ol>
  <li>Get json data from server (<strong>full set</strong>)</li>
  <li>Render grid with sorting and
  initialize colorbox links</li>
  <li>Get json data from server (<strong>only updated values and new rows</strong>)</li>
  <li>Update the grid (<strong>only changed values and new rows</strong>) &lt;- also <strong>flash</strong> value containter after update</li>
  <li>Start again from #3</li>
  </ol>
  
  <p>So the grid we are looking for needs to support loading <strong>data as a hole</strong> and also loading <strong>just the updated values</strong>.</p>
  
  <p>The full data set would look like:  </p>
  
  <pre><code>{
      [ 
          { 
          "key":1, 
          "StaticProperty":"value3",
          "PropertyOne":2.85 ,
          "PropertyTwo":1.99
          },
          {
          "key":2, 
          "StaticProperty":"value2",
          "PropertyOne":5.66,
          "PropertyTwo":7.36
          },
          {
          "key":3, 
          "StaticProperty":"value3",
          "PropertyOne":1.78,
          "PropertyTwo":9.31
          },
          {
          "key":4, 
          "StaticProperty":"value4",
          "PropertyOne":1.78,
          "PropertyTwo":9.31
          },
          {
          "key":5, 
          "StaticProperty":"value5",
          "PropertyOne":1.78,
          "PropertyTwo":9.31
          }
      ]
  };  
  </code></pre>
  
  <p>The update data set would look like (remeber it will only contain the changed values):  </p>
  
  <pre><code>{
      "updates" : [ 
          { 
          "key":1,
          "PropertyOne":4.88
          },
          {
          "key":2,
          "PropertyOne":2.77,
          "PropertyTwo":3.88
          },
          {
          "key":6,
          "StaticProperty":"value6",
          "PropertyOne":7.23,
          "PropertyTwo":8.42
          } 
      ],
      "deletes" : [ 4, 5 ]
  }; 
  </code></pre>
  
  <p>As you can see the update can contain:  </p>
  
  <ul>
  <li>partial updates (id #1)</li>
  <li>multiple updates per row (id #2)</li>
  <li>no updates for existing rows (id #3)</li>
  <li>ids of deleted rows as simple array (id #4, #5)</li>
  <li>new rows (id #6)  </li>
  </ul>
  
  <p>What we need is a grid or other suggestions that qould make us able to handle <strong>all the mentioned operations</strong>.<br>
  We already have a way to make sure that the data is never corrupted (already handled on server and client side), so its really <em>just</em> about <strong>displaying the data and keeping the display up to date</strong>.</p>
  
  <p>All input is greatly appreciated.</p>