Grid View Column Element guide, UI Control for ASP.NET AJAX, C#, VB.NET, setting header, grid items, and footer, contains sorting, grouping, reordering and filtering

GridView Column Element in ASP.NET AJAX

Home > How to > Grid Columns Elements

The Kettic Data GridView Control uses the Data Grid Column objects to represent columns. The Kettic Data Grid Column is the base class of all types of grid columns. To generate columns for Data Grid control, we can use either automatic column generation based on the data source or C# code to add columns. The Kettic Data Grid Control provides a template with the AutoAddColumns property to apply each mode. We leave the default value as true to automatically generate the columns from data source. When we use this Data Grid control with other controls, we might need to add columns in C# code.
As you know, the most commonly used grid view column type is: checkbox column, combobox column, button column, date column, textbox column, radio column and so on. There are so many gridview column templates to select to make your ajax grid looks special.

In this page, we will introduce to you the basic consisting elements of a Grid column. Please read the following sections to learn more about it.

There is a header, a range of items and a footer in column.

Header

The web grid header, which contains title information of each column, is on the top of Grid column. The default value of "ShowHeader" property is "True", so the header is always appear when you create or add a new column. If you want to hide the asp.net grid header, just define this property to "False".

With the help of header, you can do the following operations. You can define the these attributes in design time property windows, or coding it using C# in the runtime programmatically.

Sorting webgrid column data by changing "AllowSorting" property to "True".
Grouping grid view column data by changing "ShowGroupPanel" property to "True".
Reordering datagridview columns by changing "ClientSettings.AllowColumnsReorder" property to "True".
Resizing asp.net grid columns by changing "ClientSettings.Resizing.AllowColumnResize" property to "True".

We also provide header context menu to allow users to operate columns, too. In the menu list, you can click each feature button, then the datagrid will redraw dynamically following your definition.

Ascending, descending and original order sorting are all supplied. You can choose Ascending order to sort all the datas in the grid view from A to Z.
Grouping and ungrouping are both support. If you operate on grouping the gridveiw data, the data will split to several groups, and each group owns the feature you defined.
Showing or hiding the columns through the selecting or unselecting the column name. While unselect one column name such as "ID", then the ID column will hidden.
Filtering the column data on two conditions are both matched. This make you view the certain information you wanted. For example, if you input date time since a weeks ago to now, the data grid view will only show the latest one week information in the column.

Besides the properties above, we also provide some basic properties to you. What's more, if you want to freeze the left column in the web grid view, just set the freeze porperty to True. And we provide free online demo for resizing the gridview column, if you have interest, please have a try.

HeaderText, this property is used to determine the text string for column heading.
HeaderAlignment, this property is able to customize the alignment of the header to top left, top center, top right, middle left, middle center, middle right, bottom left bottom center, and bottom right.
UniqueName, this property will give the column a unique name to identify the column in all grids
FieldName, this property is used to connect the column with the underlying data.
MinimizeWidth, this property is used to determine the minimum width of the column.
MaxWidth, this property is used to determine the maximum width of the column
TextAlignment, this property is used to align the text of columns. It is able to set the alignment of text to top left, top center, top right, middle left, middle center, middle right, bottom left bottom center, and bottom right

Items

Items are the most important part of columns, showing column data clearly. And each column can display data through different formats. We provide rich grid column templates for you, such as: HyperLink column, Image column, DropDown column, Numeric column, Rating column and so on. For example, if one column data is time value, you can set "DataType" to "DataTime", and then this column data is dynamically displaying as date time. In additional, the date time format is also allowed to change, you can set the format to long time date, short time date, or any other format you want.

Footer

Be similar to column header element, footer element is on the bottom of the Grid. But it not provides operation like sorting, grouping, filtering etc. The footer is most used to show information about the column, such as gridview create time, owner, company name and location, or something else.

In addition, if aggregate is using in the column, it will display in the footer automatically.