[Dojo-interest] dgrid with REST dstore - new row, put data

Jean-Claude Hujeux jchujeux at gmail.com
Tue Feb 16 03:55:23 EST 2016


My suggestions:

#1: try :

    restStore.add({/* I tried inserting data here, but it seems 
    unnecessary. */})/.then(function(){////grid.refresh(keepScrollPosition: true);////})/;

#2: instead of:   self.grid.collection.put(self.value); // does not seem
to send the correct data (#2), try :
        /grid.save().then(function(){//
//                //whatever you wish to do once changed data on the
grid has been saved into grid.collection//
//       });
/ 
    you may not need self.value at all: grid keeps track of all changes
in grid.dirty.  What grid.save() does is send all those changes back to
grid.collection (and then for any cell that has changed and on any row
or column).

    See here
<https://github.com/SitePen/dgrid/blob/v1.0.0/doc/components/core-components/OnDemandList-and-OnDemandGrid.md>for
explanations on refresh / save / dirty.

#3: as said in post on Feb 1st, imho this is not do-able. Indeed it has to do with focus: when you set an 'onedit' value for the column, the column editor becomes shared for all cells of the column, and then it shows up when you focus in one cell, and disappears when you focus out. 


Rgds,
jc

ps1: You might be able to achieve #3 by providing your own column.renderCell(), which would verify that you are on the row that you are currently editing and if this is the case, would return the dom construct that "mimics" the column editor widget, including the cell's current value. See here
<https://github.com/SitePen/dgrid/blob/v1.0.0/doc/components/core-components/Grid.md>for renderCell explanation

ps2: maybe you could even use the shared editor instance for the column, returning grid._editorInstances[column.field]).domNode in that custom renderCell() ... (?) 


Le 16/02/2016 03:41, Simon Walter a écrit :
> Hi everyone,
>
> I am making a simple table with dgrid and dstore. Thanks for the help so 
> far. There are few things I do not understand how to do, however.
>
> 1. How do I add a new row to the grid? I am using a Rest dstore with the 
> Trackable mixin. I can see that when the data does not contain an 'id', 
> it will send a POST request to the server. If it does contain an 'id' it 
> will use PUT. So I have programmed my server to accept a blank POST 
> request and insert a new row into the database and then return the 
> values of that row with initial values to be changed and then saved by 
> the user. However, still no new row is added to the grid. I've found 
> some emails about this, but they are outdated and I think I am trying 
> the wrong things.
>
> 2. I would like to be able to save changes to the server. I tried using 
> .put(data), but somehow the changed data is not sent to the server - 
> only the old values. The second time I save (.put), it sends the new 
> data. The third time I save, it sends nothing. I think maybe I have not 
> set up the how the dgrid and dstore communicate correctly. Ideally, even 
> if there were no changes, I would still like that row sent back to the 
> server.
>
> 3. I would like to click an edit button, which is on each row, and have 
> that enable all the editor dijits on that row. I have it working for 
> one, and then when I move to the next one, the previous does not hold 
> it's edit state. I think it has something to do with it losing focus. So 
> maybe the .edit method is not the right thing to use here.
>
> Here is my code with comments where things go wrong:
> ---
> require([
> 'dojo/_base/declare',
> 'dgrid/OnDemandGrid',
> 'dstore/RequestMemory',
> 'dstore/Rest',
> 'dstore/Trackable',
> 'dgrid/Editor',
> 'dijit/Toolbar',
> 'dijit/form/Button',
> 'dijit/_WidgetBase',
> 'dijit/ConfirmDialog',
> 'dojo/domReady!',
> ], function(declare, OnDemandGrid, RequestMemory, Rest, Trackable, 
> Editor, Toolbar, Button, _WidgetBase, ConfirmDialog)
> {
>
>      var toolbar = declare([_WidgetBase],
>      {
>          value: null,
>          buildRendering: function()
>          {
>              var self = this;
>              this.inherited(arguments);
>              self._toolbar = new Toolbar({});
>
>              var saveButton = new Button({
>                  label: "Save",
>                  iconClass: 'dijitEditorIcon dijitEditorIconSave',
>                  showLabel: false,
>                  onClick: function()
>                  {
>                      self.grid.collection.put(self.value); // does not 
> seem to send the correct data (#2)
>                      editButton.set('disabled', false);
>                      saveButton.set('disabled', true);
>                      delButton.set('disabled', true);
>                  }
>              });
>
>              var delDialog = new ConfirmDialog({
>                  title: "Please Confirm",
>                  content: "Are you sure you want to delete this item?",
>                  style: "width: 300px",
>                  rowId: 0,
>                  onExecute: function()
>                  {
>                      self.grid.collection.remove(delDialog.rowId);
>                  }
>              });
>
>              var delButton = new Button({
>                  label: "Delete",
>                  iconClass: 'dijitEditorIcon dijitEditorIconDelete',
>                  showLabel: false,
>                  onClick: function()
>                  {
>                      delDialog.rowId = self.value.id;
>                      delDialog.show();
>                  }
>              });
>
>              var editButton = new Button({
>                  label: "Edit",
>                  iconClass: 'dijitEditorIcon dijitEditorIconWikiword',
>                  showLabel: false,
>                  onClick: function()
>                  {
>                      editButton.set('disabled', true);
>                      saveButton.set('disabled', false);
>                      delButton.set('disabled', false);
> self.grid.edit(self.grid.cell(self.grid.row(self.value.id), 'name'));
>                      // prev field is no longer in edit mode (#3)
> self.grid.edit(self.grid.right(self.grid.cell(self.grid.row(self.value.id), 
> 'name')), 1);
>                  }
>              });
>
>              saveButton.set('disabled', true);
>              delButton.set('disabled', true);
>              self._toolbar.addChild(editButton);
>              self._toolbar.addChild(saveButton);
>              self._toolbar.addChild(delButton);
>              self.domNode.appendChild(self._toolbar.domNode);
>          },
>          _setValueAttr: function(value) {
>              this.value = value;
>          },
>          _getValueAttr: function() {
>              return this.value;
>          },
>          destroy: function() {
>              this._toolbar.destroy();
>              this.inherited(arguments);
>          }
>      });
>
>      var Table = declare([OnDemandGrid, Editor]);
>      var Store = declare([Rest, Trackable]);
>      var restStore = new Store({target: '/url', rangeStartParam: 
> 'start', rangeCountParam: 'count'});
>      var grid = new Table({collection: restStore}, 'gridContainer');
>      var columns = [
>              {
>                  field: 'id',
>                  label: 'ID',
>                  editor: 'text',
>                  editOn: 'dblclick',
>                  sortable: true,
>              },
>              {
>                  field: 'name',
>                  id: 'name',
>                  label: 'Name',
>                  editor: 'text',
>                  editOn: 'dblclick',
>                  sortable: true,
>              },
>              {
>                  field: 'code',
>                  label: 'Code',
>                  editor: 'text',
>                  editOn: 'dblclick',
>                  sortable: true,
>              },
>              {
>
>                  label: 'Actions',
>                  sortable: false,
>                  editor: toolbar,
>                  editorArgs: {grid: grid}
>              }
>          ];
>      grid.set('columns', columns);
>
>      var newButton = new dijit.form.Button({
>          label: "Add",
>          iconClass: "dijitEditorIcon plusIcon",
>          name: "add",
>          onClick: function()
>          {
>              // does not add a new row to the grid (#1)
>              restStore.add({/* I tried inserting data here, but it seems 
> unnecessary. */});
>          }
>      });
>      newButton.placeAt("buttonContainer");
>
> });
> ---
>
> If it seems like I am doing something stupid, please do let me know.
>
> Thanks,
>
> Simon

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mail.dojotoolkit.org/pipermail/dojo-interest/attachments/20160216/12c48e24/attachment.htm 


More information about the Dojo-interest mailing list