"Add New Row" Dialog

One of the ways to add new row data is to use the Add Row Dialog functionality of the grid. This brings a popup dialog (modal or not, this is configurable) with row details which you can then edit and submit to the grid.

The Add New Row dialog will only show "Editable" columns. By default, columns are not editable. To make them editable, set the Editable property of the respective column to true. This can be done either declaratively in the ASPX, e.g.

<trirand:JQGrid ID="JQGrid1" runat="server" OnRowAdding="JQGrid1_RowAdding">         
   <Columns>      
                <trirand:JQGridColumn DataField="CompanyName" Editable="true" />
                <trirand:JQGridColumn DataField="Phone" Editable="true" />
                <trirand:JQGridColumn DataField="PostalCode" Editable="true" />
                <trirand:JQGridColumn DataField="City" Editable="true" />                
   </Columns>           
</trirand:JQGrid>

or with code in the code-behind, e.g.

JQGridColumn column = JQGrid1.Columns.FromDataField("CompanyName");
if (column != null)
   column.Editable = true;

Then, also set the ToolbarSettings.ShowAddButton property to true - this will show the edit (plus) button in the toolbar. You can see that in the screenshot on top (bottom left).

<trirand:JQGrid ID="JQGrid1" runat="server" OnRowAdding="JQGrid1_RowAdding">         
   <ToolBarSettings ShowAddButton="true" />
</trirand:JQGrid>

When the user edits the data and sends it to the server, jqGrid fires the RowAdding event. You can hook custom code in this event and using the event arguments RowData you can find the respective row in your datasource and modify it.

<trirand:JQGrid ID="JQGrid1" runat="server" OnRowAdding="JQGrid1_RowAdding">         
</trirand:JQGrid>

You can customize almost any feature of the edit dialog via the AddDialogSettings collection. Here is a full list of all possible customization and sample settings:

   <trirand:JQGrid ID="JQGrid1" runat="server" OnRowAdding="JQGrid1_RowAdding">         
       <AddDialogSettings 
                 CancelText="Cancel Add"
                 Caption="Add a new row"
                 ClearAfterAdding="true"
                 CloseAfterAdding="true"
                 Draggable="true"
                 Height="400"
                 Width="300"
                 TopOffset="20"
                 LeftOffset="40"
                 LoadingMessageText="Adding a new row"
                 Modal="true"
                 ReloadAfterSubmit="true"
                 Resizable="false"
                 SubmitText="Add new Row"
            />
   </trirand:JQGrid>