Grid View Style guide, UI Control for ASP.NET AJAX, C#, VB.NET, setting tooltip, css, skin

GridView Style in ASP.NET AJAX

Home > How to > Grid Style

The appearance of Grid directly determines its feel and look. To help users customize the appearance of grid in the most direct and flexible way, the grid control provided several ways to specify the its layout and performance.

Grid Skins and CSS

As we know, the skin of the grid view, which has two main elements, image and Cascading Style Sheets (CSS), is directly responsible for how the grid look and what feel it brings to the viewers.
Grid component contains a number of pre-defined skin styles and users can easily use these existing embedded skins by defining the value of the Skin property to the name of target skin style.
Of course, you are also allowed to use your own customized skin. Before offering you the detailed guidance of customizing the grid skin, we need to mention one point that you need to define an empty value to the Skin Property and set the EnableEmbeddedSkins property to False.
Now we will show you how to use your own skin to grid view. Just following the steps below:

Add the new CSS file to your project.
Drag and drop the CSS file from the Project Explorer onto your Web page.
Set the EnableEmbeddedSkins property of the PerNavigationBar to False.

Row Appearance

In grid view, there are two types of rows: Normal Item and Alternating Item.
Normal Item: the odd rows of the grid. Set ItemStyle property to customize normal rows appearance and performance.
Alternating Item: the even rows of the grid. Set AlternatingItemStyle property to customize alternating rows appearance and performance.
Look at the example below:
ASPX code:


<kettic:KaxGrid runat="server" ... />
<AlternatingItemStyle BackColor="Orange" ... />
<ItemStyle BackColor="White" ... />

C# code:


KaxGrid KaxGrid1 = new KaxGrid();
KaxGrid1.AlternatingItemStyle.BackColor = Color.Orange;
KaxGrid1.ItemStyle.BackColor = Color.White;

Grid Item Tooltips

When you hover the grid item with mouse, maybe you want to show the tooltips to make clear the meaning of current item. And there are two types of tooltip for the grid items. One is for GridHeaderItem, the other is for GridDataItem.
Here we will introduce you how to add tooltips in the ItemCreateEvent.
C# code:


protected void KaxGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridHeaderItem)
    {
        GridHeaderItem headerItem = e.Item as GridHeaderItem;
        foreach (GridColumn column in KaxGrid1.MainView.RenderColumns)
        {
            if (column is GridBoundColumn)
            {
                if (KaxGrid1.AllowSorting)
                    (headerItem[column.UniqueName].Controls[0] as LinkButton).ToolTip = column.UniqueName;
                else
                    headerItem[column.UniqueName].ToolTip = column.UniqueName;
            }
        }
    }
    else if (e.Item is GridDataItem)
    {
        GridDataItem gridItem = e.Item as GridDataItem;
        foreach (GridColumn column in KaxGrid1.MainView.RenderColumns)
        {
            if (column is GridBoundColumn)
            {
                gridItem[column.UniqueName].ToolTip = "SupplierId: " + gridItem.OwnerTableView.DataKeyValues[gridItem.ItemIndex]["SupplierId"].ToString() + "; Column: " + column.UniqueName;
            }
        }
    }
}