How to Play with DataGrid Control - Editing
(Page 4 of 7 )
How it Works
To perform the above picture task, you have to use one of DataGrid property, i.e., DataKeyField in the source dataset as DocTId. This useful feature of the list controls means that we don’t have to include the primary key of the source dataset in our columns – even if we need to access it to perform data updates. For any row, we can access the primary key from this collection, as you will see later in this example.
The next three attributes in the opening DataGrid tag are used to specify the names of the event handlers that will be executed in response to the user clicking the edit, update and cancel links that the EditCommandColoumn will generate for us. Finally, we set the AutoGenerateColoumns property to False as we want to create our own column structure for the grid.
<asp:DataGrid id="dgNonApproveList" runat="server"
OnPageIndexChanged="MyDataGrid_Page"
OnCancelCommand="dgNonApproveList_CancelCommand"
OnUpdateCommand="dgNonApproveList_UpdateCommand"
OnEditCommand="dgNonApproveList_EditCommand"
DataKeyField="DocTId"
AllowSorting="True"
AutoGenerateColumns="false">
Because we have turned off automatic generation of the columns, we must specify the columns that we want to appear. We include a BoundColoumn that displays values from the DocTId column in our DataSource, a custom TemplateColoumn that displays the Title, followed by another BoundColoumn that displays the CheckBox for selecting individual row as well as we have inside the TemplateColoumn <HeaderTemplate> in which we have to define an HTML check box control for group selection. OnClick event of HTML checkbox, call the JavaScript function “SelectAll(CheckBoxControl)”. That function will allow you select all rows in a displayed DataGrid or deselect all rows in displayed DataGrid.
Firstly, the automatic editing feature displays two calendar controls instead of a simple text value in all the columns that are not read only. We just specify an <ItemTemplate> to be used to display the column values in normal mode, and an <EditItemTemplate> that defines the control to be used in edit mode:
<asp:EditCommandColumn ButtonType="LinkButton" UpdateText="Update!" CancelText="Cancel!" EditText="Edit!"></asp:EditCommandColumn>
As you can see from the code, the last column is the EditCommandColoumn we mentioned earlier. While there are plenty of attributes that we can apply to this column to control the formatting. We have just specified the text we want to use for the three commands that can appear in this column. And that completes the definition of our DataGrid control.
Next: Handling Item Edit Events >>
More ASP.NET Articles
More By Mayank Gupta
/ 53 
