Questions on UI for ASP.NET AJAX Forum

1 answer

48 views

FormDecorator is not theming scrollbars in a RadGrid

Please have a look at the following demo https://demos.telerik.com/aspnet-ajax/grid/examples/functionality/scrolling/scrolling/defaultcs.aspx?skin=Sunset.

I have a similar scenario of a page with a grid that also has a FormDecorator whose DecoratedControls property is set to All, yet the scrollbars in the grid on this page are not getting styled according to the Sunset theme. If I look at the FormDecorator theming demo at https://demos.telerik.com/aspnet-ajax/formdecorator/examples/overview/defaultcs.aspx then I can see that the scrollbars are being styled by the FormDecorator for the Sunset theme, but I don't see it for the grid scrollbars in my page even though the grid theme is set to Sunset.

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" 
DecoratedControls="All" EnableViewState="true" 
ViewStateMode="Disabled" ControlsToSkip="None" EnableAjaxSkinRendering="true" />

When I see the html tag in Chrome's DevTools > Elements, I see the rfdScrollBars class is there as in code below, yet its not getting applied to the grid.

<html xmlns="http://www.w3.org/1999/xhtml" 
class="t-chrome t-chrome129 t-chrome t-chrome129 k-webkit k-webkit129 
RadForm RadForm_Sunset rfdButton rfdScrollBars rfdZone rfdLabel
rfdTextbox rfdTextarea rfdFieldset rfdRadio
 rfdCheckbox rfdGrids rfdRoundedCorners" style="">

FormDecorator

Grid

answered on 26 Sep 2024

2 answers

49 views

Can a user control be excluded from RadFormDecorator's action?

I have an aspx page that has a user control with an id of MainMenu. This page also has a form decorator, which is decorating the elements in MainMenu user control.

Is it possible to exclude the user control MainMenu from having form decorator classes being applied to it? If yes, then how would I do it?

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" RenderMode="Auto"  EnableAjaxSkinRendering="False"/>
<uc1:MainMenu runat="server" ID="MainMenu"/>

FormDecorator

answered on 26 Sep 2024

3 answers

154 views

Override existing cssclass tag

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?

FormDecorator

answered on 08 Sep 2020

3 answers

102 views

LoginControls skipped but styled

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:

What's wrong here?

Marc

FormDecorator

answered on 13 Nov 2019

0 answers

233 views

Duplicated Checkboxes and Radio buttons in Firefox 63

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

FormDecorator

asked on 29 Oct 2018

5 answers

127 views

Issue with RadFormDecorator, templated checkboxes and Firefox v63

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

FormDecorator

answered on 29 Oct 2018

3 answers

80 views

FormDecorator vs. SkinManager?

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.

FormDecorator

answered on 20 Sep 2018

2 answers

128 views

Problem with RadFormDecorator - Multiple selection in ASP ListBox

Hi,
I noticed a strange problem with ASP ListBox when RadFormDecorator is included in page. The multiple selection mode for ASP ListBox works fine when there is no RadFormDecorator in page. But when I included RadFormDecorator in page the ASP ListBox selection mode turns to Single mode though I have explicitly mentioned SelectionMode as Multiple. However, RadListBox works fine in both the cases.
This is with respect to RadControls 2009 Q3 version.

Please take a look at this issue and any solution would be very helpful to me.

The sample code and output snapshot are as follows:

    
            <%@ 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 &amp; 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 &amp; 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>

Output snapshot: please find the attached file.

Thanks & Regards,
Amith V.A.

FormDecorator

answered on 28 Dec 2017

1 answer

90 views

Javascript Error in IE11 with Decoration of Select Control

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?

FormDecorator

answered on 10 Nov 2017

7 answers

100 views

Decorating treeview checkboxes in IE11

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>