Start Building Professional
Web Apps Today

Add row / delete row buttons for subgrid

Hello.

Normally when I create a grid, I have something like the html below. Whereas I have a div container and I create grid for div container. Then I have a "add new row" and "delete row" button in next table row.

<table>
<tr style="background-color: white;">
<td colspan="2">
<div id="divCompactionTestResultsGrid" width="800px" height="150px" style="background-color:white;overflow:hidden"></div>
</td>
</tr>
<tr style="background-color: white;">
<td align="right" colspan="2">
<input type="button" value="Add Row" onclick="addRow('ct');" class="button1"/>
<input type="button" value="Remove Row" onclick="removeRow('ct');" class="button1"/>
</td>
</tr>
</table>

How can I do something similar for subgrid? Since subgrid is created automatically. Do I need to attach a toolbar to subgrid in order to associate add / delete row buttons? I would like to have the buttons with the subgrid and not somewhere else on page.

You can attach footer to the sub grid and place in it any html you need. 

Thanks,  Can I see in one of your examples that grids can have context menus.  Can I also attach context menu to subgrid, then I can just use that for my add/delete row?

>> Can I see in one of your examples that grids can have context menus
Please check example here http://dhtmlx.com/docs/products/dhtmlxGrid/samples/context_menu/
>>Can I also attach context menu to subgrid, then I can just use that for my add/delete row
To attach context menu to the sub grid you can use following code:

mygrid.attachEvent("onSubGridLoaded",function(subGrid,rowId,rowInd){
   subGrid.enableContextMenu(menu);
   //menu - reference to the previously created dhtmlxMenu
});