• home
  • Email: trainings@synapseindia.careers

Blogs

back

Easy Steps to Learn GridView in ASP.NET WebForms

Mar 22, 2016

GridView is one of the most usable data control for binding your whole table available into SQL Server. You can also format GridView into various built-in formats with unique styles. GridView is used in combination with SqlDataSource control for making the operation more simpler. In this article, we will display all data from primary table in first GridView and on the basis of it's data selection the data from foreign table is displayed into second GridView.  See the code below:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:myconnection %>"
SelectCommand = "select * from category">
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:myconnection %>"
SelectCommand="select * from products where cid=@cid">
<SelectParameters>
<asp:ControlParameter Name="cid" ControlID="GridView1" PropertyName="SelectedDataKey.Value" />
</SelectParameters>


</asp:SqlDataSource>
<br />
<br />
<br />
<h1>Categories Details </h1>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="cid" DataSourceID="SqlDataSource1" CellPadding="4"
ForeColor="#333333" GridLines="None" AutoGenerateSelectButton="True">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:BoundField DataField="cid" HeaderText="Category ID" ReadOnly="True"
SortExpression="cid" />
<asp:BoundField DataField="cname" HeaderText="Category Name" SortExpression="cname" />
<asp:BoundField DataField="cmf" HeaderText="Category Manufacturer" SortExpression="cmf" />
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
<br />
<br />
<h2>Product Details</h2>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
DataKeyNames="pid" DataSourceID="SqlDataSource2" BackColor="#DEBA84"
BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3"
CellSpacing="2">
<Columns>
<asp:BoundField DataField="cid" HeaderText="Category ID" SortExpression="cid" />
<asp:BoundField DataField="pid" HeaderText="Product ID" ReadOnly="True"
SortExpression="pid" />
<asp:BoundField DataField="pname" HeaderText="Product Name" SortExpression="pname" />
<asp:BoundField DataField="pcost" HeaderText="Product Cost" SortExpression="pcost" />
<asp:BoundField DataField="pdealer" HeaderText="Product Dealer"
SortExpression="pdealer" />
</Columns>
<FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
<HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
<PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
<RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FFF1D4" />
<SortedAscendingHeaderStyle BackColor="#B95C30" />
<SortedDescendingCellStyle BackColor="#F1E5CE" />
<SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>

</div>
</form>
</body>
</html>

GridView helps programmer in many forms for displaying data in tabular formats with effective selection, updation and deletion of records. You can find some more articles for other SynapseIndia Technologies from various technical blogs available.

 SynapseIndia (CEO: Shamit Khemka)