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

Decorating treeview checkboxes in IE11

7 Answers 34 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Andreas
Top achievements
Rank 1
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">
<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

Sort by
0
Rumen
Telerik team
answered on 28 Sep 2016, 12:00 PM
Hello,

You can force the browser to render the contents in IE10 mode with the following tag:

<meta http-equiv="X-UA-Compatible" content="IE=10"> 

This works fine on my end in IE11.

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.
0
Andreas
Top achievements
Rank 1
answered on 29 Sep 2016, 06:53 AM

Hi,

That is not even close to a solution for us since that will have lots of other bad side-effects for other things in our web-site!

Do you have another workaround?

Regards
Andreas

0
Rumen
Telerik team
answered on 03 Oct 2016, 04:15 PM
Hi Andreas,

Comment this line:

boxes.addClass('rtChk');

and test again the app in IE11.

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.
0
Andreas
Top achievements
Rank 1
answered on 03 Oct 2016, 06:35 PM

Well, this has other side-effects since the normal node.get_checkBoxElement() function on a node element will always return null (since the class isn't restored on the element)!

We have other code in our solution that uses the node.get_checkBoxElement() and checks various things!

Any other ideas?

Regards
Andreas

0
Rumen
Telerik team
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.
0
Andreas
Top achievements
Rank 1
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">
<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

0
Accepted
Danail Vasilev
Telerik team
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.
Tags
FormDecorator
Asked by
Andreas
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Andreas
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or