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


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>
        </telerik:RadScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        </telerik:RadAjaxManager>


        <style>
            /** Columns */
            .rcbHeader ul,
            .rcbFooter ul,
            .rcbItem ul,
            .rcbHovered ul,
            .rcbDisabled ul {
                margin: 0;
                padding: 0;
                width: 100%;
                display: inline-block;
                list-style-type: none;
            }

            .exampleRadComboBox.RadComboBoxDropDown .rcbHeader {
                padding: 5px 27px 4px 7px;
            }

            .rcbScroll {
                overflow: scroll !important;
                overflow-x: hidden !important;
            }

            .col1,
            .col2,
            .col3,
            col4 {
                margin: 0;
                padding: 0 5px 0 0;
                width: 25%;
                line-height: 14px;
                float: left;
            }
        </style>


        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
            <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="800px" DataSourceID="SqlDataSource1" AutoPostBack="true" DataTextField="OrderID" DataValueField="OrderID" CollapseAnimation-Type="None" ExpandAnimation-Type="None"
                MarkFirstMatch="true" HighlightTemplatedItems="true" AppendDataBoundItems="true" DropDownCssClass="exampleRadComboBox" OnItemDataBound="RadComboBox1_ItemDataBound">
                <HeaderTemplate>
                    <ul>
                        <li class="col1">OrderID</li>
                        <li class="col2">ShipName</li>
                        <li class="col3">ShipCountry</li>
                        <li class="col4">
                            <telerik:RadButton runat="server" ID="RadButton1" Text="Freight" AutoPostBack="true" OnClick="RadButton1_Click" />
                        </li>
                    </ul>
                </HeaderTemplate>
                <ItemTemplate>
                    <ul>
                        <li class="col1"><%# DataBinder.Eval(Container.DataItem, "OrderID")%></li>
                        <li class="col2"><%# DataBinder.Eval(Container.DataItem, "ShipName")%></li>
                        <li class="col3"><%# DataBinder.Eval(Container.DataItem, "ShipCountry")%></li>
                        <li class="col4"><%# DataBinder.Eval(Container.DataItem, "Freight")%></li>
                    </ul>
                </ItemTemplate>
            </telerik:RadComboBox>

        </telerik:RadAjaxPanel>

        <asp:SqlDataSource ID="SqlDataSource1" runat="server"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
            SelectCommand="SELECT top 10 [OrderID], [OrderDate], [Freight], [ShipName], [ShipCountry] FROM [Orders]"></asp:SqlDataSource>
    </form>
</body>
</html>
