Step 6. Provide Adding/Removing Records

Now we will make our grid a bit dynamic and provide a functionality for adding and removing books' records.

At first, we will add 2 buttons on the page: “Add Book” and “Remove Book”.
Then, we will specify handler functions for the onclick event of buttons. The onclick event fires when the user clicks a button.

To know more on the topic, read the Rows Manipulations article.

To provide a possibility to add, delete records in the grid:

Add 2 buttons on the page - "Add Book " and "Remove Book ":

"index.html" file

<body> 
    <div id="mygrid_container" style="width:600px;height:150px;"></div>
    <button onclick="addBook()">Add Book</button>    <button onclick="removeBook()">Remove Book</button>     <script>        dhtmlxEvent(window,"load",function(){...});
    </script>
</body>

Specify the "addBook() " function to provide a possibility to add new rows to the grid:

"index.html" file

dhtmlxEvent(window,"load",function(){...});
function addBook(){    var newId = (new Date()).valueOf();               //creates a unique row id     mygrid.addRow(newId,"New book,0,0",mygrid.getRowsNum());   //adds a new row    mygrid.selectRowById(newId);                //selects the newly created row }

The addRow method takes 3 parameters: the row's id, cells' values and row's index.

Specify the "removeBook() " function to provide a possibility to remove rows from the grid:

"index.html"

dhtmlxEvent(window,"load",function(){...});
function removeBook(){    var selId = mygrid.getSelectedId();       //gets the Id of the selected row    mygrid.deleteRow(selId);            //deletes the row with the specified id}