10

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.

nwaltham
  • 2,067
  • 1
  • 22
  • 40

1 Answers1

4

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);
zb'
  • 8,071
  • 4
  • 41
  • 68
  • Thanks - however it seems that the records that are added like that dont seem to have all the functionality. They don't have the same properties as the ones that area loaded. Effectively they cannot be saved as they don't push their own changes/creates onto dataset._changes – nwaltham Dec 17 '12 at 14:35
  • `dataset.save()` does not help ? – zb' Dec 17 '12 at 23:17
  • nope.. dataset.save pushes the changes/updates that are in dataset._changes to the backend which actually does the 'saving'. If the changes are not record in dataset._changes then they are not saved. – nwaltham Dec 18 '12 at 05:10
  • This answer is getting upvotes, but I can confirm this is not the whole story. Calling dataset.save does not result in a save (successful persistence) for items added like this - so as such - the answer does not solve the problem posed – nwaltham Dec 19 '12 at 14:02
  • I don't know this framework but from my experience with others (i.e.: ExtJS) you might need to "commit" the new rows so that they are considered by the dataset. I ran into a similar issue while migrating an application from ExtJS2 to ExtJS4. – Nick.T Dec 19 '12 at 14:29
  • I looked deeper and found that may be only way is to write own backend which will have a method to add, need to take a look to the recline sources more – zb' Dec 19 '12 at 17:43
  • Awarding the bounty and accepting the answer, as it seems to be a shortcoming in the framework for now. This is far as one can get. – nwaltham Dec 20 '12 at 11:04
  • 1
    btw if you not need some of unque recline features you can check highcharts, I saw recently very easy way for live update of the data in that lib – zb' Dec 20 '12 at 14:49