acDevWBUIControls.net

ASP.NET AJAX controls with JQuery

  • Overview
  • Home
  • Functionalities
  • Filtering
  • Multi columns
  • Dropdown with icons
  • Server-Side Templates
  • Server-Side API and Events
  • Client-Side API and Events
UIDropDownItemsList - Home
<%@ Page Language="C#" AutoEventWireup="True" CodeBehind="Default.aspx.cs" Inherits="UIDropDownListItemsList_Example11.DefaultExample11Page" %>

<!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 id="Head1" runat="server">
    <title></title>
    <link href="Style.css" type="text/css" rel="Stylesheet" />
</head>
<body>
    <script src="../../../Scripts/iframeResizer.contentWindow.js" type="text/javascript"></script>
    <script type="text/javascript">
        function Default_Example11_idtCarModels_OnClientItemSelectedChanged(nSource, nArgs) {
            var nDefault_Example11_btnSelectThisCar = $find('<%=Default_Example11_btnSelectThisCar.ClientID %>');

            nDefault_Example11_btnSelectThisCar.set_enabled(true);
        }
    </script>
    <form id="Default_Example11_frmMain" runat="server">
    <asp:ScriptManager ID="Default_Example11_smrMain" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="Default_Example11_uplMain" runat="server">
        <ContentTemplate>
        <div style="padding-top: 50px; text-align: center;">
            <div style="padding-bottom: 20px;">
                <asp:Label ID="Default_Example11_lblRentACar" runat="server" Text="Rent a car" Style="font-size: xx-large;"></asp:Label>
            </div>
            <div class="fieldsets_Container">
                <fieldset class="fieldset_Box float_Left" style="flex: 2;">
                    <legend class="fieldset_Legend">Available cars</legend>
                    <div  style="padding-top: 20px;">
                        <div class="header_Value_Horizontal">
                            <div class="header_Horizontal"><acdev:UILabel ID="Default_Example11_lblCarBrand" runat="server" Text="Car brand:" AssociatedControlID="Default_Example11_idtCarBrands"></acdev:UILabel></div>
                            <div class="value_Horizontal">
                                <acdev:UIDropDownItemsList ID="Default_Example11_idtCarBrands" runat="server" SlideDuration="400" 
                                                            ScrollingDirection="DirectionDown" ReadOnly="true" AutoPostBack="true" Width="180px">
                                    <Items>
                                        <acdev:UIDropDownItemsListRow Text="Chrysler" Value="Chrysler"></acdev:UIDropDownItemsListRow>
                                        <acdev:UIDropDownItemsListRow Text="Jeep" Value="Jeep"></acdev:UIDropDownItemsListRow>
                                        <acdev:UIDropDownItemsListRow Text="Renault" Value="Renault"></acdev:UIDropDownItemsListRow>
                                        <acdev:UIDropDownItemsListRow Text="Volvo" Value="Volvo"></acdev:UIDropDownItemsListRow>
                                    </Items>
                                    <ExpanderTextGroup EmptyMessage="(Select a brand)" IsCaseSensitive="false" TextMode="SingleLine"></ExpanderTextGroup>
                                </acdev:UIDropDownItemsList>                 
                            </div>
                        </div>
                        <div class="header_Value_Horizontal">
                            <div class="header_Horizontal"><acdev:UILabel ID="Default_Example11_lblCarModel" runat="server" Text="Car model:" AssociatedControlID="Default_Example11_idtCarModels"></acdev:UILabel></div>
                            <div class="value_Horizontal">
                                <acdev:UIDropDownItemsList ID="Default_Example11_idtCarModels" runat="server" SlideDuration="400" 
                                                            ScrollingDirection="DirectionDown" ReadOnly="true" AutoPostBack="false" Width="180px"
                                                            OnClientItemSelected="Default_Example11_idtCarModels_OnClientItemSelectedChanged">

                                    <ExpanderTextGroup EmptyMessage="(Select a model)" IsCaseSensitive="false" TextMode="SingleLine"></ExpanderTextGroup>
                                </acdev:UIDropDownItemsList>
                            </div>
                        </div>
                        <div style="padding-top: 20px;">
                            <acdev:UIButton ID="Default_Example11_btnSelectThisCar" runat="server" Text="Select this car" Enabled="false"></acdev:UIButton>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="fieldset_Box" style="flex: 1;">
                     <legend class="fieldset_Legend">Your selection</legend>
                     <div style="padding-top: 20px;">
                        <div class="header_Value_Horizontal">
                            <div class="header_Horizontal"><acdev:UILiteral ID="Default_Example11_lblSelectedCarBrandHeader" runat="server" Text="Car brand:"></acdev:UILiteral></div>
                            <div class="value_Horizontal"><asp:Label ID="Default_Example11_lblSelectedCarBrand" runat="server"></asp:Label></div>
                        </div>
                        <div class="header_Value_Horizontal">
                            <div class="header_Horizontal"><acdev:UILiteral ID="Default_Example11_lblSelectedCarModelHeader" runat="server" Text="Car model:"></acdev:UILiteral></div>
                            <div class="value_Horizontal"><asp:Label ID="Default_Example11_lblSelectedCarModel" runat="server"></asp:Label></div>
                        </div>
                     </div>
                </fieldset>
            </div>
        </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <div style="height: 20px"></div>
    </form>
</body>
</html>
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="UIDropDownItemsList_DefaultExample11Page" %>

<!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></title>
    <link href="Style.css" type="text/css" rel="Stylesheet" />
</head>
<body>
    <script src="../../../Scripts/iframeResizer.contentWindow.js" type="text/javascript"></script>
    <script type="text/javascript">
        function Default_Example11_idtCarModels_OnClientItemSelectedChanged(nSource, nArgs) {
            var nDefault_Example11_btnSelectThisCar = $find('<%=Default_Example11_btnSelectThisCar.ClientID %>');

            nDefault_Example11_btnSelectThisCar.set_enabled(true);
        }
    </script>
    <form id="Default_Example11_frmMain" runat="server">
    <asp:ScriptManager ID="Default_Example11_smrMain" runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="Default_Example11_uplMain" runat="server">
        <ContentTemplate>
        <div style="padding-top: 50px; text-align: center;">
            <div style="padding-bottom: 20px;">
                <asp:Label ID="Default_Example11_lblRentACar" runat="server" Text="Rent a car" Style="font-size: xx-large;"></asp:Label>
            </div>
            <div class="fieldsets_Container">
                <fieldset class="fieldset_Box float_Left" style="flex: 2;">
                    <legend class="fieldset_Legend">Available cars</legend>
                    <div  style="padding-top: 20px;">
                        <div class="header_Value_Horizontal">
                            <div class="header_Horizontal"><acdev:UILabel ID="Default_Example11_lblCarBrand" runat="server" Text="Car brand:" AssociatedControlID="Default_Example11_idtCarBrands"></acdev:UILabel></div>
                            <div class="value_Horizontal">
                                <acdev:UIDropDownItemsList ID="Default_Example11_idtCarBrands" runat="server" SlideDuration="400" 
                                                            ScrollingDirection="DirectionDown" ReadOnly="true" AutoPostBack="true" Width="180px">
                                    <Items>
                                        <acdev:UIDropDownItemsListRow Text="Chrysler" Value="Chrysler"></acdev:UIDropDownItemsListRow>
                                        <acdev:UIDropDownItemsListRow Text="Jeep" Value="Jeep"></acdev:UIDropDownItemsListRow>
                                        <acdev:UIDropDownItemsListRow Text="Renault" Value="Renault"></acdev:UIDropDownItemsListRow>
                                        <acdev:UIDropDownItemsListRow Text="Volvo" Value="Volvo"></acdev:UIDropDownItemsListRow>
                                    </Items>
                                    <ExpanderTextGroup EmptyMessage="(Select a brand)" IsCaseSensitive="false" TextMode="SingleLine"></ExpanderTextGroup>
                                </acdev:UIDropDownItemsList>                 
                            </div>
                        </div>
                        <div class="header_Value_Horizontal">
                            <div class="header_Horizontal"><acdev:UILabel ID="Default_Example11_lblCarModel" runat="server" Text="Car model:" AssociatedControlID="Default_Example11_idtCarModels"></acdev:UILabel></div>
                            <div class="value_Horizontal">
                                <acdev:UIDropDownItemsList ID="Default_Example11_idtCarModels" runat="server" SlideDuration="400" 
                                                            ScrollingDirection="DirectionDown" ReadOnly="true" AutoPostBack="false" Width="180px"
                                                            OnClientItemSelected="Default_Example11_idtCarModels_OnClientItemSelectedChanged">

                                    <ExpanderTextGroup EmptyMessage="(Select a model)" IsCaseSensitive="false" TextMode="SingleLine"></ExpanderTextGroup>
                                </acdev:UIDropDownItemsList>
                            </div>
                        </div>
                        <div style="padding-top: 20px;">
                            <acdev:UIButton ID="Default_Example11_btnSelectThisCar" runat="server" Text="Select this car" Enabled="false"></acdev:UIButton>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="fieldset_Box" style="flex: 1;">
                     <legend class="fieldset_Legend">Your selection</legend>
                     <div style="padding-top: 20px;">
                        <div class="header_Value_Horizontal">
                            <div class="header_Horizontal"><acdev:UILiteral ID="Default_Example11_lblSelectedCarBrandHeader" runat="server" Text="Car brand:"></acdev:UILiteral></div>
                            <div class="value_Horizontal"><asp:Label ID="Default_Example11_lblSelectedCarBrand" runat="server"></asp:Label></div>
                        </div>
                        <div class="header_Value_Horizontal">
                            <div class="header_Horizontal"><acdev:UILiteral ID="Default_Example11_lblSelectedCarModelHeader" runat="server" Text="Car model:"></acdev:UILiteral></div>
                            <div class="value_Horizontal"><asp:Label ID="Default_Example11_lblSelectedCarModel" runat="server"></asp:Label></div>
                        </div>
                     </div>
                </fieldset>
            </div>
        </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <div style="height: 20px"></div>
    </form>
</body>
</html>
using System.Web.UI;
using System.Collections.Generic;
using System;
using acDevWBUI.net.UIWeb;
using acDevWBUIControls.net.UIWeb;

namespace UIDropDownListItemsList_Example11
{
    public partial class DefaultExample11Page : Page
    {
        private List<string> m_nChryslerModels = new List<string> { "Pacifica", "PT Cruiser", "Ypsilon" };
        private List<string> m_nJeepModels = new List<string> { "Commander", "Grand Cherokee", "Wrangler" };
        private List<string> m_nRenaultModels = new List<string> { "Megane", "Scenic" };
        private List<string> m_nVolvoModels = new List<string> { "Volvo V40", "Volvo S60", "Volvo V90" };

        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);

            Default_Example11_idtCarBrands.SelectedIndexChanged += Default_Example11_idtCarBrands_SelectedIndexChanged;
            Default_Example11_btnSelectThisCar.Click += Default_Example11_btnSelectThisCar_Click;
        }

        protected override void OnLoadComplete(EventArgs e)
        {
            base.OnLoadComplete(e);

            if(IsPostBack)
                Default_Example11_btnSelectThisCar.Enabled = (Default_Example11_idtCarModels.SelectedIndex != -1);
        }

        private void Default_Example11_idtCarBrands_SelectedIndexChanged(Object sender, UISelectedIndexChangedEventArgs e)
        {
            Default_Example11_idtCarModels.DataSource = null;
            Default_Example11_idtCarModels.SelectedIndex = -1;

            switch (((UIItemsBaseListRow)e.Item).Value)
            {
                case "Chrysler":
                    Default_Example11_idtCarModels.DataSource = m_nChryslerModels;
                    break;
                case "Jeep":
                    Default_Example11_idtCarModels.DataSource = m_nJeepModels;
                    break;
                case "Renault":
                    Default_Example11_idtCarModels.DataSource = m_nRenaultModels;
                    break;
                case "Volvo":
                    Default_Example11_idtCarModels.DataSource = m_nVolvoModels;
                    break;
            }

            Default_Example11_idtCarModels.DataBind();
        }

        private void Default_Example11_btnSelectThisCar_Click(Object sender, EventArgs e)
        {
            Default_Example11_lblSelectedCarBrand.Text = Default_Example11_idtCarBrands.SelectedText;
            Default_Example11_lblSelectedCarModel.Text = Default_Example11_idtCarModels.SelectedText;
        }
    }
}