title: Auto refreshing grid and being able to update part of data within the grid
body: <p>I have currently have a Gridview in which it lists a set of items with just the headings and 3 buttons like so:</p>
  
  <p><img src="https://i.stack.imgur.com/bzpBZ.png" alt="enter image description here"></p>
  
  <p>The user can then click on the title and it will expand the row down to show everything in full:</p>
  
  <p><img src="https://i.stack.imgur.com/3hFIJ.png" alt="enter image description here"></p>
  
  <p>Which is done by just some JavaScript and toggling between some divs within the Gridview row. The user can change click the buttons to update the database and change its status and also add some notes which are held in another Gridview within the row.</p>
  
  <p>It is working in the fact that it does what it needs to, just not particuarly smoothly. The problem I have at the moment is that because of Postbacks it is refreshing the whole grid every time, losing its state so if they have a row expanded that will go back up again if they click any of the buttons or add a note. What I would like to know is if there is a way that I can do some interaction between the page so that it keeps its current views, but at the same time be able to update the database and reflect changes in the grid and if they have a row expanded to leave it that way. Another on the wish list would be so that if a new record is added, that it will automatically be added to the list. This is currently using ASP.Net web forms and I imagine I'm going to need to be going alot down some sort of JQuery route?</p>
  
  <p>Any help or pointers will be much appreciated. </p>
  
  <p><strong>Edit - Some code</strong></p>
  
  <p>So I've started from the scratch and it so it will load the top contents wanted. What I thought would be the easiest way to be able to check that something is expanded or not is to save a flag to the db for that user and that task which I can call upon when I build the data which I do in my ASP.net code behind. I have got it saving the data and if I manually refresh the page it shows the changes, but for some reason I cant seem to get it so that it saves to the db and re-runs the load of the top tasks to show if something has been shown/hidden. The second function just doesn't seem to run? </p>
  
  <p><strong>HTML/JS</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(window).load(function ($) {
              loadTaskTops();
          });
  
  function loadTaskTops() {
              $.ajax({
                  type: "POST",
                  url: "LoadAT.aspx/LoadTaskTop",
                  data: "{}",
                  contentType: "application/json; charset=utf-8",
                  dataType: "json",
                  success: function (r) {
                      $("#Content").empty();
                      $("#Content").append(r.d);
                  }
              });
  }
  function expandDetails(requestID, userName) {
              expandDetails2(requestID, userName);
              loadTaskTops();
          }
  
  
          function expandDetails2(requestID, userName) {
              //alert('RequestID: ' + requestID + ' Username: ' + userName);
              $.ajax({
                  type: 'POST',
                  contentType: "application/json; charset=utf-8",
                  url: 'LoadAT.aspx/markAsExpanded',
                  data: "{'requestID':'" + requestID + "', 'userName':'" + userName + "'}",
                  async: false,
                  success: function (response) {
                      requestID.val('');
                      userName.val('');
                      alert("Record Has been Saved in Database");
  
                  },
                  error: function ()
                  { console.log('there is some error'); }
  
              });
          }
      &lt;/script&gt;
  
  &lt;div id="Content"&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>It is saving the record to the database by running the expandDetails2, but it doesn't want to do anything after that. It doesnt show any success, or if I try and add .done() with an alert afterwards, still nothing.
  Thanks</p>