ASP.net framework provides the most feature data control in the form of DataGrid. You can display the records from the database table. You can also implement some additional functionalities such as sorting, paging, editing records etc.
i can automatically display the records from the datasource, you can bind the datasource to the DataGrid control.
Let’s say we have the following table:
ID | PayDate | Description | PayAmount |
---|---|---|---|
3 | 9/5/2012 12:00:00 AM | BANK DEPOSIT | 13768.00 |
4 | 9/6/2012 12:00:00 AM | CASH | 2000.00 |
5 | 9/5/2012 12:00:00 AM | BANK DEPOSIT | 15000.00 |
11 | 9/1/2012 12:00:00 AM | CASH | 12000.00 |
14 | 9/3/2012 12:00:00 AM | CASH | 1300.00 |
21 | 9/7/2012 12:00:00 AM | CASH | 16500.00 |
26 | 9/4/2012 12:00:00 AM | BANK DEPOSIT | 7745.00 |
28 | 9/1/2012 12:00:00 AM | BANK DEPOSIT | 5000.00 |
You can draw a DataGrid as :
<asp:GridView ID="GridView1" runat="server" />
Yoca can also control RowStyle, FooterStyle, PagerStyle, SelectedRowStyle, HeaderStyle, cellspacing, cellpadding and other properties and events , see the full code to generate the above DataGrid control:
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="Navy" DataKeyNames="Id, clientname" BorderStyle="Solid" BorderWidth="1px" CellPadding="4" OnRowDeleting="GridView1_RowDeleting" OnRowEditing="GridView1_RowEditing" AutoGenerateColumns="False" OnRowCancelingEdit="GridView1_RowCancelingEdit" OnRowUpdating="GridView1_RowUpdating" AutoGenerateDeleteButton="True" AutoGenerateEditButton="True"> <RowStyle BackColor="White" ForeColor="#330099" HorizontalAlign="Center" CssClass="Hi" /> <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" /> <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" /> <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" /> <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" /> <Columns> <asp:TemplateField HeaderText="ID"> <ItemTemplate> <asp:Label ID="lblID" runat="server" Text='<%# Eval("id") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="ClientName"> <ItemTemplate> <asp:Label ID="lblClient" runat="server" Text='<%# Eval("ClientName") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="PayDate"> <ItemTemplate> <asp:Label ID="lblpaydate" runat="server" Text='<%# Eval("paydate") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Description"> <ItemTemplate> <asp:Label ID="lbldescription" runat="server" Text='<%# Eval("description") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="PayAmount"> <ItemTemplate> <asp:Label ID="lblamount" runat="server" Text='<%# Eval("PayAmount") %>'></asp:Label> </ItemTemplate> <EditItemTemplate> <asp:TextBox ID="txtamount" runat="server" Text='<%# Eval("PayAmount") %>'></asp:TextBox> <asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="invalid amount" Display="Dynamic" ControlToValidate="txtamount" MaximumValue="1000000" MinimumValue="0" Type="Double"></asp:RangeValidator> </EditItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>
Bind the DataGrid from datasource
The following code is for binding the dataset to DataGrid1. DataGrid1 is the id of the DataGrid control.
protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindDataGrid(); } } private void BindDataGrid() { dataset ds=nothing; // Write code here your code to get the ds GridView1.SelectedIndex = 0; GridView1.DataSource = ds.Tables[0]; GridView1.DataBind(); }
Editing items in DataGrid Control
Now you can edit items in a DataGrid by adding EditItemTemplate to the DataGrid column and associating GridView1_RowCancelingEdit, GridView1_RowEditing,GridView1_RowDeleting and GridView1_RowUpdating commands events. In our example we are adding the EditItemTemplate in the last column ( ‘PayAmount’), see in the above.
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e) { GridView1.EditIndex = e.NewEditIndex; BindGrid(); } protected void GridView1_RowDeleting(object sender, GridViewDeleteEventArgs e) { string _id = GridView1.Rows[e.RowIndex].Cells[1].Text; string str = "delete from table where id = " + _id; // execute the delete statement with your sql connection BindGrid(); } protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e) { GridView1.EditIndex = -1; BindGrid(); } protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e) { Label _id = (Label)GridView1.Rows[e.RowIndex].FindControl("lblID"); TextBox txtName = (TextBox)GridView1.Rows[e.RowIndex].FindControl("txtamount"); // write code for update rows such as : string str = "update Getpayment SET payamount=" + txtName.Text + " where id = " + _id.Text; // execute the update statement with your sql connection GridView1.EditIndex = -1; BindGrid(); }