or
<
telerik:RadMenu
ID
=
"radMenuRegions"
runat
=
"server"
Width
=
"100%"
BackColor
=
"White"
Skin
=
""
OnItemClick
=
"radMenuRegions_ItemClick"
>
<
ItemTemplate
>
<
telerik:RadButton
ID
=
"radBtn"
runat
=
"server"
Text='<%# DataBinder.Eval(Container, "Text")%>' Skin="WebBlue" Width="100px" Font-Names="Arial" Font-Size="14pt" Height="65px" style="margin:20px;" OnClick="radBtn_Click"></
telerik:RadButton
>
<
telerik:RadToolTip
ID
=
"toolTip"
runat
=
"server"
TargetControlID
=
"radBtn"
Title='<%# DataBinder.Eval(Container, "Text")%>' Skin="WebBlue" Text='<%# DataBinder.Eval(Container, "Value")%>'></
telerik:RadToolTip
>
</
ItemTemplate
>
<
Items
>
<
telerik:RadMenuItem
Text
=
"East"
Value
=
"1"
/>
<
telerik:RadMenuItem
Text
=
"Main/FHC"
Value
=
"2"
/>
<
telerik:RadMenuItem
Text
=
"Medina"
Value
=
"3"
/>
<
telerik:RadMenuItem
Text
=
"West"
Value
=
"4"
/>
<
telerik:RadMenuItem
Text
=
"Wooster"
Value
=
"5"
/>
</
Items
>
</
telerik:RadMenu
>
...
<
telerik:RadTextBox
ID
=
"textBoxSearchItemCode"
ClientInstanceName
=
"textBoxSearchItemCode"
runat
=
"server"
Width
=
"90px"
CssClass
=
"inline"
>
</
telerik:RadTextBox
>
<
telerik:RadTextBox
ID
=
"textBoxSearchItemName"
ClientInstanceName
=
"textBoxSearchItemName"
runat
=
"server"
Width
=
"190px"
CssClass
=
"inline"
>
</
telerik:RadTextBox
>
<
cc1:JPopup ID
=
"popupItem"
runat
=
"server"
PopupType
=
"Item"
CodeControl
=
"textBoxSearchItemCode"
NameControl
=
"textBoxSearchItemName
"
OKScript
=
"Search();"
/>
...
namespace
My.Web.JControl.JPopup
{
[DefaultProperty(
"Text"
)]
[DefaultEvent(
"OK"
)]
[ToolboxData(
"<{0}:Popup runat=server></{0}:Popup>"
)]
public
class
JPopup : WebControl, IPostBackEventHandler
{
public
JPopup()
:
base
()
{
UseOKServerEvent =
false
;
OKScript =
""
;
CodeControl =
""
;
NameControl =
""
;
PopupControl =
""
;
PopupType = ePopupType.None;
Hidden =
false
;
}
#region Properties
/// <summary>
/// Use OKEvent
/// </summary>
[Bindable(
true
),
Category(
"Event"
)]
public
bool
UseOKServerEvent
{
get
{
return
(
bool
)ViewState[
"PopupUseOKServerEvent"
];
}
set
{
ViewState[
"PopupUseOKServerEvent"
] = value;
}
}
/// <summary>
/// OKEvent Handler for Javascript
/// </summary>
[Bindable(
true
)]
[Category(
"Event"
)]
[Editor(
typeof
(OKEventEditor),
typeof
(UITypeEditor))]
public
string
OKScript
{
get
{
return
(
string
)ViewState[
"PopupOKScript"
];
}
set
{
ViewState[
"PopupOKScript"
] = value;
}
}
#endregion
#region Binding Property
// column to editbox mapping
[Bindable(
true
),
DefaultValue(
""
),
Category(
"Binding"
)]
public
string
CodeControl
{
get
{
return
(
string
)ViewState[
"PopupCodeControl"
];
}
set
{
ViewState[
"PopupCodeControl"
] = value;
}
}
[Bindable(
true
),
DefaultValue(
""
),
Category(
"Binding"
)]
public
string
NameControl
{
get
{
return
(
string
)ViewState[
"PopupNameControl"
];
}
set
{
ViewState[
"PopupNameControl"
] = value;
}
}
// column to editbox mapping
[Bindable(
true
),
DefaultValue(
""
),
Category(
"Binding"
)]
public
string
PopupControl
{
get
{
return
(
string
)ViewState[
"PopupPopupControl"
];
}
set
{
ViewState[
"PopupPopupControl"
] = value;
}
}
[Bindable(
true
),
DefaultValue(
""
),
Category(
"Binding"
)]
public
string
Parameter
{
get
{
return
(
string
)ViewState[
"PopupParameter"
];
}
set
{
ViewState[
"PopupParameter"
] = value;
}
}
#endregion
#region PopupType Property
[Bindable(
true
)]
[Category(
"PopupType"
)]
[DefaultValue(ePopupType.None)]
public
ePopupType PopupType
{
get
{
return
(ePopupType)ViewState[
"PopupType"
];
}
set
{
ViewState[
"PopupType"
] = value;
}
}
[Bindable(
true
)]
[Category(
"PopupType"
)]
[DefaultValue(
false
)]
public
bool
Hidden
{
get
{
return
(
bool
)ViewState[
"PopupHidden"
];
}
set
{
ViewState[
"PopupHidden"
] = value;
}
}
public
enum
ePopupType { None, User, Customer, PoCustomer, Item, MoldItem, PowerChart };
#endregion
#region Render
/// <summary>
/// Render this control to the output parameter specified.
/// </summary>
/// <param name="output"> The HTML writer to write out to </param>
///
protected
override
void
RenderContents(HtmlTextWriter output)
{
StringBuilder sbRender =
new
StringBuilder();
// Design Mode
if
(
this
.DesignMode)
{
sbRender.Append(
"<div style=\"VERTICAL-ALIGN: bottom; DISPLAY:inline;POSITION:relative; \" onMouseOver = \"this.style.cursor = 'hand'\">"
);
sbRender.Append(
"<img id = \""
+ ID +
"\" name = \""
+ ID +
"\""
);
sbRender.Append(
string
.Format(
" src=\"/{0}/Images/Main/popup.gif\"/>"
, ConfigurationManager.AppSettings[
"WebSiteName"
]));
sbRender.Append(
"</div>"
);
output.Write(sbRender);
return
;
}
sbRender.Append(
"<script type='text/javascript'>"
);
sbRender.Append(
string
.Format(@"
function Popup_{0}()
{{
var popSearchCode = $find(
'<%= {1}.ClientID %>'
).get_value(); <<---- here!!!!
var popSearchName = $find(
'<%= {2}.ClientID %>'
).get_value();", ID, CodeControl, NameControl));
.......
<
telerik:RadWindow
ID
=
"RadWindow1"
runat
=
"server"
AutoSizeBehaviors
=
"Width, Height"
AutoSize
=
"true"
VisibleStatusbar
=
"false"
Behaviors
=
"Move"
VisibleOnPageLoad
=
"false"
ReloadOnShow
=
"true"
Modal
=
"true"
NavigateUrl
=
"Popup_Add.aspx"
OnClientClose
=
"OnClientclose"
EnableShadow
=
"true"
>
</
telerik:RadWindow
>
<
asp:TableCell
ColumnSpan
=
"3"
VerticalAlign
=
"Middle"
>
<
asp:UpdatePanel
ID
=
"UpdatePanel1"
runat
=
"server"
UpdateMode
=
"Conditional"
>
<
ContentTemplate
>
<
telerik:RadAjaxPanel
ID
=
"RadAjaxPanel1"
runat
=
"server"
>
<
telerik:RadPanelBar
runat
=
"server"
ID
=
"RadPanelBar1"
ExpandMode
=
"MultipleExpandedItems"
Width
=
"100%"
>
<
Items
>
<
telerik:RadPanelItem
Expanded
=
"false"
Text
=
"Advanced Settings"
runat
=
"server"
>
<
Items
>
<
telerik:RadPanelItem
Value
=
"AccountInformation"
runat
=
"server"
>
<
ItemTemplate
>
[controls here]
</
ItemTemplate
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelItem
>
</
Items
>
</
telerik:RadPanelBar
>
</
telerik:RadAjaxPanel
>
</
ContentTemplate
>
</
asp:UpdatePanel
>
</
asp:TableCell
>
</
asp:TableRow
>
</
asp:Table
>
<
script
type
=
"text/javascript"
>
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
return oWindow;
}
function CloseWithArg(arg) {
GetRadWindow().close(arg);
}
</
script
>
Environment: Internet Explorer 11 (11.0.12) with Document Mode Edge (Default), Telerik UI for ASP.NET AJAX Library Q2 2014 version 2014.2.724
​Steps to reproduce:
1. In Visual Studio, create a new ASP.NET Web Application using the Empty template and the Web Forms as a core reference.
2. Add references to Telerik.Web.UI and Telerik.Web.UI.Skins assemblies.
3. Add the Default.aspx Web Forms item into the root of the project.
4. In Default.aspx page, add the following HTML:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %><
br
>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!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"
></
telerik:RadScriptManager
>
<
telerik:RadEditor
ID
=
"RadEditor1"
runat
=
"server"
>
<
Snippets
>
<
telerik:EditorSnippet
Name
=
"2 Column Div Layout"
>
<!-- Row 1 -->
<
div
class
=
"row"
>
<
div
class
=
"span7"
>
<
div
class
=
"row"
>
<
div
class
=
"span4"
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et.</
p
>
</
div
>
<
div
class
=
"span3"
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et.</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<!-- Pad -->
<
div
class
=
"pad15"
></
div
>
<!-- Row 2 -->
<
div
class
=
"row"
>
<
div
class
=
"span7"
>
<
div
class
=
"row"
>
<
div
class
=
"span4"
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et.</
p
>
</
div
>
<
div
class
=
"span3"
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et.</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
</
telerik:EditorSnippet
>
</
Snippets
>
</
telerik:RadEditor
>
</
form
>
</
body
>
</
html
>
Actual Result:
<!-- Row 1 -->
<
div
class
=
"row"
>
<
div
class
=
"span7"
>
<
div
class
=
"row"
>
<
div
class
=
"span4"
>
<
p
>
<!-- Row 1 -->
<
div
class
=
"row"
>
<
div
class
=
"span7"
>
<
div
class
=
"row"
>
<
div
class
=
"span4"
>
</
div
>
</
div
>
</
div
>
</
div
>
</
p
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et.</
p
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et.</
p
>
<
p
>
<
div
class
=
"row"
>
<
div
class
=
"span7"
>
<
div
class
=
"row"
>
<
div
class
=
"span3"
>
</
div
>
</
div
>
</
div
>
</
div
>
<!-- Pad -->
<
div
class
=
"pad15"
> </
div
>
<!-- Row 2 -->
<
div
class
=
"row"
>
<
div
class
=
"span7"
>
<
div
class
=
"row"
>
<
div
class
=
"span4"
>
</
div
>
</
div
>
</
div
>
</
div
>
</
p
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et. </
p
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et. </
p
>
<
p
>
<
div
class
=
"row"
>
<
div
class
=
"span7"
>
<
div
class
=
"row"
>
<
div
class
=
"span3"
>
</
div
>
</
div
>
</
div
>
</
div
>
Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et.</
p
>
</
div
>
<
div
class
=
"span3"
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et.</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<!-- Pad -->
<
div
class
=
"pad15"
> </
div
>
<!-- Row 2 -->
<
div
class
=
"row"
>
<
div
class
=
"span7"
>
<
div
class
=
"row"
>
<
div
class
=
"span4"
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et.</
p
>
</
div
>
<
div
class
=
"span3"
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et.</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<!-- Row 1 -->
<
div
class
=
"row"
>
<
div
class
=
"span7"
>
<
div
class
=
"row"
>
<
div
class
=
"span4"
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et.</
p
>
</
div
>
<
div
class
=
"span3"
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et.</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<!-- Pad -->
<
div
class
=
"pad15"
> </
div
>
<!-- Row 2 -->
<
div
class
=
"row"
>
<
div
class
=
"span7"
>
<
div
class
=
"row"
>
<
div
class
=
"span4"
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et. </
p
>
</
div
>
<
div
class
=
"span3"
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et. </
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<!-- Row 1 -->
<
div
class
=
"row"
>
<
div
class
=
"span7"
>
<
div
class
=
"row"
>
<
div
class
=
"span4"
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et.</
p
>
</
div
>
<
div
class
=
"span3"
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et.</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<!-- Pad -->
<
div
class
=
"pad15"
> </
div
>
<!-- Row 2 -->
<
div
class
=
"row"
>
<
div
class
=
"span7"
>
<
div
class
=
"row"
>
<
div
class
=
"span4"
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et. </
p
>
</
div
>
<
div
class
=
"span3"
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,
suspendisse ac nec et. </
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<!-- Row 1 -->
<
br
>
<
div
class
=
"row"
><
br
>
<
div
class
=
"span7"
><
br
>
<
div
class
=
"row"
><
br
>
<
div
class
=
"span4"
><
br
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<
br
>
suspendisse ac nec et.</
p
><
br
>
</
div
><
br
>
<
div
class
=
"span3"
><
br
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<
br
>
suspendisse ac nec et.</
p
><
br
>
</
div
><
br
>
</
div
><
br
>
</
div
><
br
>
</
div
><
br
>
<!-- Pad -->
<
br
>
<
div
class
=
"pad15"
> </
div
><
br
>
<!-- Row 2 -->
<
br
>
<
div
class
=
"row"
><
br
>
<
div
class
=
"span7"
><
br
>
<
div
class
=
"row"
><
br
>
<
div
class
=
"span4"
><
br
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<
br
>
suspendisse ac nec et. </
p
><
br
>
</
div
><
br
>
<
div
class
=
"span3"
><
br
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<
br
>
suspendisse ac nec et.<
br
>
<!-- Row 1 -->
<
br
>
<
div
class
=
"row"
><
br
>
<
div
class
=
"span7"
><
br
>
<
div
class
=
"row"
><
br
>
<
div
class
=
"span4"
><
br
>
</
div
><
br
>
</
div
><
br
>
</
div
><
br
>
</
div
><
br
>
</
p
><
br
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<
br
>
suspendisse ac nec et.</
p
><
br
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<
br
>
suspendisse ac nec et.</
p
><
br
>
<
p
><
br
>
<
div
class
=
"row"
><
br
>
<
div
class
=
"span7"
><
br
>
<
div
class
=
"row"
><
br
>
<
div
class
=
"span3"
><
br
>
</
div
><
br
>
</
div
><
br
>
</
div
><
br
>
</
div
><
br
>
<!-- Pad -->
<
br
>
<
div
class
=
"pad15"
> </
div
><
br
>
<!-- Row 2 -->
<
br
>
<
div
class
=
"row"
><
br
>
<
div
class
=
"span7"
><
br
>
<
div
class
=
"row"
><
br
>
<
div
class
=
"span4"
><
br
>
</
div
><
br
>
</
div
><
br
>
</
div
><
br
>
</
div
><
br
>
</
p
><
br
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<
br
>
suspendisse ac nec et. </
p
><
br
>
<
p
>Enim ultrices, elementum phasellus. Mauris sed nulla sed, egestas feugiat a dictum libero, nunc sapien tri tique facilisis venenatis risus,<
br
>
suspendisse ac nec et. </
p
><
br
>
</
div
><
br
>
</
div
><
br
>
</
div
><
br
>
</
div
>
<
tlrk:RadComboBox
ID
=
"InternalComboBox"
runat
=
"server"
HighlightTemplatedItems
=
"true"
>
<
ItemTemplate
>
<
div
onclick
=
"StopPropagation(event)"
>
<
asp:CheckBox
ID
=
"ComboCheckBox"
runat
=
"server"
CssClass
=
"formTextElevenPx"
style
=
"vertical-align: middle;"
/>
<
span
id
=
"CheckBoxLabel"
runat
=
"server"
><%# DataBinder.Eval(Container, "Text")%></
span
>
</
div
>
</
ItemTemplate
>
</
tlrk:RadComboBox
>
<
script
type
=
"text/javascript"
>
//cancel bubbling
e.cancelBubble = true;
if (e.stopPropagation) {
e.stopPropagation();
}
}
function onCheckBoxClick_<% =uniqueKey %>() {
var combo = $find("<%= InternalComboBox.ClientID %>");
UpdateMessage(combo);
}
function UpdateMessage(combo) {
var items = combo.get_items();
var text = "";
for (var i = 1; i <
items.get_count
(); i++) {
var
item
=
items
.getItem(i);
var chk1 = $get(combo.get_id() + '_i' + i + '_ComboCheckBox');
if (chk1.checked)
text+= item.get_text() + ", ";
}
return text.trim();
}
</script>
protected string uniqueKey;
protected void Page_PreRender(object sender, EventArgs e)
{
this.uniqueKey = Guid.NewGuid().ToString("N");
foreach (RadComboBoxItem i in InternalComboBox.Items)
{
CheckBox cbx = i.FindControl("ComboCheckBox") as CheckBox;
if (cbx != null)
{
cbx.Attributes["onclick"] = "return onCheckBoxClick_" + uniqueKey + "()";
}
}