ItemView control
We need to display user a detailed view about our items in a
collection, such as the details about your product in a shopping application. The
MS AJAX client-side control ItemView provides this
feature for you, just like the ASP.NET server control DetailsView
behaviors, but it runs totally on the client side. The ItemView
class and ListView class both inherit from base class—Sys.UI.Data.DataControl,
which provides the basic functionalities of a DataControl,
including many additional properties.
There are several client-side controls in namespace Sys.Preview.UI.Data,
such as DataControl (the parent control of ItemView and ListView), DataNavigator,
ItemView, ListView, XSLTView, etc.
Here, we merely concentrate on two controls—ItemView and ListView. In practice, as the
ASP.NET server control GridView is to ObjectDataSource, so is the MS AJAX
client-side control ItemView (or ListView) to DataSource. And also, there exist
similar data bindings between the two couples. The following table lists the
commonly used and self-defined properties with their short explanations in
column two.
|
Property name
|
Description
|
|
id
|
Identifying the ItemView control.
|
|
canMoveNext
|
There’s a next record you can move to if true;
or else false.
|
|
canMovePrevious
|
There’s a previous record you can move to if true; or else false.
|
|
data
|
It holds all the Sys.Preview.Data.DataTable objects loaded
into current ItemView control—these
DataTable objects are obtained from the background by the DataSource control.
|
|
dataIndex
|
Identifies the current record index.
|
|
dataItem
|
Returns the current record based on dataIndex.
|
|
Length
|
Returns the count of all records.
|
|
itemTemplate
|
This template is used for rendering a single item in the
list (e.g., use a <tr> tag). It must be contained in the
layoutTemplate.
|
|
EmptyTemplate
|
This template is used for rendering an empty message if
there’s no item in the data source, or the ItemView is still waiting for the
data from server.
|
Commonly used methods in ItemView
|
Method name
|
Description
|
|
addItem
|
adds a new item to the data collection on the client side,
and this operation will make the dataset dirty
|
|
deleteCurrentItem
|
deletes current item from the data collection on the
client side, and this operation will also make the dataset dirty
|
|
moveNext
|
moves to the next record, and this operation will again t rigger
the data binding for the controls defined inside ItemTemplate
|
|
movePrevious
|
moves to the previous record, and this operation will again
trigger the data binding for the controls defined inside ItemTemplate
|
Please note all the operations above are at client side,
which just modify the client side data. So if you want to commit the changes to
server, you have to call the methods in DataSource.
Obviously, the ItemView is always used to display one record
on the client side, while the ListView control discussed next is for listing
records within a range satisfying some condition.
ListView control
In most of the current web applications you often have to
find a way to show user a table of data. Just as the ASP.NET GridView server
control does, MS AJAX ListView control provides the
same behavior on client side in the AJAX way. Although you can use traditional
ASP.NET 2.0 GridView server control and then simply add an MS AJAX UpdatePanel
to let your GridView work in the AJAX way, but this is with low efficiency and
not the ‘pure’ MS AJAX way. You may need to use the full client-side MS AJAX control
ListView to make things better. Do not be afraid, this
is just as simple as the GridView with similar concepts such as ItemTemplate,
but keep in mind there’s no IntelliSense provided by the IDE, and so you must
pay more attention on typing the code.
Author's Note: In the new Visual
Studio "Orcas" JavaScript Intellisense is supported for MS AJAX.
Commonly used properties in ListView
|
Property name
|
Description
|
|
Id
|
Identifes the ListView control.
|
|
canMoveNext
|
There’s a next record you can move to if true;
or else false.
|
|
canMovePrevious
|
There’s a previous record you can move to if true; or else false.
|
|
Data
|
Same as that of ItemView
|
|
dataIndex
|
Identifying the current record index.
|
|
dataItem
|
Returning the current record based on dataIndex.
|
|
Length
|
Returning record count.
|
|
alternatingItemCssClass
|
Specify the CSS class for alternating items.
|
|
layoutTemplate
|
This template is used for rendering the list container
(e.g., use a <table> tag), header (e.g., use a <thead> tag) and
footer. You must specify a layoutTemplate for a ListView. This template must
contain an itemTemplate, and may contain a separatorTemplate.
|
|
itemCssClass
|
Specify the CSS class for items.
|
|
itemTemplate
|
This template is used for rendering a single item in the
list (e.g., use a <tr> tag). It must be contained in the
layoutTemplate.
|
|
EmptyTemplate
|
This template is used for rendering an empty message if
there’s no item in the data source, or the ListView is still waiting for the
data from server.
|
|
selectedItemCssClass
|
Specify the CSS class for selected items.
|
|
seperatorCssClass
|
Specify the CSS class for separators.
|
|
seperatorTemplate
|
This template is used for rendering a separator between
items in the list (e.g., use a <hr> tag). It must be contained in the
layoutTemplate.
|
|
itemTemplateParentElementID
|
This property defines the parent element of itemTemplate
and separatorTemplate. So the items and separators can be repeated in this
element (e.g., use a <tbody> tag).
|
As with ItemView, to use a ListView, you have to provide MS
AJAX some templates above to let it know how to render your content. In
practice, these templates are generally corresponding to some special HTML
elements, such as "<div>", so be careful.
Indeed, enough of theory debate now. So, let's roll up our
sleeves and write a simple example!
