aspnet-3630-components-data-and-image-navigation-dataview-visual-elements.md
This topic describes the ASPxDataView elements visible on screen. Each section contains a screenshot, and a brief overview of the element’s function. Additionally, each topic contains a list of settings that specify the element’s layout, content and appearance.
The following visual elements are available:
A Content Area is the main element of the data view control that displays database field contents. It may contain text labels, image boxes and other child controls or HTML elements.
The table below lists the main members that affect the element’s appearance and functionality:
| Characteristics | Members |
|---|---|
| Appearance | ASPxDataViewBase.ContentStyle |
| Layout | DataViewSettings.Layout, DataViewTableLayoutSettings.RowsPerPage, DataViewTableLayoutSettings.ColumnCount, DataViewDivBasedLayoutSettings.ItemsPerPage |
| Data Item | DataViewItem.DataItem |
| Template | ASPxDataView.ItemTemplate |
A Data Item displays the data field of the bound data source in the control’s content area.
You can edit the data view control’s template at design time, or use the ASPxDataView.ItemTemplate property, to customize the DataViewItem.
The table below lists the main members that affect the element’s appearance and functionality:
| Characteristics | Members |
|---|---|
| Style | ASPxDataViewBase.ItemStyle |
| Spacing | ASPxDataViewBase.ItemSpacing |
The Empty Data Area is displayed within the ASPxDataView control when the control’s content is empty, as shown below:
The table below lists the main members that affect the element’s appearance and functionality:
| Characteristics | Members |
|---|---|
| Text | ASPxDataViewBase.EmptyDataText |
| Template | ASPxDataViewBase.EmptyDataTemplate |
| Style | ASPxDataViewBase.EmptyDataStyle |
The Loading Panel is displayed within the ASPxDataView control while waiting for a callback response, as shown below:
The table below lists the main members that affect the element’s appearance and functionality:
| Characteristic | Members |
|---|---|
| Delay | SettingsLoadingPanel.Delay |
| Visibility | SettingsLoadingPanel.Enabled |
| Text | SettingsLoadingPanel.Text |
| Image | SettingsLoadingPanel.ShowImage, SettingsLoadingPanel.ImagePosition, ASPxDataViewBase.LoadingPanelImage |
| Style | ASPxDataViewBase.LoadingPanelStyle |
A Pager element allows users to navigate through the control’s data pages. It consists of “next”, “last”, “previous”, and “first” buttons, and an indicator that displays the current page number and the total number of pages. The Pager element is placed onto a Pager Panel.
The Pager can be attached to the top, bottom or both sides of the DataView control.
The table below lists the main members that affect the element’s appearance and functionality:
| Characteristics | Members |
|---|---|
| Alignment | ASPxDataViewBase.PagerAlign |
| General Settings | ASPxDataView.PagerSettings |
| Endless Paging Mode | DataViewPagerSettings.EndlessPagingMode |
| Style | ASPxDataViewBase.PagerStyle |
A Pager Panel element is a panel to which a Pager control element is attached.
The table below lists the main members that affect the element’s appearance and functionality:
| Characteristics | Members |
|---|---|
| Style | ASPxDataViewBase.PagerPanelStyle |
| Spacing (distance to the content area) | ASPxDataViewBase.PagerPanelSpacing |
The pager includes a set of UI elements that allow end users to navigate through data. The image below shows the available UI elements.
The following table lists members that are related to the functionality and appearance of the pager UI elements.
|
Elements
|
Appearance
|
Settings
| | --- | --- | --- | |
Numeric Buttons
|
ASPxDataViewBase.PagerPageNumberStyle
|
PagerSettingsEx.ShowNumericButtons
PagerSettingsEx.NumericButtonCount
PagerSettingsEx.PageNumberFormat
| |
Current Page Number
|
ASPxDataViewBase.PagerCurrentPageNumberStyle
|
PagerSettingsEx.CurrentPageNumberFormat
| |
Separators
|
—
|
PagerSettingsEx.ShowSeparators
| |
All Button
|
ASPxDataViewBase.PagerButtonStyle
ASPxDataViewBase.PagerDisabledButtonStyle
|
ASPxDataViewBase.AllButtonPageCount
| |
Page Size Item
|
ASPxDataViewBase.PagerPageSizeItemStyle
|
PagerSettingsEx.PageSizeItemSettings
| |
Summary
|
ASPxDataViewBase.PagerSummaryStyle
|
| |
Navigation Buttons (First, Previous, Next, Last)
|
ASPxDataViewBase.PagerButtonStyle
ASPxDataViewBase.PagerDisabledButtonStyle
|
PagerSettingsEx.FirstPageButton
PagerSettingsEx.PrevPageButton
PagerSettingsEx.NextPageButton
PagerSettingsEx.LastPageButton
|