Telerik blogs
As you may already know, the “Prometheus” counter-parts of RadComboBox, RadTreeView and RadMenu made their official appearance in the Q3 2007 release. The migration to the new code base was an opportunity for us to take a fresh look at the controls and identify the weak spots that needed improvement.

One area that received great attention was the Client-side API. We wanted our customers to be able to create smart and responsive applications and this meant rich client-side functionality. Nothing that can be done on the client should require a trip to the server.

The result is a flexible and powerful API that features:
  • Ability to add, modify and remove items on the client. 
  • Persistence of changes done on the client to the server. 
  • Rich event model.

The new API allowed us to introduce an additional, lightweight load-on-demand mechanism that uses web services to populate the controls. We have tried to achieve maximum flexibility without compromising the ease of use. Let me demonstrate how this is done for RadMenu. The other controls follow the same pattern.

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

You only have to configure the path to the web service and specify the method name. Afterwards, the items with ExpandMode=”WebService” will be populated through the web service.

The web service has a simple signature. It receives a RadMenuItemData object with basic information about the initiating item and a context dictionary. It has to return an array of RadMenuItemData objects.

[ScriptService]
public class ProductCategories : WebService
{
    
[WebMethod]
    
public RadMenuItemData[] GetMenuCategories( RadMenuItemData item,
                                                    
IDictionary<string, object> context)    
    {    
        DataTable productCategories = GetProductCategories(item.Value);
        
List<RadMenuItemData> result = new List<RadMenuItemData>();
        
foreach (DataRow row in productCategories.Rows)
        {    
            RadMenuItemData itemData = new RadMenuItemData();    
            itemData.Text = row["Title"].ToString();
            
itemData.Value = row["CategoryId"].ToString();    
            
            
if (Convert.ToInt32(row["ChildrenCount"]) > 0)
            
{
                
itemData.ExpandMode = MenuItemExpandMode.WebService;
            
}
            
result.Add(itemData);
          
}
         
return result.ToArray();
      
}
}

We are using the item’s value to denote the category ID in this example. You can pass arbitrary information to the web service using the context dictionary.

You can see just how easy it is to implement load on demand with the new “Prometheus” controls. And this is just a basic example. You can use the client-side events to further customize the data sent to the web service or to react to communication errors.

The full version of the example is available here.


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Comments

Comments are disabled in preview mode.