Decorating treeview checkboxes in IE11

8 posts, 1 answers
  1. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 26 Sep Link to this post

    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

  2. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 28 Sep Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 29 Sep in reply to Rumen Link to this post

    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

  5. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 03 Oct Link to this post

    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.
  6. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 03 Oct in reply to Rumen Link to this post

    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

  7. Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 06 Oct Link to this post

    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.
  8. Andreas
    Andreas avatar
    137 posts
    Member since:
    May 2008

    Posted 13 Oct in reply to Rumen Link to this post

    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

  9. Answer
    Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 20 Oct Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017