New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Client-side Data Binding

Web Service

  • Products
  • Purchase
  • Support
  • Community
  • Corporate

WCF Web Service

  • Products
  • Purchase
  • Support
  • Community
  • Corporate

ADO.NET Service

  • cv

OData Binding

RadMenuItems can be populated via a WebService. This example shows how to dynamically load child items through various services.

  1. Web Service

    For example the in the first RadMenu the path to the WebService's asmx file and the name of the service method are specified in the WebService-Path and WebService-Method properties of the control (that is in the WebServiceSettings tag). You also need to set the ExpandMode of the items, which are supposed to load their children through a WebService, to "WebService". Optionally, you can handle the itemPopulating, itemPopulated and itemPopulationFailed client-side events. In addition, you can use the LoadingStatusTemplate property to create a loading template. For example: 

        <telerik:RadMenu ID="RadMenu1" runat="server" OnClientItemPopulating="itemPopulating">
        <WebServiceSettings Path="ProductCategories.asmx" Method="GetMenuCategories" />
        <LoadingStatusTemplate>
           ...
        </LoadingStatusTemplate>
        <Items>
            <telerik:RadMenuItem Text="Products" Value="1" ExpandMode="WebService"/>        
             ...
        </Items>
    </telerik:RadMenu>

    To use the integrated WebService support of RadMenu, the WebService should have the following signature: 

    [ScriptService]
public class WebServiceName : WebService
{
	[WebMethod]
	public RadMenuItemData[] WebServiceMethodName(RadMenuItemData item, object context)
	{
        	// We cannot use a dictionary as a parameter, because it is only supported by script services.
		// The context object should be cast to a dictionary at runtime.
		IDictionary<string, object> contextDictionary = (IDictionary<string, object>) context;
		
		//...
	}
}

    The itemPopulating event can be used to pass parameters from the client-side to the WebService by using the "context" dictionary object. 

    function itemPopulating(sender, eventArgs)
{
	var item = eventArgs.get_item();
	var context = eventArgs.get_context();
	context["CategoryID"] = item.get_value();
}

  2. WCF Web Service

    The second RadMenu demonstrates how to populate the control from a WCF Web Service. You need to hover a menu item to populate its children from the WCF service. You also need to point to an existing web service and method like the following one: 

    <telerik:RadMenu runat="server" ID="RadMenu1" DataSourceID="LinqDataSource1"
	DataTextField="Title" DataValueField="CategoryId" >
	<WebServiceSettings Path="MenuWcfService.svc" Method="LoadData" />
	<DataBindings>
		<telerik:RadMenuItemBinding Depth="0" ExpandMode="WebService" />
	</DataBindings>
</telerik:RadMenu>

    The root nodes are populated from a LinqDataSource:

    Check the source code of the web service for the implementation of the LoadData method.

  3. ADO.NET Service

    The third example demonstrates how to populate the RadMenu from ADO.NET Data Service. Check the ASPX for details about the implementation. To populate the child items from ADO.NET Service you need to hover the menu.

  4. OData Binding

    The last RadMenu control exemplifies how to populate the RadMenu with data taken from OData enabled service via RadODataDataSource. You will need to expand an item to populate its children on demand via OData enabled web service.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#"  CodeFile="DefaultCS.aspx.cs" Inherits="Menu.Examples.Programming.WebService.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-container size-wide">
        <h2>Web Service</h2>
        <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true" Style="z-index: 10">
            <WebServiceSettings Path="ProductCategories.asmx" Method="GetMenuCategories" />
            <LoadingStatusTemplate>
                <asp:Image runat="server" ID="LoadingImage" ImageUrl="Images/loading.gif" ToolTip="Loading..."
                    Width="16px" Height="16px" Style="margin-top: 8px"></asp:Image>
            </LoadingStatusTemplate>
            <Items>
                <telerik:RadMenuItem Text="Products" Value="1" ExpandMode="WebService" />
                <telerik:RadMenuItem Text="Purchase" Value="132" ExpandMode="WebService" />
                <telerik:RadMenuItem Text="Support" Value="141" ExpandMode="WebService" />
                <telerik:RadMenuItem Text="Community" Value="155" ExpandMode="WebService" />
                <telerik:RadMenuItem Text="Corporate" Value="164" ExpandMode="WebService" />
            </Items>
        </telerik:RadMenu>
    </div>

    <div class="demo-container size-wide">
        <h2>WCF Web Service</h2>
        <telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu2" DataSourceID="EntityDataSource2" DataTextField="Title" Style="z-index: 9"
            DataValueField="CategoryId" EnableRoundedCorners="true" EnableShadows="true">
            <WebServiceSettings Path="MenuWcfService.svc" Method="LoadData" />
            <DataBindings>
                <telerik:RadMenuItemBinding Depth="0" ExpandMode="WebService" />
            </DataBindings>
        </telerik:RadMenu>
        <asp:EntityDataSource runat="server" ID="EntityDataSource2" ConnectionString="name=TelerikReadOnlyEntities"
            DefaultContainerName="TelerikReadOnlyEntities" EntitySetName="ProductCategories" Where="it.[parentId] IS NULL">
        </asp:EntityDataSource>

    </div>

    <div class="demo-container size-wide">
        <h2>ADO.NET Service</h2>
        <telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu3" DataSourceID="EntityDataSource1" DataTextField="Text" Style="z-index: 8"
            DataValueField="id" OnClientItemPopulating="itemPopulating" EnableRoundedCorners="true"
            EnableShadows="true">
            <DataBindings>
                <telerik:RadMenuItemBinding Depth="0" ExpandMode="WebService" />
            </DataBindings>
        </telerik:RadMenu>

        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
            <script type="text/javascript">
                //<![CDATA[
                function onSuccess(result, item) {
                    //the result in JSON format is available as a "d" field
                    var data = result.d;
                    //Traverse the array of objects and create menu items
                    for (var i = 0; i < data.length; i++) {
                        var dataItem = data[i];

                        var childitem = new Telerik.Web.UI.RadMenuItem();
                        childitem.set_text(dataItem.Text);
                        childitem.set_value(dataItem.id);
                        item.get_items().add(childitem);
                    }
                    item.set_expandMode(Telerik.Web.UI.MenuItemExpandMode.ClientSide);
                    item.open();
                }

                function itemPopulating(sender, args) {
                    var item = args.get_item();

                    //filter only the child items of the current item
                    var filter = "&$filter=parentId eq " + item.get_value();

                    //Call the ADO.NET Data Service
                    $telerik.$.ajax({
                        type: "GET", // HTTP method
                        url: '<%= ResolveUrl("menuadonetservice.svc/Links?") %>' + filter, // ADO.NET DataService URL
                        contentType: "application/json; charset=utf-8", //request the result to be in JSON
                        dataType: "json",
                        success: function(result) { //callback method to invoke when the request is complete
                            onSuccess(result, item);
                        }
                    });
                    args.set_cancel(true);
                }
                //]]>
            </script>
        </telerik:RadScriptBlock>
        <asp:EntityDataSource runat="server" ID="EntityDataSource1" ConnectionString="name=TelerikReadWriteEntities"
            DefaultContainerName="TelerikReadWriteEntities" EntitySetName="Links" Where="it.[parentId] IS NULL">
        </asp:EntityDataSource>
    </div>

    <div class="demo-container size-wide">
        <h2>OData Binding</h2>
        <telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu4" ODataDataSourceID="RadODataDataSource1" Style="z-index: 7"
            PersistLoadOnDemandItems="false">
            <DataBindings>
                <telerik:RadMenuItemBinding ModelID="Category" TextField="CategoryName" ValueField="CategoryID"
                    Depth="0" FieldID="CategoryID" />
                <telerik:RadMenuItemBinding ModelID="Product" TextField="ProductName" ValueField="ProductID"
                    Depth="1" FieldParentID="CategoryID" />
            </DataBindings>
        </telerik:RadMenu>

        <telerik:RadODataDataSource runat="server" ID="RadODataDataSource1">
            <Schema>
                <telerik:DataModel ModelID="Category" Set="Categories">
                    <telerik:DataModelField FieldName="CategoryID" />
                    <telerik:DataModelField FieldName="CategoryName" />
                </telerik:DataModel>
                <telerik:DataModel ModelID="Product" Set="Products">
                    <telerik:DataModelField FieldName="ProductName" />
                    <telerik:DataModelField FieldName="ProductID" />
                    <telerik:DataModelField FieldName="CategoryID" />
                </telerik:DataModel>
            </Schema>
        </telerik:RadODataDataSource>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance