Modify the style of ASP. NET DataGrid

ASP. NET DataGrid Style

ASP. NET DataGrid allows you to modify the style and layout of component cells, which can be linkedItemCreatedEvent. This event is triggered every time the control processes the subitem header, footer, row, and page navigation. The receiving type of the event handler isDataGridItemEventArgsYou can extract the type of the project from this parameter.

A summary row is a DataGrid row, and its type can beItemOrAlternatingItem. Therefore, when writing the ItemCreated handler, make sure that the corresponding cell is processed only when the item type is correct. The following list summarizes the required code.

 
 

  
  
public void ItemCreated(Object sender, DataGridItemEventArgs e)  
  
  
{  
  
  
    // Get the type of the newly created item  
  
  
    ListItemType itemType = e.Item.ItemType;  
  
  
    if (itemType == ListItemType.Item ||   
  
  
    itemType == ListItemType.AlternatingItem)   
  
  
    {  
  
  
        // Get the data bound to the current row  
  
  
        DataRowView drv = (DataRowView) e.Item.DataItem;  
  
  
    if (drv != null)  
  
  
    {  
  
  
        // Check here the app-specific way to detect whether the   
  
  
        // current row is a summary row  
  
  
        :  
  
  
    }  
  
  
    }  
  
  
}  
 
 

If the created item is a DataGrid item or alternate item), you can useDataItemTo access the data bound to the row. Based on the type of the object to which the DataGrid is bound,DataItemThe property points to different row objects. If the mesh is boundDataView, Will getDataRowViewObject. If the source usesDataTableObject.DataRowObject. In this example application, I useDataViewThe object is filled with a grid. Later, the data object of a single row becameDataRowViewObject.

After you have a data row object, you can apply application-specific rules to determine whether the row is a summary row. In this example, the MyOrderID field of the summary row is set to-1.

  
  

   
   
if ((int) drv["MyOrderID"] == -1)  
   
   
{  
   
   
   // Modify style and layout here.   
   
   
   //    --> Set the background color to white and use bold font  
   
   
   e.Item.BackColor = Color.White;   
   
   
e.Item.Font.Bold = true;      
   
   
} 
  
  

The DataGrid now looks as shown in.

DataGrid style: A summary row that is displayed in bold and has a white background.

The row in the DataGrid is actually only one row in the table. Similarly, you can use it to delete cells and adjust other cells. Let's take a look at how to present a summary row using a single cell that spans all existing columns.

  
  

   
   
if ((int) drv["MyOrderID"] == -1) 
  
  

DataGrid style: A summary row with a custom Layout

In the three original cells, the first two are deleted, and the third currently contains index 0) are correctly aligned and spans the width of the External table. If you want to display custom text on the summary line, you need to prepare for other problems.

Suppose you need to add some text to comment on the subtotal, and at the same time, let the subtotal and a single order amount appear in the same column. In this case, you only need to delete a cell.

  
  

   
   
e.Item.Cells.RemoveAt(1);         // remove the order # cell  
   
   
e.Item.Cells[0].ColumnSpan = 2;      // span the custID cell  
   
   
e.Item.Cells[1].HorizontalAlign = HorizontalAlign.Right;  
   
   
e.Item.Cells[0].Text = "Total is"; 
  
  

The result of this Code is as follows. As you can see, it is not exactly the same as your expected results. The text you just set does not exist in the first cell of the summary row. What's going on?

DataGrid style: A summary row with a modified custom Layout

The important thing to consider here is,ItemAndAlternatingItemAll rows are bound to rows. Their explicit text is only inOnItemDataBoundEvents. As you may have guessed,OnItemDataBoundThe event is triggered after this item is created. ThereforeItemCreatedAny text assigned to a cell is modified silently by an event later. You can setOnItemDataBoundProperty to hookOnItemDataBoundEvent.

 
 

  
  
< asp:DataGrid id="grid" runat="server"   
  
  
AutoGenerateColumns="false" 
  
  
:  
  
  
OnItemCreated="ItemCreated" 
  
  
OnItemDataBound="ItemDataBound" 
  
  
OnPageIndexChanged="PageIndexChanged"> 
  
  
The structure of the code for   
  
  
                                                                                                                                                                                                                    ItemDataBound is shown below.  
  
  
public void ItemDataBound(Object sender, DataGridItemEventArgs e)  
  
  
{  
  
  
DataRowView drv = (DataRowView) e.Item.DataItem;  
  
  
if (drv == null)  
  
  
    return;  
  
  
 
  
  
if ((int) drv["MyOrderID"] == -1)  
  
  
{  
  
  
if (drv["MyCustomerID"].ToString() == "(Total)")  
  
  
{  
  
  
    e.Item.BackColor = Color.Yellow;  
  
  
    e.Item.Cells[0].Text = "Orders total";  
  
  
}  
  
  
else  
  
  
    e.Item.Cells[0].Text = "Customer subtotal";  
  
  
}  
  
  
}  
 
 

The top line is drawn on the yellow background, which displays another text in other summary rows. The final DataGrid is shown as follows.

DataGrid style: The final DataGrid

A good mix of SQL code and ASP. NET technology with specific application dose can achieve effective Web database applications. The DataGrid Control is a cutting-edge tool that can be used to build perfect and powerful Web applications for its programming functions, in addition, it supports more user-defined levels.

1. ASP. NET DataGrid Control Data grouping operation
2. What is the ASP. NET DataGrid Control: Fully templated Grid
3. Comparison between ASP. NET's GridView and DataGrid controls
4. . NET beginner's Guide: easily customize the DataGridView Control
5. C # Some common operations on the DatagridView