How do I append a record to a dataset in Recline JS?

Question

I am using the rather nice javascript library Recline http://okfnlabs.org/recline/ it is build around Backbone. It also uses SlickGrid.

There are quite a number of examples and of course there is the source code to have a look at too. I have got quite a long way on my own - writing my own backend and showing the data in a slickgrid view.

However one thing I cannot find in the examples is how to append a record to a dataset. I would like to bind the action to a button, so I can append an empty record on the end of the dataset, so I can then use the slickgrid view to edit the data.

The only way I seem to be able to add a record is to round trip to the server, but I don't want to have to do that, since that would involve having to post valid data since in reality I don't want blank rows in my dataset. I would like to have the possbility to add a few rows on the browser client before actually posting the data via REST to the server.

The code looks like this at the moment.

$(document).ready(function() {
var dataset = new recline.Model.Dataset({
     url: '/rest/monitors',
     backend: 'restlet',
    });

    dataset.fetch().done(function(dataset) { 



        var $el = $('#mygrid');
        var grid = new recline.View.SlickGrid({
          model: dataset,
          el: $el,
          state: {
                gridOptions: {editable: true,enableCellNavigation: true},
                columnsEditor: [
                             {column: 'monitoruntil', editor: Slick.Editors.Date },
                             {column: 'enabled', editor: Slick.Editors.Checkbox },
                             {column: 'owneremail', editor: Slick.Editors.Text},
                             {column: 'normalinterval', editor: Slick.Editors.Text}
                           ],
                columnsWidth:[{column: 'owneremail', width: 100},{column: 'url', width: 300},{column: 'lastaccessed', width:100 }]
                 }
        });
        grid.visible = true;
        grid.render();


        //Bind Save Button to a function to save the dataset

        $('#savebutton').bind('click', function() {
              //alert($(this).text());
              dataset.save();
            });

        });;

} )

With this code I can only edit and save existing records which have been delivered with the "restlet" backend.

Answer 1

It looks you looking for dataset.records.add()

try here in dev console:

var dataset = new recline.Model.Dataset({
      records: [
        {id: 0, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', title: 'first', lat:52.56, lon:13.40},
        {id: 1, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', title: 'first', lat:52.56, lon:13.40},
    ]
    });
createExplorer(dataset);
var i=2;
setInterval(function() {dataset.records.add({id: i, date: '2011-01-01', x: 1, y: 2, z: 3, country: 'DE', title: 'first', lat:52.56, lon:13.40});i++;},2000);