<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ComboBox.Examples.Functionality.Templates.DefaultCS"Language="c#" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<
head
runat
=
"server"
>
<
title
>Telerik ASP.NET Example</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"styles.css"
/>
<
script
type
=
"text/javascript"
src
=
"scripts.js"
></
script
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
runat
=
"server"
ID
=
"RadScriptManager1"
/>
<
telerik:RadSkinManager
ID
=
"RadSkinManager1"
runat
=
"server"
ShowChooser
=
"true"
/>
<
telerik:RadCodeBlock
runat
=
"server"
ID
=
"RadCodeBlock1"
>
<
script
type
=
"text/javascript"
>
//
<![CDATA[
Sys.Application.add_load(function () {
window.demo.combo = $find("<%= RadComboBox1.ClientID %>");
window.demo.combo2 = $find("<%=RadComboBox2.ClientID %>");
demo.initialize();
});
//]]>
</
script
>
</
telerik:RadCodeBlock
>
<
telerik:RadFormDecorator
RenderMode
=
"Lightweight"
ID
=
"Decorator1"
runat
=
"server"
Skin
=
"Office2010Silver"
/>
<
div
class
=
"demo-container no-bg"
>
<
div
class
=
"qsf-fb"
>
<
ul
>
<
li
>
<
telerik:RadComboBox
RenderMode
=
"Lightweight"
runat
=
"server"
ID
=
"RadComboBox1"
DataSourceID
=
"SqlDataSource1"
DataValueField
=
"ID"
DataTextField
=
"TypeName"
EmptyMessage
=
"All Types"
HighlightTemplatedItems
=
"true"
Width
=
"310px"
OnClientDropDownClosing
=
"onDropDownClosing"
OnClientBlur
=
"onBlur"
Label
=
"Type:"
LabelCssClass
=
"associatedLables"
Skin
=
"Office2010Silver"
>
<
ItemTemplate
>
<
div
onclick
=
"StopPropagation(event)"
class
=
"combo-item-template"
>
<
label
>
<
asp:CheckBox
runat
=
"server"
ID
=
"chk1"
Checked
=
"true"
onclick
=
"onCheckBoxClick(this)"
/>
<
img
src='<%# Eval("ImagePath") %>' alt="icon" /><%# Eval("TypeName") %>
</
label
>
</
div
>
</
ItemTemplate
>
</
telerik:RadComboBox
>
</
li
>
<
li
>
<
telerik:RadComboBox
RenderMode
=
"Lightweight"
runat
=
"server"
ID
=
"RadComboBox2"
Width
=
"310px"
Height
=
"300"
EmptyMessage
=
"Showing all cars"
OnClientDropDownClosing
=
"OnClientDropDownClosingHandler"
Label
=
"Model:"
LabelCssClass
=
"associatedLables"
Skin
=
"Office2010Silver"
>
<
ItemTemplate
>
<
div
onclick
=
"StopPropagation(event)"
>
<
telerik:RadTreeView
RenderMode
=
"Lightweight"
ID
=
"RadTreeView1"
runat
=
"server"
DataSourceID
=
"SqlDataSource2"
DataTextField
=
"VehicleName"
DataValueField
=
"VehicleTypeID"
DataFieldID
=
"ID"
DataFieldParentID
=
"VehicleParentID"
OnClientNodeClicking
=
"OnClientNodeClickingHandler"
Skin
=
"Office2010Silver"
>
<
DataBindings
>
<
telerik:RadTreeNodeBinding
Depth
=
"0"
Category
=
"Make"
ImageUrlField
=
"ImagePath"
/>
</
DataBindings
>
</
telerik:RadTreeView
>
</
div
>
</
ItemTemplate
>
<
Items
>
<
telerik:RadComboBoxItem
/>
</
Items
>
</
telerik:RadComboBox
>
</
li
>
</
ul
>
<
p
class
=
"buttons"
>
<
telerik:RadButton
RenderMode
=
"Lightweight"
ID
=
"Button1"
runat
=
"server"
Text
=
"Select"
OnClick
=
"Button1_OnClick"
></
telerik:RadButton
>
</
p
>
</
div
>
<
div
class
=
"qsf-result"
>
<
ul
>
<
li
>
<
asp:Label
runat
=
"server"
class
=
"associatedLables"
>
Selected vehicle types:</
asp:Label
>
<
asp:Label
runat
=
"server"
ID
=
"SelectedTypeLabel"
/>
</
li
>
<
li
>
<
asp:Label
runat
=
"server"
class
=
"associatedLables"
>
Selected car:</
asp:Label
>
<
asp:Label
runat
=
"server"
ID
=
"SelectedCarLabel"
/>
</
li
>
</
ul
>
</
div
>
</
div
>
<
asp:SqlDataSource
ID
=
"SqlDataSource1"
runat
=
"server"
ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
SelectCommand="SELECT [ID], [TypeName], [ImagePath] FROM [Vehicle_Types]" />
<
asp:SqlDataSource
ID
=
"SqlDataSource2"
runat
=
"server"
ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
SelectCommand="SELECT * FROM Vehicles" />
</
form
>
</
body
>
</
html
>