Purpose
WebGrid is a control that supports complex data binding. In other words, WebGrid can display an entire list of objects simultaneously. WebGrid has been designed in such a way that many different use cases can easily be met. This is accomplished through our rich object model with properties that expose a fine level of granular control over the look, feel, and functionality.
A rich eventing model exposes many key "before" and "after" events that, when consumed, can allow you to elegantly accomplish their programming tasks. Performance is also engineered into the WebGrid control through optimized rendering of HTML and JavaScript, as well as other mechanisms designed to load data on demand (AJAX Load-On-Demand) or in pages (Paging). Overall, you can use WebGrid to allow the Create, Read, Update, and Delete operations on your objects.
Function
WebGrid ships with a loaded feature set. Popular features such as Sorting, Paging, Filtering, Column Moving, and Outlook GroupBy allow you to easily set a series of intrinsic properties, therefore turning on these features. WebGrid allows you to work with hierarchical data models by rendering all of the entities simultaneously in a nested, indented fashion.
Data can be edited in place without requiring a postback to place the rows into edit mode. For a more "form-like" end-user data editing experience, you can use the Row Template to present the end user with edit fields that are arranged in a fashion that is friendlier for data editing purposes. With a rich client-side object and event model, developers that code in JavaScript can easily accomplish programming tasks without having to write server-side code. This reduces or even eliminates full-page postbacks. Through intrinsic AJAX support, WebGrid itself can make asynchronous callbacks to achieve functionality such as Paging, Loading Data On Demand, Sorting, and even Filtering.
WebGrid is a rich control with lots of functionality that is also easy to learn and intuitive to discover.
Style Inheritance Hierarchy
WebGrid can be styled in one of several different ways. You can set properties on each of the various elements that compose WebGrid such as Rows, Columns, Cells or you can use the AppStylist application and centrally style all elements of your NetAdvantage powered Web Application, or you can also use Cascading Style Sheets and associate various CSS Classes with the various WebGrid elements.
The diagram below illustrates how WebGrid inherits styling information in a hierarchical fashion. In other words, you can choose to set a style that is higher in the object model and that style can cascade down to lower levels and overridden in the lower levels if additional properties are set. If styles that represent one kind of object are set at a higher level and styles that represent another kind of object are set at a lower level, it is possible to merge these styles. Style merging means that the style information from a higher level object can be combined with the style information from a lower level object so that a new style is created. Understanding the Style Inheritance hierarchy illustrated in this diagram will allow you to effectively and efficiently get the look that you are after.
