Sys.UI.DataView Class
Uses a template to render a view of a data source. The data can be set directly through the data property or obtained by fetching data from a data provider.
Namespace: Sys.UI
Inherits: Sys.UI.Control
Implements: Sys.UI.ITemplateContextConsumer
var MyDataView = new Sys.UI.DataView(element);
Constructors
Name |
Description |
|---|---|
When called from a derived class, initializes a new instance of the DataView control. |
Members
Name |
Description |
|---|---|
Adds or removes a command event handler to the DataView control. |
|
Adds or removes a fetchFailed event handler to the DataView object. |
|
Adds or removes a fetchSucceeded event handler to the DataView object. |
|
Adds or removes an itemRendered event handler to the DataView object. |
|
Adds or removes an itemRendering event handler to the DataView object. |
|
Adds or removes an rendered event handler to the DataView object. |
|
Adds or removes a rendering event handler to the DataView object. |
|
Aborts the current fetch request, if a fetch request is in process. |
|
Disposes the DataView object. |
|
Retrieves data from the provider using the dataProvider property. |
|
Finds the TemplateContext object that corresponds to the rendered template that contains the specified DOM element. |
|
Called when the component is initialized. |
|
Called when an event is raised by the raiseBubbleEvent method. |
|
Raised when a command is raised. |
|
Called when the DataView control is unable to fetch data. |
|
Called when the DataView control has successfully fetched data. |
|
Called after each item that is rendered. |
|
Called before each item that is rendered. |
|
Called when a new set of data is about to be rendered by the DataView control. |
|
Forces the rendering of the current data to be refreshed. |
|
Called when beginUpdate and endUpdate are called. |
|
Gets or sets a Boolean value that indicates whether data should be retrieved immediately from a data source when the page loads and when either the provider is changed or the fetch operation is changed. |
|
Gets an array of TemplateContext objects within the DataView object. |
|
Gets or sets the bound data (JavaScript object or array) to be rendered using the template. |
|
Gets or sets the data provider from which to fetch data. |
|
Gets or sets the operation to use when the data provider is queried. |
|
Gets or sets a dictionary of parameters to pass to the data provider when a query is performed. |
|
Gets or sets a string that indicates the HTTP method. The default value is POST. |
|
Gets or set the selected index that the selectedIndex property will default to when data is loaded. |
|
Gets a Boolean value that indicates whether the data is being retrieved. |
|
Gets or sets the DOM element or the ID of the DOM element next to which the DataView object renders the item template. |
|
Gets or sets (as a DOM element or DOM element ID) the external item template to use to render the data. |
|
Gets the data item that corresponds to the current selectedIndex of the DataView control. |
|
Gets or sets the index of the currently selected item. |
|
Gets or sets the CSS class name to apply to the currently selected item. |
|
Gets or sets an integer representing the time limit when attempting to fetch data. |
|
Gets or sets the data that is used to render the DataView object. |
Remarks
Renders UI bound to data, by rendering an instance of an item template for the data (if an object) or for each item in the data (if an array).
If you only need simple read-only access to data from a standard JSON Web Service, you can set the dataProvider property value to the Service URI.
To use a Web Service proxy instance, set the dataProvider property value to the instance. For an example, to use simple read access to an ADO.NET service, set the dataProvider property value to an instance of an AdoNetServiceProxy. To use a Sys.Data.DataContext instance to enable read/write capabilities and change tracking, set dataProvider property value to a DataContext instance or an AdoNetDataContext instance. You may also implement your own data provider by implementing the IDataProvider interface and set the dataProvider property value to the new implementation.
Example
The following example shows how to declaratively bind data using a DataView object.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>Creating DataView Declaratively - DataProvider using Service URI</title>
<link href="styles/list.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../MicrosoftAjax/MicrosoftAjax.debug.js"></script>
<script type="text/javascript" src="../MicrosoftAjax/MicrosoftAjaxTemplates.debug.js"></script>
</head>
<body xmlns:dataview="javascript:Sys.UI.DataView" xmlns:sys="javascript:Sys">
<!--DataView calls dataProvider URL directly. No code-->
<ul id="imagesListView" class="list sys-template"
sys:attach="dataview"
dataview:autofetch="true"
dataview:dataprovider="../Services/ImagesWcfService.svc"
dataview:fetchoperation="GetImages"
dataview:fetchparameters="{{ {orderby: 'Name'} }}"
>
<li>
<span>{{ Name }}</span>
<span class="value">{{ Description }}</span>
</li>
</ul>
</body>
</html>