ODataDataSource - Integration with RadListView

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

ODataSource is a client data source component that allows querying local and remote services that expose OData feed. It features design-time wizard for visual configuration of the data model for the data, which should be obtained from the service.

  • DefaultCS.aspx
  • MapsApi.js
    • MapsApi.js
    • scripts.js
  • styles.css
<%@ Page Language="C#"  %>

<%@ 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" />
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBDNoaRkfKhukUEETP32z4GbMssslYELKU&sensor=false"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript" src="MapsApi.js"></script>
      <div class="demo-container size-medium">
        <telerik:RadListView ID="RadListView1" runat="server" Skin="Silk">
            <LayoutTemplate>
                <div id="telerikVideos">
                    <div id="scrollArea">
                        <div id="itemContainer">
                        </div>
                    </div>
                </div>
            </LayoutTemplate>
            <ClientSettings>
                <DataBinding ItemPlaceHolderID="itemContainer">
                    <ItemTemplate>
                            <div class="item">
                                <div class="content">
                                    <h3>#= Title #</h3>
                                    <h4>Hosted By: #= HostedBy #</h4>
                                    <div class="description">
                                        #= Description #
                                    </div>
                                    <div class="details">
                                        Call us at <strong>#=ContactPhone#</strong>
                                        or come to <strong>#=Address#</strong>
                                        on <strong>#= format(EventDate, "d") #</strong>
                                    </div>
                                     <a class="view-map" latitude="#=Latitude#" longitude="#=Longitude#" address="#=Address#" onclick="javascript:clickHandler(this);"><span class="view-map-text">VIEW MAP</span></a>
                                </div>
                            </div>
                    </ItemTemplate>
                </DataBinding>
            </ClientSettings>
        </telerik:RadListView>
    </div>
    <telerik:RadODataDataSource ID="RadODataDataSource1" runat="server" EnablePaging="true">
        <Transport>
            <Read Url="http://www.nerddinner.com/Services/OData.svc" />
        </Transport>
        <Schema>
            <telerik:DataModel ModelID="Dinner" Set="Dinners" PageIndex="0" PageSize="50" />
        </Schema>
        <ClientEvents RequestSucceeded="requestSucceeded" />
    </telerik:RadODataDataSource>

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            Sys.Application.add_load(function () {
                demo.oDataDataSource = $find("<%=RadODataDataSource1.ClientID%>");
                demo.listview = $find("<%=RadListView1.ClientID%>");

                demo.oDataDataSource.fetch("Dinner");
            });
        </script>
        <script type="text/javascript" src="scripts.js"></script>
    </telerik:RadScriptBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?