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" OnRowEditing="JQGrid1_RowEditing"> <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.ShowEditButton property to true - this will show the edit (pencil) button in the toolbar. You can see that in the screenshot on top (bottom left).
<trirand:JQGrid ID="JQGrid1" runat="server" OnRowEditing="JQGrid1_RowEditing"> <ToolBarSettings ShowEditButton="true" /> </trirand:JQGrid>
When the user edits the data and sends it to the server, jqGrid fires the RowEditing event. You can hook custom code in this event and using the event arguments RowData and RowKey you can find the respective row in your datasource and modify it.
<trirand:JQGrid ID="JQGrid1" runat="server" OnRowEditing="JQGrid1_RowEditing"> </trirand:JQGrid>
You can customize almost any feature of the edit dialog via the EditDialogSettings collection. Here is a full list of all possible customization and sample settings:
<trirand:JQGrid ID="JQGrid1" runat="server" OnRowEditing="JQGrid1_RowEditing"> <EditDialogSettings CancelText="Cancel Editing" Caption="Edit Dialog" CloseAfterEditing="true" Draggable="true" Height="200" Width="300" TopOffset="50" LeftOffset="20" LoadingMessageText="Currently Editing Data" Modal="true" ReloadAfterSubmit="true" Resizable="true" SubmitText="Submit" /> </trirand:JQGrid>