Client-side Data 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.

Related Resources

• Populating the Menu From a Web Service
• Populating the Menu From a WCF Web Service
• RadODataDataSource Overview
• Getting Started with RadODataDataSource
• Getting familiar with Design Time Wizard