C# and VB Project: A Tutorial Using Data Sets, Table Adapters, WebForms, Controls, File Upload, Excel Import
Section 4: Auto Formatting a Web Form GridView
by Nannette Thacker

Our "View Excel Data" button will display the uploaded Excel Spreadsheet data within a GridView. In this section, we will learn how to add and Auto Format a GridView in our WebForm. We will also learn how to create and add a Cascading Style Sheet to our project.

Our WebForm GridView Control

We're now ready to create the WebForm GridView that will be displayed when the user selects the "View Excel Data" button. Go to the Data tab in the Toolbox and drag a GridView control into your "PanelView" panel.



Once the Gridview is in your WebForm, you may view it from the Design view. Hover your mouse over the Gridview and you'll notice a little right arrow box will appear on the top right corner of the GridView. Click the right arrow and you'll see several menu options. Select the "Auto Format" hyper link. This allows you to set control formatting properties.



The AutoFormat dialog box will appear and you may "Select a Scheme" on the left. As you select a scheme, a sample of the scheme will display on the right. I've selected "Rainy Day" for my example.



Once you apply the scheme, you may view the source code and see the styles added to your GridView: 

<asp:GridView ID="GridViewExcel" runat="server" BackColor="White" 
                BorderColor="#999999"
                BorderStyle="None" BorderWidth="1px" CellPadding="3" 
                GridLines="Vertical">
                <FooterStyle BackColor="#CCCCCC" ForeColor="Black" />
                <RowStyle BackColor="#EEEEEE" ForeColor="Black" />
                <PagerStyle BackColor="#999999" ForeColor="Black" 
                    HorizontalAlign="Center" />
                <SelectedRowStyle BackColor="#008A8C" Font-Bold="True" 
                    ForeColor="White" />
                <HeaderStyle BackColor="#000084" Font-Bold="True" 
                    ForeColor="White" />
                <AlternatingRowStyle BackColor="#DCDCDC" />
            </asp:GridView>
You may easily edit any of these colors to create your own custom look and feel.

Ultimately, when we select the "View Excel Data" button, you will see the data from the uploaded spreadsheet displayed in the Gridview. With the "Rainy Day" selection, our GridView will look like this:



Adding a Cascading Style Sheet

Let's add a stylesheet to our project. Right click our Project in the Solution Explorer and click to "Add New Item." Let's select a "StyleSheet" and just leave it with the name "StyleSheet.css."

We're going to simply add one style to our sheet: 

body
{
    font-family: Arial, Tahoma, Verdana;
    font-size: 13px;
    line-height: 1.5em;
}
Now when we select our "Upload Excel Spreadsheet" button, it looks like this:



Our GridView will also use this new CSS style without having to add it to our properties:



If you want to make further adjustments, you may go to the Design Mode, Select the View menu item, Properties Window menu item to bring up the Properties for the GridView. Notice in the GridView you may add a CssClass for an existing CSS Style Sheet.

But we're getting ahead of ourselves, because we still need to add our functionality for our "View Excel Data" button. So let's continue with Section 5: Bind the Excel Data to a GridView using an OleDbDataAdapter .

May your dreams be in ASP.NET!

Nannette Thacker

C# and VB Project: Importing an Excel Spreadsheet to a Database Using Data Sets and Table Adapters:

Introduction: C# and VB Project: A Tutorial Using Data Sets, Table Adapters, WebForms, Controls, File Upload, Excel Import
Section 1: Creating Our Project, Database and Tables
Section 2: WebForm: Table, Label, and Panel Controls
Section 3: FileUpload Control and Functionality
Section 4: Auto Formatting a Web Form GridView
Section 5: Bind the Excel Data to a GridView using an OleDbDataAdapter
Section 6: Data Access Layer DataSet TableAdapters
Section 7: TableAdapter Select and Insert Queries with Parameters
Section 8: Using an OleDbDataReader to Retrieve Our Data
Section 9: Using our TableAdapters, DataTables and Intellisense

Download the ZIP files:

C#: ShiningStarCExcel.zip
VB: ShiningStarVBExcel.zip

About the Author

Nannette Thacker is an ASP.NET web application developer and SQL Server developer. She is owner of the ASP.NET consulting firm, Shining Star Services, LLC in Kansas City. Nannette specializes in ASP Classic to ASP.NET conversions and custom Membership Provider solutions as well as existing or new ASP.NET development. Nannette's many articles on ASP.NET, ASP Classic, Javascript and more may be read at http://www.shiningstar.net. You may also view her http://weblogs.asp.net/nannettethacker/ web blog.