RadComboBox and ASP.NET AJAX 4.0 Preview – using client-side templates and webservice load on demand

Edit: The following content applies to ASP.NET Ajax 4.0 Preview 4. Download the project that uses the latest MS Ajax 4.0 Preview 6 from Here

Many of you have asked us, the ASP.NET support officers, whether RadComboBox supports templates when bound to WebService. Using the latest official .NET Framework (3.5) the answer was ‘no’.

Fortunately, this is possible with the client-side templates introduced in the next version of the .NET Framework – 4.0. Currently it is in a Preview stage and you can find its roadmap here. 

We have already demonstrated how to use the new client-side templates in RadTreeView and RadGrid.

The demo that you can download below shows how to create a multi-column RadComboBox bound to WebService. Here are the important steps that you need to perform:

1. Register the MicrosoftAjaxTemplates.js file in the ScriptManager:

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
   <Scripts>    
       <asp:ScriptReference Path="~/MicrosoftAjaxTemplates.js" /> 
   </Scripts> 
</asp:ScriptManager>

2. Configure a RadComboBox instance to consume a web service:

<telerik:RadComboBox runat="server" ID="RadComboBox1"
   EnableLoadOnDemand="true"
   OnClientItemDataBound="onItemDataBound"  
   OnClientSelectedIndexChanged="onSelectedIndexChanged"> 
   <WebServiceSettings Method="GetEmployees" Path="Employees.asmx" /> </telerik:RadComboBox>

3. Add a LinqToSql class and drop the Employee table from the Northwind database.

4. Write the GetEmployees web service method which is used to populate RadComboBox:

[WebMethod]
public IList<Employee> GetEmployees(RadComboBoxContext context)
{
    NorthwindDataContext db = new NorthwindDataContext();
 
    var employees = from e in db.Employees
                    where (e.FirstName.StartsWith(context.Text.ToLower()))
                    select e;
 
    return employees.ToList();
}
 

5. Add the client-side template:

<div id="myTemplate" class="sys-template"> 
<!--* if (Index % 2 == 0) { *-->
<table class="employeeTableAlt"> <tr> <td class="employeeFirstName">
                {{ FirstName }}
            </td> <td class="employeeLastName">
                {{ LastName }}
            </td> <td>
                {{ Address }}
            </td> </tr> </table> 
<!--* } else { *-->
<table class="employeeTable"> <tr> <td class="employeeFirstName">
                {{ FirstName }}
            </td> <td class="employeeLastName">
                {{ LastName }}
            </td> <td>
                {{ Address }}
            </td> </tr> </table> 
<!--* } *-->
</div>

6. Consume the OnClientItemDataBound event (which is a brand new client-side event occurring when an item is created during web-service load on demand) and instantiate the template inside the item's <LI> HTML element:

That’s it. You have a fast combobox with client-side templates.

Download the Project from here

Edit: Download the project that uses the latest MS Ajax 4.0 Preview 6 from Here