Users must be able to add new records into a tabular grid (for example, adding a sales contact). Your application already provides sales contact information in a tabular fashion.
Using the WebGrid control you would either enable AllowAddNewDefault on the WebGrid's DisplayLayout (enabling rows to be deleted from all bands) or enable the AllowAddNew property on individual Bands of the WebGrid's Bands collection. In hierarchical WebGrids, each level of depth is represented by a Band object that defines the schema and characteristics of all rows forming row islands at that depth in the grid. A special region of the WebGrid will appear featuring buttons corresponding to the Band into which a new row can be inserted. You can customize the appearance of this region and its buttons through the AddNewBox property on the DisplayLayout and individual Band objects.
In lieu of (or in addition to) the AddNewBox, you can specify an AddNewRow with custom-designable style properties on the WebGrid's DisplayLayout or individual Band object. This causes a permanent empty row template to appear at the top or bottom of the WebGrid (or child row island if inserting into a child Band). Users can enter values into the AddNewRow template and have them inserted as a new row at that Band's level within the WebGrid control.
You can exercise greater control (perhaps triggering the insertion of a row from another element of your Web page's user interface such as a checkbox column or a tool bar button) by calling the client-side Javascript functions the WebGrid supports for inserting rows. The Javascript igtbl_addNew() function will insert a single row into an instance of the WebGrid and a specified Band index. You can then locate the newly added CSOM Row object in the CSOM Rows collection to set initial values on its cells. You can also handle a client-side event, BeforeRowInsert, so that your event handler may cancel a user's attempt to add a row at a certain location if that operation must not be allowed.
Another solution is to use the WebNavBar control together with the WebGrid control, tying the WebNavBar to the WebGrid through setting the WebNavBar’s GridID property to the UniqueID of the WebGrid control. WebNavBar exposes an Extension buttons collection (you can make its Navigation buttons collection not Visible if you do not require its navigational features) with an Insert button. You can customize the imagery and appearance of the Insert button, and handle the insertion event to perform any additional custom processing such as updating other parts of your Web page UI.