• North American Sales: 1-800-231-8588
  • Global Contacts
  • My Account
Infragistics Infragistics
Menu
  • North American Sales: 1-800-321-8588
  • My Account
    • Sign In/Register
  • Design & DevelopmentDesign & Develop
    • Best Value
      Infragistics Ultimate The complete toolkit for building high performing web, mobile and desktop apps.
      Indigo.Design Use a unified platform for visual design, UX prototyping, code generation and application development.
    • Web
      Ignite UI for Angular Ignite UI for JavaScript Ignite UI for React Ultimate UI for ASP.NET Indigo.Design
    • Desktop
      Ultimate UI for Windows Forms Ultimate UI for WPF
      Prototyping
      Indigo.Design
    • Mobile
      Ultimate UI for Xamarin Ultimate UI for iOS Ultimate UI for Android
    • Automated Testing Tools
      Test Automation for Micro Focus UFT: Windows Forms Test Automation for Micro Focus UFT: WPF Test Automation for IBM RFT: Windows Forms
  • UX
    • Indigo.Design Desktop Collaborative prototyping and remote usability testing for UX & usability professionals
    • Indigo.Design A Unified Platform for Visual Design, UX Prototyping, Code Generation, and App Development
  • Business Intelligence
    • Reveal Embedded Accelerate your time to market with powerful, beautiful dashboards into your apps
    • Reveal App Empower everyone in your organization to use data to make smarter business decisions
  • Team Productivity
  • Learn & Support Support
    • Help & Support Documents
    • Blogs
    • Forums
    • Product Ideas
    • Reference Applications
    • Customer Stories
    • Webinars
    • eBook & Whitepapers
    • Events
  • Free Trials
  • Pricing
    • Product Pricing / Buy Online
    • Renew Existing License
    • Contact Us
ASP.NET
  • Product Platforms
  • More
ASP.NET
ASP.NET WebDataGrid 101: Fill the Grid with Data and Change the Look and Feel
  • Blog
  • Files
  • Wiki
  • Mentions
  • Tags
  • More
  • Cancel
  • New
ASP.NET requires membership for participation - click to join
  • ASP.NET
  • Accessing Extra Data in Data Bound Controls
  • ASP.NET Performance - A Place To Start
  • +Building an Ajax Master/Detail Page with the WebDataGrid
  • Building WebParts with NetAdvantage ASP.NET Controls
  • Data Binding the WebDataGrid to Common Data Sources
  • Getting Started with NetAdvantage ASP.NET
  • HTML5 Mode and Other Goodness in the WebRating Control
  • Implementing WebDataGrid Client Side Search
  • Introduction to the Infragistics Web Drag and Drop Framework
  • Learn to Build a WebDataGrid Custom Pager
  • Understanding Script Combining
  • Using ADO.NET to Perform CRUD Operations with the WebDataGrid
  • WebDataGrid 101: Fill the Grid with Data and Change the Look and Feel
  • +WebDataGrid : Import data from Excel & Export to Excel, PDF or XPS
  • WebDataGrid Client-Side CRUD
  • WebDataGrid DataViewState vs ViewState
  • WebDataGrid Validation

WebDataGrid 101: Fill the Grid with Data and Change the Look and Feel

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.

The Basics

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:

Binding to Data

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.

Customize Columns

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:

Changing the Look and Feel

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:

  • Select the default style
  • Select an existing style
  • Import a new style

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.

Resources

  • Download the code
  • Watch the video
  • WebDataGrid
  • 101
  • Share
  • History
  • More
  • Cancel
Related
Recommended