Adding items to a grid is best accomplished using form script. In this example, I will use a demo form that contains a grid of restaurant inspections, where each inspection has the name of the restaurant, the date it was inspected, and the sanitation rating the restaurant received. The field ID for this grid is Inspected_Restaurants. 

Notice that in addition to the grid field itself, there is a field for each desired data point. In this case, since each grid entry should contain a restaurant name, inspection date, and sanitation rating, there is a field for each of those. This is where the data is entered, and then when the Add Inspection hotspot is pressed, that data is added to the grid in the form of one new row. This is done through the following form script code: 

const REST_COL_NAME = 0;
const REST_COL_DATE = 1;
const REST_COL_RATING = 2;

// Triggered when the form is opened
function EH_AfterOpen() {
    _form.gridColumnData("Inspected_Restaurants",["Restaurant Name","Inspection Date","Sanitation Rating"]);
}

// Triggered when a hotspot is pressed
function EH_HotspotPressed(fieldName) {
    if (fieldName == "Add_Inspection"){
        addInspection();
    }
}

//adds a new inspection to the Inspected Restaurants Grid and then clears entry fields
function addInspection(){
    var rowID = _form.addGridRow("Inspected_Restaurants");
    _form.editGridCellValue("Inspected_Restaurants", rowID, REST_COL_NAME, _form.getValue("Restaurant_Name"));
    _form.editGridCellValue("Inspected_Restaurants", rowID, REST_COL_DATE, _form.getValue("Inspection_Date"));
    _form.editGridCellValue("Inspected_Restaurants", rowID, REST_COL_RATING, _form.getValue("Sanitation_Rating"));

    _form.setValue("Restaurant_Name","");
    _form.setValue("Inspection_Date","");
    _form.setValue("Sanitation_Rating","");
}

The first step is to create the column names for the grid. This can be done in the AfterOpen event handler, using the _form.gridColumnData method. The first argument is the grid for which you want to name the columns, and the second is an array of strings with the desired column names. Next, we use the HotspotPressed event handler to ensure that when the appropriate hotspot is pressed, we take the necessary steps to add the data to our grid. Finally, to add a row, we first call _form.addGridRow, passing in the grid we wish to add to as the argument. Then, we use the _form.editGridCellValue method to change the column data of the newly added row to the appropriate data. This method takes four arguments, the first is the grid name, the second is the row id, the third is the column id, and the fourth is the desired data in that cell. Finally, it is good practice to clear the data entry fields after an entry is added to the grid so that they are available for more entries to be added. 

Please see the following link for a video explaining this process in more detail:

The form used within the video is attached to this article and can be downloaded below.