<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="DropDownList.Examples.Programming.ClientSide.DefaultCS" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<telerik:RadODataDataSource runat="server" ID="RadODataDataSource1">
<Schema>
<telerik:DataModel ModelID="Category" Set="Categories">
<telerik:DataModelField FieldName="CategoryName" />
</telerik:DataModel>
</Schema>
</telerik:RadODataDataSource>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ConfigurationPanel">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadDropDownList1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<div class="demo-container size-thin">
<telerik:RadDropDownList RenderMode="Lightweight" ID="RadDropDownList1" runat="server" Width="300px" DefaultMessage="Select Category"
ODataDataSourceID="RadODataDataSource1" DataModelID="Category" DataTextField="CategoryName">
</telerik:RadDropDownList>
</div>
<qsf:EventLogConsole runat="server" AllowClear="true" />
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
/*<![CDATA[*/
function onDropDownOpening(sender) {
logEvent("Drop Down opening");
}
function onDropDownOpened(sender) {
logEvent("Drop Down opened");
}
function onDropDownClosing(sender) {
logEvent("Drop Down closing");
}
function onDropDownClosed(sender) {
logEvent("Drop Down closed");
}
function onSelectedIndexChanged(sender, args) {
var selectedItem = sender.get_selectedItem();
var selectedItemText = selectedItem != null ? selectedItem.get_text() : sender.get_text();
logEvent("Index changed to Item '" + selectedItemText + "'");
}
function onItemSelecting(sender, args) {
logEvent("ItemSelecting: " + args.get_item().get_text());
}
function onItemSelected(sender, args) {
logEvent("ItemSelected: " + args.get_item().get_text());
}
function onItemDataBound(sender, args) {
logEvent("Item databound. Item text: " + args.get_item().get_text());
}
/*]]>*/
</script>
</telerik:RadScriptBlock>
<qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel">
<Views>
<qsf:View>
<qsf:ConfiguratorColumn Title="Dropdown events" runat="server" Size="Narrow">
<ul class="fb-group">
<li>
<span class="checkbox">
<asp:CheckBox runat="server" ID="DropDownOpening" Text="OnClientDropDownOpening"
AutoPostBack="True" Checked="True" /></span>
</li>
<li>
<span class="checkbox">
<asp:CheckBox runat="server" ID="DropDownOpened" Text="OnClientDropDownOpened"
AutoPostBack="True" Checked="True" /></span>
</li>
<li>
<span class="checkbox">
<asp:CheckBox runat="server" ID="DropDownClosing" Text="OnClientDropDownClosing"
AutoPostBack="True" Checked="True" /></span>
</li>
<li>
<span class="checkbox">
<asp:CheckBox runat="server" ID="DropDownClosed" Text="OnClientDropDownClosed"
AutoPostBack="True" Checked="True" /></span>
</li>
</ul>
</qsf:ConfiguratorColumn>
<qsf:ConfiguratorColumn runat="server" Size="Medium">
<qsf:ConfiguratorColumn ID="ConfiguratorColumn1" Title="Item events" runat="server">
<ul class="fb-group">
<li>
<span class="checkbox">
<asp:CheckBox runat="server" ID="ItemSelecting" Text="OnClientItemSelecting"
AutoPostBack="True" Checked="True" /></span>
</li>
<li>
<span class="checkbox">
<asp:CheckBox runat="server" ID="ItemSelected" Text="OnClientItemSelected"
AutoPostBack="True" Checked="True" /></span>
</li>
<li>
<span class="checkbox">
<asp:CheckBox runat="server" ID="ItemDataBound" Text="OnClientItemDataBound"
AutoPostBack="True" Checked="True" /></span>
</li>
</ul>
</qsf:ConfiguratorColumn>
<qsf:ConfiguratorColumn ID="ConfiguratorColumn2" Title="Selected index event" runat="server">
<ul class="fb-group">
<li>
<span class="checkbox">
<asp:CheckBox runat="server" ID="SelectedIndexChanged" Text="OnClientSelectedIndexChanged"
AutoPostBack="True" Checked="True" /></span>
</li>
</ul>
</qsf:ConfiguratorColumn>
</qsf:ConfiguratorColumn>
</qsf:View>
</Views>
</qsf:ConfiguratorPanel>
</form>
</body>
</html>