ListView - Web Service Binding

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadListView supports automatic client-side databinding to web services, page methods, or any other type of JSON feed. Web service databinding is configured through the RadListView.ClientSettings.DataBinding.DataService settings:

DataService settings

  • Location - specifies the URL of the web service or JSON feed. Can be relative or absolute.
  • HttpMethod - specifies the HTTP method (POST, GET) that RadListView will use to access the web service. Default method is POST.
  • ResponseType - specifies the response type (JSON, JSONP) of the web service. Default response type is JSON.
  • EnableCaching - specifies whether data caching is enabled. Data caching saves data locally and prevents multiple web service requests with identical paging, sorting and filtering parameters.
  • DataPath - specifies a sub-path pointing to a specific data set or service method that will provide the data records. Optional.
  • CountPath - specifies the sub-path pointing to a service method that will return the total number of items in the data set. Optional.
  • DataPropertyName - specifies the name of the field in the response JSON object that contains the data array. Default is Data for POST requests and results for GET requests.
  • CountPropertyName - specifies the name of the field in the response JSON object that contains the total record count. Default is Count for POST requests and __count for GET requests.
  • StartRowIndexParameterName - specifies the start row index parameter name when sending paging data in the request. Default is startRowIndex for POST requests and $skip for GET requests.
  • MaximumRowsParameterName - specifeis the maximum rows parameter name when sending paging data in the request. Default is maximumRows for POST requests and $top for GET requests.
  • FilterParameterName - specifies the name of the filter parameter when filtering data is sent in the request. Default is filterExpression for POST requests and $filter for GET requests.
  • FilterParameterType - specifies the format in which the filter parameter is sent in the request. Default is List for POST requests and OData for GET requests.
  • SortParameterName - specifies the name of the sort parameter when sorting data is sent in the request. Default is sortExpression for POST requests and $orderby for GET requests.
  • SortParameterType - specifies the format in which the sort parameter is sent in the request. Default is List for POST requests and OData for GET requests.

DataService Defaults

The following table describes the default values for settings in the RadListView.ClientSettings.DataBinding.DataService collection. Defaults vary by the selected HTTP method as follows:

HttpMethod POST GET
DataPropertyName Data results
CountPropertyName Count __count
FilterParameterName filterExpression $filter
FilterParameterType List OData
SortParameterName sortExpression $orderby
SortParameterType List OData
StartRowIndexParameterName startRowIndex $skip
MaximumRowsParameterName maximumRows $top

Supported data service types

RadListView supports databinding to the following web service types:

  • ASP.NET XML Web Services
  • WCF Services
  • WCF REST Services
  • OData Service
  • Any general local JSON or remote JSONP service
  • DefaultCS.aspx
  • ListViewWcfService.cs
  • scripts.js
  • styles.css
<%@ Page Language="VB"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="Stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div>
        <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
            <script type="text/javascript">
                var listView,
                fieldsCombo,
                searchBox,
                searchButton,
                imageUrlFormat = "http://demos.telerik.com/aspnet-ajax/img/northwind/customers/thumbs/{0}.jpg";

                function pageLoad() {
                    fieldsCombo = $find('<%= FieldsCombo.ClientID %>');
                    searchBox = $find('<%= SearchBox.ClientID %>');
                    listView = $find('<%= RadListView1.ClientID %>');
                    searchButton = $find('<%= SearchButton.ClientID %>');
                }
            </script>
        </telerik:RadCodeBlock>
        <script type="text/javascript" src="scripts.js"></script>
        <div class="demo-container">
            <div id="navigation">
                <span class="column">Search in
                <br />
                    <telerik:RadComboBox RenderMode="Lightweight" ID="FieldsCombo" runat="server" Skin="Silk">
                        <Items>
                            <telerik:RadComboBoxItem Text="Contact Name" Value="ContactName"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="Company Name" Value="CompanyName"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="Contact Title" Value="ContactTitle"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="Address" Value="Address"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="City" Value="City"></telerik:RadComboBoxItem>
                            <telerik:RadComboBoxItem Text="Country" Value="Country"></telerik:RadComboBoxItem>
                        </Items>
                    </telerik:RadComboBox>
                </span>
                <span class="column">for value <br />
                <telerik:RadTextBox RenderMode="Lightweight" ID="SearchBox" runat="server" Skin="Silk" Width="160px" EnableSingleInputRendering="true">
                    <ClientEvents OnKeyPress="onSearchBoxKeyPress"></ClientEvents>
                </telerik:RadTextBox>
                    <telerik:RadButton RenderMode="Lightweight" ID="SearchButton" runat="server" Skin="Silk" Width="70px" Text="Search"
                        AutoPostBack="false" OnClientClicked="onSearchButtonClick">
                    </telerik:RadButton>
                </span>
                <span class="column">
                    <span class="sortDescription">order by selected field </span>
                    <span class="sortPanel">
                        <a class="sortAsc" href="javascript:void(0);" title="Order ascending"></a>
                        <a class="sortDesc" href="javascript:void(0);" title="Order descending"></a>
                    </span>
                </span>
            </div>
            <telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight" AllowPaging="true" PageSize="9">
                <LayoutTemplate>
                    <div id="listView">
                        <a class="pagePrev" href="javascript:void(0);" title="Go to previous page"></a>
                        <a class="pageNext" href="javascript:void(0);" title="Go to next page"></a>
                        <div id="items">
                        </div>
                    </div>
                </LayoutTemplate>
                <ClientSettings>
                    <DataBinding ItemPlaceHolderID="items">
                        <ItemTemplate>
                        <div class="item">
                            <img src="#= String.format(imageUrlFormat, CustomerID) #" alt="Photo" />
                            <span class="name">#= ContactName #</span>
                            <span class="company">#= CompanyName #</span>
                            <span class="title">#= ContactTitle #</span>
                        </div>
                        </ItemTemplate>
                        <SelectedItemTemplate>
                        <div class="item selected">
                            <table class="details">
                                <tr>
                                    <th>Address:</th>
                                    <td><div class="addr">#= Address #, #= City #</div></td>
                                </tr>
                                <tr>
                                    <th>Country:</th>
                                    <td>#= Country #</td>
                                </tr>
                                <tr>
                                    <th>Phone:</th>
                                    <td>#= Phone #</td>
                                </tr>
                                <tr>
                                    <th>Fax:</th>
                                    <td>#= Fax != null ? Fax : "" #</td>
                                </tr>
                            </table>
                        </div>
                        </SelectedItemTemplate>
                        <EmptyDataTemplate>
                        <div class="empty">
                            No Matching Data
                        </div>
                        </EmptyDataTemplate>
                        <DataService Location="ListViewWcfService.svc" DataPath="GetCustomers" SortParameterType="Linq"
                            FilterParameterType="Linq"></DataService>
                    </DataBinding>
                    <ClientEvents OnDataBinding="onListViewDataBinding" OnDataBound="onListViewDataBound"></ClientEvents>
                </ClientSettings>
            </telerik:RadListView>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?