Author Topic: Problem adding data in remote  (Read 2422 times)

engmag

  • Newbie
  • *
  • Posts: 4
    • View Profile
Problem adding data in remote
« on: October 31, 2016, 07:29:34 am »
Hi,

I am trying the http://paramquery.com/pro/demos/editing_batch but needs to run from remote paging instead of local. I understand that the following two lines have to be changed:
grid.goToPage({ rowIndx: rowIndx });
grid.editFirstCellInRow({ rowIndx: rowIndx });

I managed to change the first so it actually goes to the last page of the pageModel.
grid.goToPage({ page: grid.option('pageModel.totalPages') });

However I need to click on the add button again in order to add the row. Ant it is not in focus so I need to scroll to the end of the list to actually see the added line.

So my question is - can I change also the second line of code above in order to get focus of the added line?

Many thanks in advance!

BR

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6263
    • View Profile
Re: Problem adding data in remote
« Reply #1 on: November 01, 2016, 11:39:11 am »
grid.editFirstCellInRow({ rowIndx: rowIndx }); scrolls the view in addition to editing the first editable cell in row.

As you are using remote paging ( asynchronous process ), and you want to edit the cell automatically as soon as remote data is loaded, editFirstCellInRow needs to be called when remote data is loaded (load event).

Code: [Select]
load: function(){
var grid = this;
setTimeout( function(){
grid.editFirstCellInRow({rowIndxPage: 0});
});
},
« Last Edit: November 01, 2016, 11:42:09 am by paramquery »

engmag

  • Newbie
  • *
  • Posts: 4
    • View Profile
Re: Problem adding data in remote
« Reply #2 on: November 09, 2016, 01:11:37 am »
Thank you! Current toolbar code looks as follows. I understand now that the edit shall take place after load event. But I still don't understand how to modify "New Product" button event below to actually do this; when using remote. Please advice.

            toolbar: {
                items: [
                    { type: 'button', icon: 'ui-icon-plus', label: 'New Product', listener: function () {
                            //append empty row at the end.                           
                            var rowData = { ProductID: 34, UnitPrice: 0.2 }; //empty row
                            var rowIndx = grid.addRow( { rowData: rowData, checkEditable: true });
                            grid.goToPage({ rowIndx: rowIndx });
                            grid.editFirstCellInRow({ rowIndx: rowIndx });                       
                        }
                    },
                    { type: 'separator' },
                    { type: 'button', icon: 'ui-icon-disk', label: 'Save Changes', cls: 'changes', listener: function () {
                            saveChanges();
                        },
                        options: { disabled: true }
                    },
                    { type: 'button', icon: 'ui-icon-cancel', label: 'Reject Changes', cls: 'changes', listener: function () {
                            grid.rollback();
                            grid.history({ method: 'resetUndo' });                       
                        },
                        options: { disabled: true }
                    },
                    { type: 'button', icon: 'ui-icon-cart', label: 'Get Changes', cls: 'changes', listener: function () {
                            var changes = grid.getChanges({ format: 'byVal' });
                            if( console && console.log) {
                                console.log(changes);
                            }                           
                            alert("Please see the log of changes in your browser console.");                       
                        },
                        options: { disabled: true }
                    },
                    { type: 'separator' },
                    { type: 'button', icon: 'ui-icon-arrowreturn-1-s', label: 'Undo', cls: 'changes', listener: function () {
                            grid.history({ method: 'undo' });
                        },
                        options: { disabled: true }
                    },
                    { type: 'button', icon: 'ui-icon-arrowrefresh-1-s', label: 'Redo', listener: function () {
                            grid.history({ method: 'redo' });                       
                        },
                        options: { disabled: true }
                    }
                ]
            },