showing a hidden RadSplitBar does not work

[Paul Evers]

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

[Dobromir]

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

[Paul Evers]

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