This is a migrated thread and some comments may be shown as answers.

Decorating treeview checkboxes in IE11

7 Answers 83 Views

FormDecorator

This is a migrated thread and some comments may be shown as answers.

Andreas asked on 26 Sep 2016, 07:13 AM

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

7 Answers, 1 is accepted

answered on 06 Oct 2016, 02:00 PM

Hi there,

I would suggest a new approach that works for IE11 too:

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Default" RenderMode="Lightweight" />

<div>

<telerik:RadTreeView ID="RadTreeView1" runat="server" Skin="Black" RenderMode="Lightweight" CheckBoxes="true">

<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" />

<script>

var PRIMARY_CLASS = "rfdPrimaryButton",

FLAT_CLASS = "rfdFlatButton",

INPUT_DISABLED_CSSCLASS = "rfdInputDisabled";

Telerik.Web.UI.RadFormDecorator.prototype._isEligibleForDecoration = function (element) {

var className = element.className;

if (className) {

var classes = className.split(" ");

var internalClasses = ["rtChk", "aspNetDisabled", PRIMARY_CLASS, FLAT_CLASS, INPUT_DISABLED_CSSCLASS];

for (var i = 0; i < classes.length; i++) {

if (!Array.contains(internalClasses, classes[i])) {

return false;

}

return true;

}

</script>

The script should be placed under the controls declarations and the RenderMode="Lightweight" should be set for the FormDecorator.

Using internalClasses = ["rtChk"..., we decorate all inputs with a class rtChk name.

Best regards,
Rumen
Telerik by Progress

Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.

answered on 13 Oct 2016, 01:28 PM

Hi,

Well, I'm sorry to say that this is still not working for us, most things did work but I then discovered that all code that has to do with getting the treenode in script is broken since the get_checkBoxElement function is returning null in your example...

In this code I added a OnClientNodeChecking:

<%@ 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 OnClientNodeChecking(sender, args)

{

alert(args.get_node().get_checkBoxElement());

}

</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" />

<script type="text/javascript">

var PRIMARY_CLASS = "rfdPrimaryButton",

FLAT_CLASS = "rfdFlatButton",

INPUT_DISABLED_CSSCLASS = "rfdInputDisabled";

Telerik.Web.UI.RadFormDecorator.prototype._isEligibleForDecoration = function (element)

{

var className = element.className;

if (className)

{

var classes = className.split(" ");

var internalClasses = ["rtChk", "aspNetDisabled", PRIMARY_CLASS, FLAT_CLASS, INPUT_DISABLED_CSSCLASS];

for (var i = 0; i < classes.length; i++)

{

if (!Array.contains(internalClasses, classes[i]))

{

return false;

}

return true;

}

</script>

</div>

</form>

</body>

</html>

When running this, and checking the nodes, the alert will display null!

Any other ideas?

Regards
Andreas

Accepted

answered on 20 Oct 2016, 08:49 AM

Hi Andreas,

Generally, the decorator uses an additional element to simulate the styling of the checkbox and replaces classes of the existing input element. This requires an additional workaround that relates to the TreeView and the checkBoxElement() method.

You can add the new workaround below the other one:

Telerik.Web.UI.RadTreeNode.prototype.get_checkBoxElement = function () {

$ = $telerik.$;

if (!this._checkBoxElement)

this._checkBoxElement = $(this.get_contentElement()).find(".rfdRealInput, .rtChk, .rtChecked, .rtUnchecked, .rtIndeterminate").get(0) || null;

return this._checkBoxElement;

}

Regards,
Danail Vasilev
Telerik by Progress

Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.