Browse DevX
Sign up for e-mail newsletters from DevX


A Not-So-Quick Tour of the Web DataGrid Control

The DataGrid control works as a multi-column, fully templated grid of data. It provides a built-in infrastructure for many common tasks including paging, sorting, and editing. To exploit the DataGrid to the fullest, you need to write a relevant quantity of code—mostly handlers for the various events fired during the control's life cycle. Don't be fooled by the fact that you normally write a lot of glue code with data grids. What you get in return for that effort really pays off.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

ata-bound controls play a key role in the development of ASP.NET applications. Data-driven controls allow you to associate their whole interface, or individual properties, with one or more columns of a .NET-compliant data source. In this article, I'll delve into the depths of an extremely versatile data-bound control that is a fixed presence in any real-world ASP.NET application—the DataGrid control. I'll focus on the key programming aspects of the control, including data binding, column mapping, paging, and sorting.

The DataGrid server control renders a multi-column, fully templated, data-bound grid and provides a highly customizable, Excel-like user interface. Bound to a DataGrid, the data source renders through an HTML table interspersed with HTML elements and hyperlinks. You can customize the contents of the cells in each column to some extent using system-provided, as well as, user-defined templates. The DataGrid supports various types of data-bound columns, including text, templated, and command columns. The data binding mechanism is nearly identical to that of other ASP.NET controls. You bind the data source using the DataSource property, but no data will actually load until you call the DataBind method.

You can set most of the DataGrid features declaratively in the page layout; the same set of attributes, though, are also available programmatically through the properties and methods of the DataGrid class.

Simple Data Binding
The following line of code is enough to enable grid functionality in a Web page. It declares a server-side instance of the DataGrid control and assigns it the name of grid. All of the code associated with the page, refers to the DataGrid using the specified ID. The ASP.NET runtime takes care of creating and initializing such an instance for each request.

<asp:DataGrid runat="server" id="grid" />

Once you've placed the control onto the page, you bind it to the data source and display the resulting HTML code. The following code binds a DataTable to the grid.

void Page_Load(object sender, EventArgs e) { // Run the query and get // some data to display DataTable data = ExecuteQuery(cmdText, connString); // Bind the data to the grid grid.DataSource = data; grid.DataBind(); } DataTable ExecuteQuery(string cmdText, string connString) { SqlDataAdapter adapter; adapter = new SqlDataAdapter(cmdText, connString); DataTable data = new DataTable(); adapter.Fill(data); return data; }

Although effective in terms of retrieval and display, you probably would not use this code in real applications because as Figure 1 shows, the resulting DataGrid control doesn't implement necessary features and the interface is too plain.

Thanks for your registration, follow us on our social networks to keep up-to-date