This article aims to get you acquainted with the very basics when working with the WebDataGrid. The below examples demonstrate how to quickly bind the grid to some data, customize a few columns and change the look and feel of the grid.
Begin by adding a ScriptManager to the page. The ScriptManager control is required as it helps load and process the script files that are served to the page to support the grid. (Note that the WebDataGrid features a pay-to-play architecture. Pay-to-play refers to a model where script files required to support advanced features are only served to the client if the individual behaviors are enabled on the grid.)
After installing the NetAdvantage toolset and adding the controls to the toolbox, you may drag the WebDataGrid on to the design surface. Your page should now look something like this:
There are a number of approaches available to provide data to the WebDataGrid. For simplicity’s sake, this example binds a number of instances of a ‘Person’ class to the grid in code-behind.
Note: The above example uses nBuilder to quickly generate instances of the Person class for demonstration purposes. Data in your application will likely come from some sort of business logic layer, service or even perhaps directly from a data access layer.
The next step in the process is to define columns in the grid. The WebDataGrid does support automatically generating columns, but this feature is often used for prototypes and demos while in more robust applications and explicit definition of columns is required.
To setup the columns in the grid begin by clicking on the grid in the designer and then clicking on the small arrow at the top right of the control. This button launches the smart tag. When the smart tag appears, click on the Edit Columns link.
Clicking on the link will launch the Edit Grid Columns editor where you can manage the columns in the grid. The first action required is to un-check the Auto-generate fields checkbox at the bottom of the dialog. Disabling this feature ensures that only explicitly defined columns are rendered in the grid.
There are two types of columns: BoundFields and TemplateFields. The BoundField is an easy to use field definition that operates in a fill-in-the-blank type of fashion. All you must do is provide the field with the required information and the data from your data source will render to the grid. The image below has the minimum items needed for a bound field to work properly.
TemplateFields offer more flexibility in the layout and contents of data that is rendered in a column. By contrast, BoundFields only render data as defined in the dialog. You may quickly convert a BoundField to a TemplateField by selecting the field in the editor and clicking on the Convert selected Grid Field into a Template Field link.
Once you have created a number of columns in the grid, you can run the page and you should get a grid that looks something like the grid pictured below:
The NetAdvanatage toolset ships with a wide array of style sets available to help you change the look and feel of the WebDataGrid. To apply a style set click on the grid in the Visual Studio designer and then navigate to the Properties window. Scroll to the bottom of the properties for the grid and locate the StyleSetName entry. When you click on the drop down list you are presented with a number of options to style the grid. You may either:
Applying the default or an existing style is a simple matter of selecting the title from the grid. Should you choose to import a pre-defined style you can select the Import option in the list. When you select Import the Import StyleSets dialog appears where you may choose to import a style to your application.
In this example the Office2007Silver set is selected and applied to the grid. When you run the page again the grid should look something like the following screenshot.