If an object such as a button has an existing cssclass defined, will RadFormDecorator override the definition? Is there a way to force it to override any existing definition? Also, are LinkButtons covered?
I skipped Logincontrols in rfd like this:
<telerik:RadFormDecorator ID="RadFormDecorator1" Skin="Default" Visible="true" DecoratedControls="All" ControlsToSkip="LoginControls,Buttons" EnableRoundedCorners="false" runat="server" />
but they are styled with rfd:
<table id="cph_content_Login1" class="rfdLoginControl" style="width:100%;border-collapse:collapse;" cellspacing="0" cellpadding="0">
What's wrong here?
Marc
Firefox 63 introduces a change that affects the checkbox and radio buttons styled by RadFormDecorator in Classic rendering. We are working on resolving the problem, meanwhile you can workaround it in one of the ways provided in the bug's public item:
https://feedback.telerik.com/Project/108/Feedback/Details/258566
This issue just started to happen yesterday. It should be very easy to reproduce. It only happens in firefox v63, which was just updated on my PC yesterday.
Please click to view video demonstration that displays the issue (YouTube). I've posted this sample page online so it can be viewed here: https://demoqa.eadoptonline.com/checkboxtest.aspx
If you use firefox < v63 it will display normally, if you have firefox v63 (current latest release as of this posting) each checkbox is duplicated.
Relevant code to reproduce the issue:
<
asp:Repeater
runat
=
"server"
ID
=
"Repeater1"
>
<
HeaderTemplate
>
<
table
>
</
HeaderTemplate
>
<
ItemTemplate
>
<
tr
>
<
td
id
=
"row"
runat
=
"server"
class
=
"bodycopy"
>
<
asp:Checkbox
ID
=
"chkApproved"
runat
=
"server"
/> how many times does the checkbox appear on each row?
</
td
>
</
tr
>
</
ItemTemplate
>
<
FooterTemplate
>
</
table
>
</
FooterTemplate
>
</
asp:Repeater
>
Code behind is unimportant
protected void Page_Load(object sender, EventArgs e)
{
List<
string
> datasource = new List<
string
>();
datasource.Add("asdfda");
datasource.Add("asdfdaadsf");
datasource.Add("asdfdadsfa");
datasource.Add("asdfdaadf");
datasource.Add("asdfdaafad");
Repeater1.DataSource = datasource;
Repeater1.DataBind();
}
The form decorator in my master page is as follows. The skin comes from web.config but it doesn't matter what i use the problem appears tied to the render mode, not the skin.
<
telerik:RadFormDecorator
ID
=
"RadFormDecorator1"
runat
=
"server"
RenderMode
=
"Classic"
/>
Thanks!
-Mark
Could someone help me understand the differences between these two controls and why one would be used over the other?
After reading the documentation they seem VERY VERY similar so I'm not sure why both exists.
Cheers, Rob.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DockTest.aspx.vb" Inherits="DockTest" %> |
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
<!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>Test Page</title> |
</head> |
<body> |
<form id="form1" runat="server"> |
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server"> |
</telerik:RadStyleSheetManager> |
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"> |
</telerik:RadScriptManager> |
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" /> |
<br /> |
<br /> |
<table> |
<tr> |
<td style="padding: 20px 0px 0px 40px;"> |
<table cellpadding="10" cellspacing="0" border="0"> |
<tr> |
<td> |
<telerik:RadListBox ID="RadListBox1" runat="server" SelectionMode="Multiple" Height="160px" > |
<Items> |
<telerik:RadListBoxItem Text="Arts" Value="Arts" /> |
<telerik:RadListBoxItem Text="Biographies" /> |
<telerik:RadListBoxItem Text="Children's Books" /> |
<telerik:RadListBoxItem Text="Computers & Internet" /> |
<telerik:RadListBoxItem Text="Cooking" /> |
<telerik:RadListBoxItem Text="History" /> |
<telerik:RadListBoxItem Text="Fiction" /> |
<telerik:RadListBoxItem Text="Mystery" /> |
<telerik:RadListBoxItem Text="Nonfiction" /> |
<telerik:RadListBoxItem Text="Science Fiction" /> |
<telerik:RadListBoxItem Text="Travel" /> |
</Items> |
</telerik:RadListBox> |
</td> |
</tr> |
<tr> |
<td> |
<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple" > |
<asp:ListItem Text="Arts"></asp:ListItem> |
<asp:ListItem Text="Biographies"></asp:ListItem> |
<asp:ListItem Text="Children's Books"></asp:ListItem> |
<asp:ListItem Text="Computers & Internet"></asp:ListItem> |
<asp:ListItem Text="Cooking"></asp:ListItem> |
<asp:ListItem Text="History"></asp:ListItem> |
<asp:ListItem Text="Fiction"></asp:ListItem> |
<asp:ListItem Text="Mystery"></asp:ListItem> |
<asp:ListItem Text="Nonfiction"></asp:ListItem> |
<asp:ListItem Text="Science Fiction "></asp:ListItem> |
<asp:ListItem Text="Travel"></asp:ListItem> |
</asp:ListBox> |
</td> |
</tr> |
</table> |
</td> |
<td> |
</td> |
</tr> |
</table> |
</form> |
</body> |
</html> |
We are seeing a JavaScript error when we select an Option in a Select control with a ASP Postback on IE11 via keyboard input.
<%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" %>
<
script
runat
=
"server"
>
void Page_Load(object sender, EventArgs e)
{
decorator.DecoratedControls = FormDecoratorDecoratedControls.Select;
}
</
script
>
<!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
>
<
title
>DD Test Page</
title
>
</
head
>
<
body
>
<
form
id
=
"DialogForm"
runat
=
"server"
>
<
telerik:RadScriptManager
runat
=
"server"
/>
<
telerik:RadAjaxManager
runat
=
"server"
/>
<
telerik:RadFormDecorator
ID
=
"decorator"
runat
=
"server"
DecorationZoneID
=
"Panel1"
EnableEmbeddedSkins
=
"false"
RenderMode
=
"Lightweight"
/>
<
telerik:RadAjaxPanel
ID
=
"Panel1"
runat
=
"server"
>
<
asp:DropDownList
ID
=
"DD1"
runat
=
"server"
AutoPostBack
=
"true"
>
<
asp:ListItem
Text
=
"[Select]"
Value
=
""
/>
<
asp:ListItem
Text
=
"T1"
Value
=
"1"
/>
<
asp:ListItem
Text
=
"T2"
Value
=
"2"
/>
</
asp:DropDownList
>
<
asp:Button
runat
=
"server"
Text
=
"Refresh"
/>
</
telerik:RadAjaxPanel
>
</
form
>
</
body
>
</
html
>
Reproduce by clicking the DropDown control, and then pressing 'T', and then clicking on a blank section of the page.
Do any workarounds exist for avoiding this error?
Hi,
We are using a workaround, once provided by you, to decorate checkboxes in treeview.
This was working fine until the new 2016 Q3 release...
In IE11, the hack doesn't work anymore, all other browsers are working!
The problem is that after a postback, all checked nodes are unchecked in IE11!
Is there an other workaround available, or can I do anything to make this work in IE11 again?
The workaround that work in previous versions looked like this:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="treeview.aspx.vb" Inherits="TestaTredjepartWeb.treeview" %>
<!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
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"s"
runat
=
"server"
>
</
asp:ScriptManager
>
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function pageLoad()
{
var $ = $telerik.$;
var tree = $('#<%= RadTreeView1.ClientID %>');
var decorator = $find('<%= RadFormDecorator1.ClientID %>');
var boxes = $('input[type*=checkbox]');
boxes.removeAttr('class');
decorator.decorate(document.documentElement);
boxes.addClass('rtChk');
}
//Workaround 1 - attach to the OnClientNodeChecking event and manually set the decorator classes:
function OnClientNodeChecking(sender, args)
{
var decoratedCheckBox = $telerik.$(args.get_node().get_element()).find('input.rfdRealInput').next()[0];
if (decoratedCheckBox.className.indexOf("Unchecked") != -1)
{
decoratedCheckBox.className = "rfdCheckboxChecked";
} else
{
decoratedCheckBox.className = "rfdCheckboxUnchecked";
}
}
//Workaround 2 - remove the preventDefault() method of the TreeView when the checkbox is decorated ($target[0].id.indexOf("RadFormDecorator") == -1):
//Telerik.Web.UI.RadTreeView.prototype._preventLabelDefault = function (nodeElement, e) {
// $ = $telerik.$;
// var target = $telerik.getTouchTarget(e),
// $target = $(target),
// targetIsLabelDescendant = $(nodeElement).find("label").eq(0).has(e.target).length !== 0;
// //We should not prevent the default when the target is a link or the checkbox itself.
// //Also when the target is not a direct descendant of the label, which is the case when templates are used.
// if (targetIsLabelDescendant && $target[0].id.indexOf("RadFormDecorator") == -1 && !$target.is("a") && !$target.is("input")) {
// e.preventDefault();
// }
//};
</
script
>
</
telerik:RadCodeBlock
>
<
telerik:RadFormDecorator
ID
=
"RadFormDecorator1"
runat
=
"server"
DecoratedControls
=
"Default"
/>
<
div
>
<
telerik:RadTreeView
ID
=
"RadTreeView1"
runat
=
"server"
RenderMode
=
"Lightweight"
CheckBoxes
=
"true"
OnClientNodeChecking
=
"OnClientNodeChecking"
>
<
Nodes
>
<
telerik:RadTreeNode
Text
=
"aaa"
>
<
Nodes
>
<
telerik:RadTreeNode
Text
=
"123"
/>
<
telerik:RadTreeNode
Text
=
"234"
/>
<
telerik:RadTreeNode
Text
=
"345"
/>
<
telerik:RadTreeNode
Text
=
"456"
/>
<
telerik:RadTreeNode
Text
=
"567"
/>
</
Nodes
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeView
>
<
asp:Button
ID
=
"Button1"
runat
=
"server"
Text
=
"Click to do postback"
/>
</
div
>
</
form
>
</
body
>
</
html
>
Regards
Andreas
Hi,
Checkboxes and radiobuttons in Microsoft Edge browser with Lightweight render mode doesn't work at all!
You can see this in your demo:
http://demos.telerik.com/aspnet-ajax/formdecorator/examples/overview/defaultcs.aspx
When using classic render mode it works!
RegardsHi
When using form decorator with Internet Explorer 11 to decorate asp checkboxes, if I try to set the checked property using JavaScript;
var
list = document.getElementById(
"<%=CheckBoxList1.ClientID%>"
);
var
chklist = list.getElementsByTagName(
"input"
);
for
(
var
i = 0; i < chklist.length; i++) {
if
(chklist[i].type ===
"checkbox"
) { chklist[i].checked =
false
; }
}
the action gets executed but the checks remain on the boxes. If I take the decoration off it works as usual. This only happens on IE 11, it works fine on Firefox and Chrome as well as older versions of IE.
Is there a work around besides taking decoration off?
thanks