Sys.UI.DataView Class

RSS

Modified on 2009/11/14 19:13 by Administrator Categorized as Uncategorized

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
Sys.UI.DataView Constructor	When called from a derived class, initializes a new instance of the DataView control.

Members

Name	Description
Sys.UI.DataView.command Event	Adds or removes a command event handler to the DataView control.
Sys.UI.DataView.fetchFailed Event	Adds or removes a fetchFailed event handler to the DataView object.
Sys.UI.DataView.fetchSucceeded Event	Adds or removes a fetchSucceeded event handler to the DataView object.
Sys.UI.DataView.itemRendered Event	Adds or removes an itemRendered event handler to the DataView object.
Sys.UI.DataView.itemRendering Event	Adds or removes an itemRendering event handler to the DataView object.
Sys.UI.DataView.rendered Event	Adds or removes an rendered event handler to the DataView object.
Sys.UI.DataView.rendering Event	Adds or removes a rendering event handler to the DataView object.
Sys.UI.DataView.abortFetch Method	Aborts the current fetch request, if a fetch request is in process.
Sys.UI.DataView.dispose Method	Disposes the DataView object.
Sys.UI.DataView.fetchData Method	Retrieves data from the provider using the dataProvider property.
Sys.UI.DataView.findContext Method	Finds the TemplateContext object that corresponds to the rendered template that contains the specified DOM element.
Sys.UI.DataView.initialize Method	Called when the component is initialized.
Sys.UI.DataView.onBubbleEvent Method	Called when an event is raised by the raiseBubbleEvent method.
Sys.UI.DataView.onCommand Method	Raised when a command is raised.
Sys.UI.DataView.onFetchFailed Method	Called when the DataView control is unable to fetch data.
Sys.UI.DataView.onFetchSucceeded Method	Called when the DataView control has successfully fetched data.
Sys.UI.DataView.onItemRendered Method	Called after each item that is rendered.
Sys.UI.DataView.onItemRendering Method	Called before each item that is rendered.
Sys.UI.DataView.onRendering Method	Called when a new set of data is about to be rendered by the DataView control.
Sys.UI.DataView.refresh Method	Forces the rendering of the current data to be refreshed.
Sys.UI.DataView.updated Method	Called when beginUpdate and endUpdate are called.
Sys.UI.DataView.autoFetch Property	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.
Sys.UI.DataView.contexts Property	Gets an array of TemplateContext objects within the DataView object.
Sys.UI.DataView.data Property	Gets or sets the bound data (JavaScript object or array) to be rendered using the template.
Sys.UI.DataView.dataProvider Property	Gets or sets the data provider from which to fetch data.
Sys.UI.DataView.fetchOperation Property	Gets or sets the operation to use when the data provider is queried.
Sys.UI.DataView.fetchParameters Property	Gets or sets a dictionary of parameters to pass to the data provider when a query is performed.
Sys.UI.DataView.httpVerb Property	Gets or sets a string that indicates the HTTP method. The default value is POST.
Sys.UI.DataView.initialSelectedIndex Property	Gets or set the selected index that the selectedIndex property will default to when data is loaded.
Sys.UI.DataView.isFetching Property	Gets a Boolean value that indicates whether the data is being retrieved.
Sys.UI.DataView.itemPlaceholder Property	Gets or sets the DOM element or the ID of the DOM element next to which the DataView object renders the item template.
Sys.UI.DataView.itemTemplate Property	Gets or sets (as a DOM element or DOM element ID) the external item template to use to render the data.
Sys.UI.DataView.selectedData Property	Gets the data item that corresponds to the current selectedIndex of the DataView control.
Sys.UI.DataView.selectedIndex Property	Gets or sets the index of the currently selected item.
Sys.UI.DataView.selectedItemClass Property	Gets or sets the CSS class name to apply to the currently selected item.
Sys.UI.DataView.timeout Property	Gets or sets an integer representing the time limit when attempting to fetch data.
Sys.UI.DataView.viewData Property	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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://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>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://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>

Sys.UI.DataView Class

Constructors

Members

Remarks

Example

See Also

Other Resources

Powered by MSDN

Follow Us On:

Microsoft