Check documentation for the latest version of dhtmlxSuite Step 6. Provide Adding/Removing Records DHTMLX Docs

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:
  1. Add 2 buttons on the page - "Add Book " and "Remove Book ":

    "index.html" file

        <div id="mygrid_container" style="width:600px;height:150px;"></div>
        <button onclick="addBook()">Add Book</button>    <button onclick="removeBook()">Remove Book</button>     <script>
    </script> </body>
  2. Specify the "addBook() " function to provide a possibility to add new rows to the grid:

    "index.html" file

    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.
  3. Specify the "removeBook() " function to provide a possibility to remove rows from the grid:


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

Back to top