Saving changes in SlickGrid

javascript jquery jquery-ui grid slickgrid

19,521

Solution 1

The trick to saving the SlickGrid is to realise that the grid will update the array of data that you supplied when creating the grid as the cells are edited.

The way I then save that is to include a form with a submit button and a hidden field below the grid. I trap the submit event and use the JSON plugin to serialise the array and place it in the hidden field. On the server side you'll receive a JSON string which you can deserialise, loop through and write to the database.

Assuming your array of data is called "data" like the samples, the following should work for you:

<form action="?" method="POST">
  <input type="submit" value="Save">
  <input type="hidden" name="data" value="">
</form>
<script>
  $(function() {
    $("form").submit(
      function() {
        $("input[name='data']").val($.JSON.encode(data));
      }
    );
  });
</script>

Solution 2

For completeness, a minimal example demonstrating the usage of onCellChange, referred to in Jim OHalloran's post.

For more information, and to see all events that can be utilized similarly to onCellChange, see comments at the beginning of the SlickGrid source.

<head>
  <!-- boilerplate omitted ... -->
  <script type="text/javascript">
      var grid;

      var options = {
          enableCellNavigation: true,
          enableColumnReorder: false,
          autoEdit: false,
          editable: true,
      };

      var columns = [
          {id: "item_key", name: "Key",   field: "item_key" },
          {id: "value",    name: "value", field: "value",   editor: LongTextCellEditor }
      ];

      var data = [
          {item_key: "item1", value: "val1"},
          {item_key: "item2", value: "val2"},
      ];

      $(document).ready(function () {
          grid = new Slick.Grid($("#myGrid"), data, columns, options);

         //Earlier code for earlier version of slickgrid
         // grid.onCellChange = function (currentRow, currentCell, item) {
         //      alert(currentRow+":"+currentCell+"> key="+item['item_key']+", value="+item['value']);

          //Updated code as per comment.
          grid.onCellChange.subscribe(function (e,args) { 
                 console.log(args); 
             });

          };
      });
  </script>

</head>
<body>
  <div id="myGrid" style="height:10em;"> </div>
</body>

Solution 3

While I'm personally using the JSON serialize and submit in a hidden field approach from my previous answer another approach could be to trap the onCellChange event fired by SlickGrid after a cell value has changed and make an Ajax call to the server to save the changed value. This will result in lots of small Ajax requests to the server (which may increase load) but updates the server as soon as changes are made.

19,521

Author by

Rubans

Updated on June 04, 2022

Comments

Rubans almost 2 years

HI, I'm looking at SlickGrid and I can see example on how to edit the cell, however do I save these changes. I have yet to find an example that tells me how to do this.
Rubans almost 14 years

HI Jim, that's the idea I have gone with. Thought there maybe some other implementations but guess not. That's fine, thanks.
Rubans almost 14 years

I have implement an example that way but I would prefer your first example where batch updates are processed but I can see the benefits of both, definetly great to see there's at least someone else outhere using it ;)
Jim OHalloran over 13 years

I prefer the batch method myself, but I thought I'd add the other idea for completeness :)
EarlyPoster over 13 years

Much better and more reliable than the batch method imo.
Hardik Patel about 12 years

Hi friends, After receiving json on serverside, how do you know what are the chages made in grid. i mean you are deleting all olddata and saving newdata to the database.
Jim OHalloran about 12 years

If you're doing the Ajax request from the onCellChange event, then it's safe to assume everything is a change. If you're using my other approach, then you can either load the old data and determine what's changed, or just update all records regardless.
Solsys about 12 years

The API for this method has changed slightly: grid.onCellChange.subscribe(function (e,args) { console.log(arguments); }); Args is an object with the cell, row, the grid object, and the edited item.
randomizertech about 11 years

This in just bringing me a blank grid after I click the save button. What am I doing wrong?
Marko over 10 years

@Iclark Can you explain how would I target a specific cell for a db update? Since your data is basically a key value pair where the key must match the column field key value I don't see how I can provide a unique ID of my cell element so that I can match that element to the database entity? How Can I pass the unique ID of my cell element to where when I do DB update I update only element from the cell that has changed and not the entire grid?
Marko over 10 years

@JimOHalloran Can you explain how would I target a specific cell for a DB update? Since SlickGrid's data is basically a key value pair where the key must match the column field key value I don't see how I can provide a unique ID of my cell element so that I can match that element to the database entity? How Can I pass the unique ID of my cell element to where when I do DB update I update only element from the cell that has changed and not the entire grid? I hate the idea of updating everything in the grid when only 1 cell changes...
Jim OHalloran over 10 years

@iclark's code sample should point you in the right direction here. The onCellChange event receives some arguments that indicate what cell was just updated, so it shouldn't be necessary to give each cell a unique id.
user14761301 over 10 years

good one. I used an implementation of javascript hashtable to collect the rows modified (mojavelinux.com/articles/javascript_hashes.html)
user5670895 almost 8 years

Just want to add that using the browser default JSON.stringify should be just fine these days. There's no need to go the jQuery plugin route unless you need to support some really old browsers.
Jim OHalloran almost 8 years

Thanks, yeah, there shouldn't be any need to use jQuery to JSONify that now.