Telerik blogs

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:

<script type="text/javascript">
    function onItemDataBound(sender, eventArgs)
    {
        //the combo item var item = eventArgs.get_item();
        //the data item of type Employee var dataItem = eventArgs.get_dataItem();
        //this will be used when selecting an item - its text attribute will go to the input area
        item.get_attributes().setAttribute("text", dataItem.FirstName +
 
          " " + dataItem.LastName);
        item.set_value(dataItem.EmployeeID);
         
        //this is a custom property used in the template to alternate the css styles
        dataItem.Index = item.get_index();
 
        var template = new Sys.UI.Template($get("myTemplate"));
        template.instantiateIn(item.get_element(), dataItem);
    }
 
    function onSelectedIndexChanged(sender, eventArgs)
    {
        var item = eventArgs.get_item();
        sender.set_text(item.get_attributes().getAttribute("text"));
        sender.set_value(item.get_value());
    }
</script>

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


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.