Batch editing for treegrid

This is batch editing example for a treegrid, it's similar to batch editing for grid example with few differences.

API

grid.Tree().addNodes and grid.Tree().deleteNodes are used instead of grid.addRow and grid.deleteRow methods to add and remove nodes in Treegrid.

Add new nodes

While adding new nodes, grid.Tree().addNodes method expects id of the new nodes, so we generate random id with special prefix pq_tmp which is replaced later on upon save by the actual id on the remote server.

Nodes having id with prefix pq_tmp are recognized as new nodes and are not confused with existing nodes by tracking module .

grid.Tree().addNodes([{ EmployeeID: "pq_tmp_" + Math.random(), FirstName: "new item" }])

On server side:

When row id (EmployeeID) of a new node present in addList is generated, that value is updated as parentId (ReportsTo) for its children nodes present in the same addList.

    //add multiple records in db.
    function addList($addList)
    {
        $pdo = getDBH();
        foreach ($addList as &$r)
        {
            $oldID = $r[ PRIMARYID ];
            $r[ PRIMARYID ] = addSingle($pdo, $r);
            //update parentId of child nodes.
            foreach ($addList as &$r2)
            {
                if($r2[ PARENTID ] == $oldID){
                    $r2[ PARENTID ] = $r[ PRIMARYID ];
                }
            }
        }
        return $addList;
    }

Row ID

Usually row id and parent id are hidden in the treegrid, but in this example we have kept EmployeeID ( i.e, row id ) and ReportsTo ( i.e., parent id ) columns as visible for better understanding of the process.