ASP.NET GridView Control Part 1: Getting Started, Create GridView in Web Form

The GridView data grid control is probably the most popular and flexible data grid control in the ASP.NET arsenal.  In this tutorial we will create a new GridView data grid on a web form.

Here are the steps:

1. Click on the "Design" tab in main window of Visual Studio

Visual Studio Design Surface


2. Click on the "Toolbox" tab, then expand the "Data" node, then drag the "GridView" data control to the Design surface.  The Design Surface is the big window in the middle of Visual Studio.

Visual Studio drag GridView from Toolbox to design surface

3. Click on "Toolbox" tab again, this time drag the "SqlDataSource" control to the Design Surface

SqlDataSource in Toolbox

4. Click on the ">" button next to SqlDataSource1 control, then select "Configure Data Source"
5. Click on the "New Connection" button

Configure Data Source

 6. Select your "Server name", SQL Server should pick up your database server automatically if it's on a local machine, but if it doesn't type in (local) in the "Server name" field.

SQL Server should pick up your database server automatically if it's on a local machine 

7. Click "OK"
8. A new connection has been defined in your web application

Connection string

9. Click "Next", leave the checkbox check for the option "Yes, save this connection as:", "NorthwindConnectionString"
10. Click "Next"
11. On the "Configure the Select Statement" window select "Specify a custom SQL statement or stored procedure"
Configure the Select Statement
 12. Click "Next"
13. Click on the "Query Builder" button"
 14. On the "Add Table" window select the "Categories" and "Products" table and then click "Add", then click "Close"
Add Table in Query Builder

15. In "Query Builder" the two tables and their relationships are displayed

Relationships between tables in Query Builder

16. The following into the SELECT statement window

SELECT        Products.ProductName, Products.UnitPrice, Categories.CategoryName, Categories.Description
FROM            Categories INNER JOIN
                         Products ON Categories.CategoryID = Products.CategoryID

Query Builder SELECT statement window

17. Click "OK"
18. Click "Next"
19. Click "Finish"

20. Click on the ">" button next to the GridView1 control, and for the "Choose Data Source" dropdown list chose "SqlDataSource1"

Choose a Data Source for SqlDataSource control

21. Right-click on the "Default.aspx" file then select "Set as Start Page"

Default.aspx page 

22. Press F5 to run the page, the GridView will be displayed on the browser page.

GridView products result

Source Code:  GridViewWebSite.zip  to download the zip file click on File -> Download

Comments

Post a Comment

Popular posts from this blog

SQL: GROUP BY And HAVING

Image
SQL GROUPING allows you to segregate data into groups so that you can work on it separately from the rest of the table records. Let's say you want to get the number of products in a category in the Northwind database Products table. You would write the following query: SELECT COUNT(*) NumberOfProductsByCategory FROM Products GROUP BY CategoryID The query above gives you the following results: The query gives you the number of products in each category, however it's not very useful. You don't really know what category the count is for in each record. You might want to try to change the query into something like this: SELECT CategoryID,COUNT(*) NumberOfProductsByCategory FROM Products GROUP BY CategoryID The above query is more useful the preceding one, however it only gives you the CategoryID number not the CategoryName in the Categories table. Being the perfectionist that you are you say to yourself, I can do better. "Yes, I can". I think that was a ca
Read more

Installing AdventureWorks Sample Databases from Microsoft

Image
1. Type in the following URL into your browser's address bar       http://msftdbprodsamples.codeplex.com/ 2.  Click on the "Download" button on page 3.  Click on the recommended download link 4.  Unizp the file you just downloaded 5.  Open the SQL Server Management Studio, then right click on "Databases" and then select "Restore Database" 6.  Select "Device" under "Source" 7.  Click on the "..." button, and the "Select" backup devices will appear, select "File" for "Backup media type" 8.  Click on the "Add" button, and select the "AdventureWorks2014.bak" file, then click "OK" 8.  Click "OK" on the "Select backup devices" screen 9.  Click "OK" on "Restore Database" window 10.  A message will pop up that says you have successfully restored the AdventureWorks2014 database 11.  The "AdventureWorks2014" database is now
Read more

ASP.NET MVC 5 From Scratch : Add JQuery UI Library Using NuGet

Image
In the previous blog we've added the Bootstrap library to our empty ASP.NET MVC project.  Now let's add another commonly used JQuery library to our project.  In this blog we will add the JQuery UI library to our empty project. Step-By-Step Instructions: 1. Open the empty ASP.NET MVC 5 project that you've just created 2.  Right click on the the "References" node in the "Solution Explorer", then select "Manage NuGet Packages" 3.  In the search box on the right of NuGet window type "jquery ui combined", the search result will be displayed, the package that you want to install is highlighted below.  Notice it's the third choice which is called the jQuery UI (Combined Library) 4.  Click on the "Install" button next to the "jQuery UI (Combined Library)" package. 5.  Once the JQuery UI library has been installed a green check mark is displayed, click on the "Close" button 6.  Now you should see the JQuery UI
Read more