<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    <%--RadAjaxManager--%>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadCboCategories">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadCboCategories" LoadingPanelID="RadAjaxLoadingPanel1"/>
                <telerik:AjaxUpdatedControl ControlID="lblCategoryName"  />
                  <telerik:AjaxUpdatedControl ControlID="lblDescription"  />
            </UpdatedControls>
        </telerik:AjaxSetting>        
    </AjaxSettings>
</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel  ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
            Width="75px" Transparency="5">
            <img style="margin-top: 150px;" alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, 
            "Telerik.Web.UI.Skins.Default.Ajax.loading7.gif") %>' />
        </telerik:RadAjaxLoadingPanel>
<%--RadAjaxManager--%>


        <telerik:RadComboBox ID="RadCboCategories" Runat="server" 
                    Height="190px" Width="300px" MarkFirstMatch="true" 
                    EnableLoadOnDemand="true" HighlightTemplatedItems="true" 
                    DataTextField="CategoryName" DropDownWidth="300px" DataValueField="CategoryID"
                    ItemRequestTimeout="500" AutoPostBack="true"
                    OnItemsRequested="RadCboCategories_ItemsRequested" Skin="Outlook" 
                        TabIndex="1" 
            onselectedindexchanged="RadCboCategories_SelectedIndexChanged">
                        <HeaderTemplate>
                            <table style="width: 300px" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td style="width: 100px;">
                                        CategoryID
                                    </td>
                                    <td style="width: 100px;">
                                        CategoryName
                                    </td>
                                    <td style="width: 100px;">
                                        Description
                                    </td>
                                </tr>
                            </table>
                        </HeaderTemplate>
                        <ItemTemplate>
                            <table style="width: 300px" class="comboTable" 
                            cellpadding="0" cellspacing="0">
                                <tr>
                                    <td style="width: 100px;" class="comboItemCell">
                                        <div class="comboItem">
                                            <%# DataBinder.Eval(Container.DataItem, "CategoryID")%>
                                        </div>
                                    </td>
                                    <td style="width: 100px;" class="comboItemCell">
                                        <div class="comboItem">
                                            <%# DataBinder.Eval(Container.DataItem, "CategoryName")%>
                                        </div>
                                    </td>
                                    <td style="width: 100px;" class="comboItemCell">
                                        <div class="comboItem">
                                            <%# DataBinder.Eval(Container.DataItem, "Description")%>
                                        </div>
                                    </td>    
                                </tr>
                            </table>
                        </ItemTemplate>

<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                    </telerik:RadComboBox>

        <br />
        <asp:Label ID="lblCategoryName" runat="server" Text="Label"></asp:Label>
&nbsp;<br />
        <asp:Label ID="lblDescription" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>
</html>
