showing a hidden RadSplitBar does not work

3 posts, 0 answers
  1. Paul Evers
    Paul Evers avatar
    52 posts
    Member since:
    Oct 2011

    Posted 01 Mar 2012 Link to this post

    Hi,

    I have a RadSplitter (version Q1 2012) with two panes and one splitbar.
    At server-side I am hidding pane 2 and the splitbar

    pane2.Collapsed = true;
    splitbarTop.Visible = false;

    I want to show pane2 and the splitbar on the clientside in javascript

    var pane = splitter.getPaneById("pane2");
    var splitbar = $get(splitbarTop);
    pane.expand();
    splitbar.style.display = "";

    pane.expand works correct.

    The code for showing the splitbar is producing an error in IE9:
    "Microsoft JScript runtime error: Unable to get value of the property 'style': object is null or undefined"

    How can I show and hide a splitbar in jacascript?

    Paul
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 05 Mar 2012 Link to this post

    Hi Paul,

    RadSplitter does not offer the possibility to hide / show and/or dynamically add splitbars to the splitter client-side (using JavaScript). The error that you experience is due to the fact that the Visible property of the RadSplitBar is set to false. In such case the control is not rendered on the page at all.

    To achieve the required result I would suggest you to change the splitbar's visibility and pane collapse / expand state on the server using an AJAX request.

    All the best,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Paul Evers
    Paul Evers avatar
    52 posts
    Member since:
    Oct 2011

    Posted 06 Mar 2012 Link to this post

    I have solved this in the following manner:

    For opening a panel in jQuery:
    function CallPage(url, target, preset) {
        var splitterT = $find("splitterTop");
        if (target == "1") {
            var pane1 = splitterT.getPaneById("pane1");
            pane1.set_contentUrl(urlNew);
        }
        else if (target == "2") {
            var pane2 = splitterT.getPaneById("pane2");
      
            pane2.expand();
            pane2.set_contentUrl(urlNew);
      
            var splitbarT = splitterT.getSplitBarById("splitbarTop").get_element();
            splitbarT.style.borderRightWidth = "4px";
        }
    }

    For closing a panel in jQuery:
    function ClearSplitterPane(target) {
        if (target == "1") {
            var splitterT = $find("splitterTop");
            var pane1 = splitterT.getPaneById("pane1");
            pane1.set_contentUrl("");
        }
        else if (target == "2") {
            var splitterT2 = $find("splitterTop");
            var pane2 = splitterT2.getPaneById("pane2");
            pane2.set_contentUrl("");
            pane2.collapse();
     
            var splitbarT = splitterT2.getSplitBarById("splitbarTop").get_element();
            splitbarT.style.borderRightWidth = "0px";
        }
    }

    I set the borderRightWidth (in case the orientation of the splitter is vertical; if the orientation is horizontal you must use borderBottomWidth instead).

    Paul
Back to Top