Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
635
not getting Websplitter Id
posted

Hi,

 I have 3 panes in websplitter.Since my div in 3rd pane was going outside i used the initialize event for making it inside 3rd pane.now on the divarrow click i have called the JavaScript function collapse() but i am not getting splitter inside this function using $find it returns null.

function collapse() {
            var splitter = $find('<%=Splitter.ClientID%>');
                      alert(splitter);
            var pane = splitter.getPaneAt(0);
            alert(pane);
            var size = pane.get_size();
            var timer = setInterval(function () {
                size -= 20;
                pane.set_size(Math.max(10, size));
                if (size <= 10) {
                    clearInterval(timer);
                    var barFor1stPane = splitter._elements['b0'];
                    // or
                    //var barFor1stPane = $(splitter.get_element()).find("[mkr='b0']")[0];
                    barFor1stPane.style.display = 'none';
                }
            }, 30);

        }

    function initSplitter(splitter) {
            var tbl = splitter._elements.tbl;
            if (tbl)
                tbl.style.tableLayout = 'auto';
        }

    <cc1:WebSplitter ID="Splitter" runat="server" BorderStyle="Solid" BorderColor="Black"
        BorderWidth="3px" ClientIDMode="Static" Style="display: block; height: 100%;
        position: absolute; visibility: visible; left: 5px; right: 100px; top: 65px;
        background-color: #F0F0F0; z-index: 999">
        <ClientEvents Initialize="intialize" />
        <Panes>
            <cc1:SplitterPane runat="server" Size="30%" ScrollBars="Hidden" Style="height: 100%"
                CollapsedDirection="None" Locked="true">
                <Template>

    <div id="test1" style="position: relative; width: 100%; height: 100%; z-index: 999">
                        <div id="header" class="x-panel-header x-unselectable" style="-moz-user-select: none;
                            overflow: visible; top: 0px;">
                            <asp:Label ID="panelheader" runat="server" Text="Object Reader" CssClass="x-panel-header-text"></asp:Label>
                            <div id="dvArrow" class="x-tool x-tool-toggle x-tool-collapse-west" onclick="collapse()">
                            </div>
                        </div>

    </div>
                </Template>
            </cc1:SplitterPane>

    <cc1:SplitterPane runat="server" Size="40%" Style="height: 100%;" CollapsedDirection="None">
                <Template>

</Template>
            </cc1:SplitterPane>

    <cc1:SplitterPane runat="server" Size="30%" CollapsedDirection="None" Locked="true"
                Style="height: 100%">
                <Template>

<div></div>

</Template>
            </cc1:SplitterPane