Add row from Form and update Grid with new row selected

Suite and Optimus Suite 5
#1

Im having a grid to populate customers table from database.

I want to insert new records to the table using a form, refresh grid and the new row (with all the data inserted) to be selected in the grid.

The addRow() is been made by the following function

    function addRow() {
        var newID = grid.uid();
        grid.addRow(newID, "", grid.getRowsNum());
        grid.selectRow(grid.getRowIndex(newID), false, true, true);
        userForm = layout.cells('b').attachForm(formData);
        userForm.loadStruct('common/forms.inc.php');

        dp = new dataProcessor('common/dataCustomers.php');
        dp.init(userForm); //link grid to dataprocessor

        userForm.reset();
    }

I got the update button into a toolbar attached to the Form

formToolbar.attachEvent('onClick', function (btn) {
                if (btn == 'update') {
                    dp.sendData();
                }
                reloadGrid();
            });

And the code for reloading grid

            function reloadGrid() {
                layout.progressOn();
                grid.clearAndLoad('common/getCustomers.php');
                layout.progressOff();
            }

The problem is that i cant think any way or find any help on documentation to fix my problem. I want to change the reload code in order to handle a big amount of records so the refresh should be fast and the selection of the new row in grid to be automatic after the insert.

Any suggestions ?

#2

Anyone ?

#3

For the quick data reloading you may try to use the updateFromXml() method:
docs.dhtmlx.com/doku.php?id=dhtm … atefromxml

For the selecting the new row after after updating you may use the onAfterUpdating event.
Something like this:

dp.attachEvent("onAfterUpdate",function(sid,action,tid,xml_node){ if(action=="inserted"){ grid.updatefromXML(url,true,true,function(){ grid.selectRowById(tid,false,false,true); }) } })

#4

As i said i want to update Grid and select the new row that is been created. So onAfterUpdate is not getting the last ID of the row that was inserted by the dataProcessor and selectRowById.

I already checked the Documentation but i cant figure this out

#5

The provided code should work to the scenario you described.

In your code you are attaching the dataprocessor to the form:

  dp.init(userForm);

After you click the “update” button you send data to the server:

     dp.sendData();

calling the reloadGrid() right after that won’t work as the new data is just sending to the server, but it is not registered in the database yet. For this you need to to use the onAfterUpdate event which calls after the data is really updated. That event holds an attribute with the new id of the added record registered in the database, after the reloading the grid that new row will have that new id.
So you just need to reload the grid’s data and select the new added row.

dp.attachEvent("onAfterUpdate",function(sid,action,tid,xml_node){ // update is finished if(action=="inserted"){ // if a new record was added grid.updatefromXML(url,true,true,function(){ // reload the grid's data grid.selectRowById(tid,false,false,true); // select a new added row }) } })

#6

how to add blank row to dhx grid(suite 6.0) supporting angular?

#7

Please, try to use the add() method
https://docs.dhtmlx.com/suite/data_collection__api__add.html

grid.data.add({id:"new_id"})
1 Like
#8

Will it add new row at middle in between two already existing rows and other rows should shift their indexes/id accordingly?

#9

I’ve replied to you here:


with an example.
add() method has the index parameter allowing to set the position of a new row