3.2.0

Splitter Demo


you can use this usefull code example; if you have to use 2 grind in one form...

this demo shows how to resize the grids by a splitter...

<html>
<head>
    <script src="shared/aw/lib/aw.js"></script>
    <link href="shared/aw/styles/xp/aw.css" rel="stylesheet"></link>
    <link href="skin/default/_skin.css" rel="stylesheet"></link>
    <style>
        #Flx1 {left:0; top:0; height:100%; width:100%;}
        #Flx1 .aw-row-selector {width: 20px; text-align: center}
        #Flx1 .aw-mouseover-row .aw-row-selector {color: red}
        #Flx1 .aw-rows-selected .aw-row-selector {font-weight: bold}
        #Flx1 .aw-alternate-even {background: #fff;}
        #Flx1 .aw-alternate-odd {background: #eee;}
        #Flx1 .aw-rows-selected {background: #316ac5}
        #Flx1 .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
        #Flx1 .aw-grid-cell {border-right: 1px solid threedlightshadow;}

        #Flx2 {left:0; top:0; height:100%; width:100%;}
        #Flx2 .aw-row-selector {width: 20px; text-align: center}
        #Flx2 .aw-mouseover-row .aw-row-selector {color: red}
        #Flx2 .aw-rows-selected .aw-row-selector {font-weight: bold}
        #Flx2 .aw-alternate-even {background: #fff;}
        #Flx2 .aw-alternate-odd {background: #eee;}
        #Flx2 .aw-rows-selected {background: #316ac5}
        #Flx2 .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
        #Flx2 .aw-grid-cell {border-right: 1px solid threedlightshadow;}
    </style>
</head>


<body scroll="no">
    <table width=100% height=100% >
        <tr><td>
            Spliter Demo...
        <tr height=100% ><td>
            <table cellspacing=0 cellpadding=0 id=tab1 height=100% width=100%>
                <tr><td id=pane1 width=250 style="cursor:col-resize; border-right:4px solid #E2DECD;"><span id="Flx1"></span>
                 <td><span id="Flx2"></span>
                </tr>
            </table>
    </table>

    <script>
        var str = new AW.Formats.String;
        var num = new AW.Formats.Number;

        var Flx1 = new AW.UI.Grid;
         Flx1.setId("Flx1");
         Flx1.setHeaderText(["tantip", "tankod", "Maintaince Type"]);
         Flx1.setCellFormat([num, num, str]);
         Flx1.setColumnCount(3);
         Flx1.setColumnWidth([0, 0, 200]);
         Flx1.setSelectionMode("single-row");

        var Flx2 = new AW.UI.Grid;
         Flx2.setId("Flx2");
         Flx2.setHeaderText(["tantip", "Code", "Description"]);
         Flx2.setCellFormat([num, str, str]);
         Flx2.setColumnCount(3);
         Flx2.setColumnWidth([0, 80, 200]);
         Flx2.setSelectionMode("single-row");

        // Splitter/Sizer
        document.write('<DIV Name="SP1" Id="SP1" style="border:1px solid #999; position:absolute; visibility:hidden; zIndex:999; height:100% ;fontSize:1px; background-Color:#999;"></DIV>');
        var SP1 = document.getElementById('SP1');
        var p = document.getElementById('pane1');
        var Split_MinLeft;
        var Split_X;
        document.getElementById('pane1').attachEvent('onmousedown',splitDown);

        function splitDown(){
            if (event.offsetX > (p.offsetWidth-parseInt(p.style.borderRightWidth)) ) {
                Split_MinLeft    = event.clientX-event.offsetX;
                Split_MinLeft    = Split_MinLeft + 100;
                Split_X        = event.clientX;
                SP1.style.left    = Split_X-4;
                SP1.style.top    = 0;
                SP1.style.width    = 4;
                SP1.style.height= document.body.clientHeight;
                SP1.style.visibility='visible';
                document.attachEvent('onmousemove', splitMove);
                document.attachEvent('onmouseup', splitUp);
            }
        }
        function splitMove(){
            if (event.button==1){
                SP1.style.left= (event.clientX >= Split_MinLeft) ? event.clientX : Split_MinLeft;
            }
        }
        function splitUp(){
            if (event.button==1){
                p.width = p.offsetWidth + (parseInt(SP1.style.left) - Split_X);
                SP1.style.visibility='hidden';
                document.detachEvent('onmousemove', splitMove);
                document.detachEvent('onmouseup', splitUp);
            }
        }
    </script>
</body>
</html>
Serkan Eksi
June 13,
Hi Serkan,

The splitter demo looks quite good and useful.
Just a couple of comments:

- What is "skin/default/_skin.css" in the head section ? It works without it, so I guess it isn't required ?

- In FireFox, it throws an error "document.getElementById("pane1").attachEvent is not a function" and doesn't work. It works fine in IE7

Ankur
Ankur Motreja
June 14,
- i forgot that line... "skin/default/_skin.css" and it isn't required as you say.

- it may not be worked in firefox because of i didn't test it within firefox. but something like this should work for both IE and Firefox:

function AttachEvent(obj, eventName, eventHandler) {
if(obj) {
if(eventName.substring(0, 2) == “on”) {
eventName = eventName.substring(2,eventName.length);
}
if (obj.addEventListener){
obj.addEventListener(eventName, eventHandler, false);
} else if (obj.attachEvent){
obj.attachEvent(’on’+eventName, eventHandler);
}
}
}

AttachEvent(document, 'onmousemove', splitMove);
Serkan Eksi
June 14,

i've fixed the bug about firefox and test it within...
it works fine...

    // Splitter/Sizer
    document.write('<DIV Name="SP1" Id="SP1" style="border:1px solid #999; position:absolute; visibility:hidden; zIndex:999; height:100% ;fontSize:1px; background-Color:#999;"></DIV>');
    var SP1 = document.getElementById('SP1');
    var p = document.getElementById('pane1');
    var Split_MinLeft=100;
    var Split_X;
    attachEvent(document.getElementById('pane1'),'onmousedown',splitDown);

    function splitDown(e){
        if (!document.addEventListener) {e=event}
        if (e.clientX > (p.offsetWidth-parseInt(p.style.borderRightWidth)) ) {
            Split_X        = e.clientX;
            SP1.style.left    = Split_X-4;
            SP1.style.top    = 0;
            SP1.style.width    = 4;
            SP1.style.height= document.body.clientHeight;
            SP1.style.visibility='visible';
            attachEvent(document,'onmousemove', splitMove);
            attachEvent(document,'onmouseup', splitUp);
        }
    }
    function splitMove(e){
        if (!document.addEventListener) {e=event}
        SP1.style.left= (e.clientX >= Split_MinLeft) ? e.clientX : Split_MinLeft;
    }
    function splitUp(e){
        if (!document.addEventListener) {e=event}
        p.width = p.offsetWidth + (parseInt(SP1.style.left) - Split_X);
        SP1.style.visibility='hidden';

        detachEvent(document, 'onmousemove', splitMove);
        detachEvent(document, 'onmouseup', splitUp);
    }

    /* attach/detach Event for IE and FireFox */
    function attachEvent(obj, eventName, eventHandler){
        if (obj){
            if (obj.addEventListener){
                if (eventName.substring(0,2)=='on'){
                    eventName=eventName.substring(2,eventName.length);
                }
                obj.addEventListener(eventName, eventHandler, false);
            } else if (obj.attachEvent) {
                obj.attachEvent(eventName, eventHandler)
            }
        }
    }
    function detachEvent(obj, eventName, eventHandler){
        if (obj){
            if (obj.removeEventListener){
                if (eventName.substring(0,2)=='on'){
                    eventName=eventName.substring(2,eventName.length);
                }
                obj.removeEventListener(eventName, eventHandler, false);
            } else if (obj.attachEvent) {
                obj.detachEvent(eventName, eventHandler)
            }
        }
    }
Serkan Eksi
June 14,
Very good demo - thank you very much!
Alex (ActiveWidgets)
June 14,
Nice demo Serkan!!
Let me add a horizontal splitter to your good sample.
Seems to be a perfect U.I. for a master-detail or filter based data,
maybe a forum? :-)
Thanks
<html>
<head>
</style>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>
<script src="../../runtime/lib/aw.js"></script>
    <style>
        #Flx1 {left:0; top:0; height:100%; width:100%;}
        #Flx1 .aw-row-selector {width: 20px; text-align: center}
        #Flx1 .aw-mouseover-row .aw-row-selector {color: red}
        #Flx1 .aw-rows-selected .aw-row-selector {font-weight: bold}
        #Flx1 .aw-alternate-even {background: #fff;}
        #Flx1 .aw-alternate-odd {background: #eee;}
        #Flx1 .aw-rows-selected {background: #316ac5}
        #Flx1 .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
        #Flx1 .aw-grid-cell {border-right: 1px solid threedlightshadow;}

        #Flx2 {left:0; top:0; height:100%; width:100%;}
        #Flx2 .aw-row-selector {width: 20px; text-align: center}
        #Flx2 .aw-mouseover-row .aw-row-selector {color: red}
        #Flx2 .aw-rows-selected .aw-row-selector {font-weight: bold}
        #Flx2 .aw-alternate-even {background: #fff;}
        #Flx2 .aw-alternate-odd {background: #eee;}
        #Flx2 .aw-rows-selected {background: #316ac5}
        #Flx2 .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
        #Flx2 .aw-grid-cell {border-right: 1px solid threedlightshadow;}
 
        #Flx3 {left:0; top:0; height:100%; width:100%;}
        #Flx3 .aw-row-selector {width: 20px; text-align: center}
        #Flx3 .aw-mouseover-row .aw-row-selector {color: red}
        #Flx3 .aw-rows-selected .aw-row-selector {font-weight: bold}
        #Flx3 .aw-alternate-even {background: #fff;}
        #Flx3 .aw-alternate-odd {background: #eee;}
        #Flx3 .aw-rows-selected {background: #316ac5}
        #Flx3 .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
        #Flx3 .aw-grid-cell {border-right: 1px solid threedlightshadow;}

    </style>
</head>


<body scroll="no">
    <table width=100% height=100% >
        <tr><td>
            Spliter Demo...
        <tr height=100% ><td>
            <table cellspacing=0 cellpadding=0 id=tab1 height=100% width=100%>
                <tr><td id=pane1 width=250 style="cursor:col-resize; border-right:6px solid #E2DECD;"><span id="Flx1"></span></td>
                 <td>
                 <table cellspacing=0 cellpadding=0 id=tab2 height=100% width=100%>
                <tr><td id=pane2  height=250 style="cursor:row-resize; border-bottom:6px solid #E2DECD;">
                <span id="Flx2"></span>
                   </td></tr>
                      <tr><td>
                      <span id="Flx3"></span>
                       </td></tr>
                  </table>
                 </td>
                </tr>
            </table>
    </table>

    <script>
        var str = new AW.Formats.String;
        var num = new AW.Formats.Number;

        var Flx1 = new AW.UI.Grid;
         Flx1.setId("Flx1");
         Flx1.setHeaderText(["tantip", "tankod", "Maintaince Type"]);
         Flx1.setCellFormat([num, num, str]);
         Flx1.setColumnCount(3);
         Flx1.setColumnWidth([0, 0, 200]);
         Flx1.setSelectionMode("single-row");

        var Flx2 = new AW.UI.Grid;
         Flx2.setId("Flx2");
         Flx2.setHeaderText(["tantip", "Code", "Description"]);
         Flx2.setCellFormat([num, str, str]);
         Flx2.setColumnCount(3);
         Flx2.setColumnWidth([0, 80, 200]);
         Flx2.setSelectionMode("single-row");
         
                 var Flx3 = new AW.UI.Grid;
         Flx3.setId("Flx3");
         Flx3.setHeaderText(["tantip", "Code", "Description"]);
         Flx3.setCellFormat([num, str, str]);
         Flx3.setColumnCount(3);
         Flx3.setColumnWidth([0, 80, 200]);
         Flx3.setSelectionMode("single-row");


//////////////   Splitter/Sizer ( Vertical)
    document.write('<DIV Name="SP1" Id="SP1" style="border:1px solid #999; position:absolute; visibility:hidden; zIndex:999; height:100% ;fontSize:1px; background-Color:#999;"></DIV>');
    var SP1 = document.getElementById('SP1');
    var p = document.getElementById('pane1');
    var Split_MinLeft=100;
    var Split_X;
    attachEvent(document.getElementById('pane1'),'onmousedown',splitDown);

    function splitDown(e){
        if (!document.addEventListener) {e=event}
        if (e.clientX > (p.offsetWidth-parseInt(p.style.borderRightWidth)) ) {
            Split_X        = e.clientX;
            SP1.style.left    = Split_X-6;
            SP1.style.top    = 0;
            SP1.style.width    = 6;
            SP1.style.height= document.body.clientHeight;
            SP1.style.visibility='visible';
            attachEvent(document,'onmousemove', splitMove);
            attachEvent(document,'onmouseup', splitUp);
        }
    }
    function splitMove(e){
        if (!document.addEventListener) {e=event}
        SP1.style.left= (e.clientX >= Split_MinLeft) ? e.clientX : Split_MinLeft;
    }
    function splitUp(e){
        if (!document.addEventListener) {e=event}
        p.width = p.offsetWidth + (parseInt(SP1.style.left) - Split_X);
        SP1.style.visibility='hidden';

        detachEvent(document, 'onmousemove', splitMove);
        detachEvent(document, 'onmouseup', splitUp);
    }


//////////////   Splitter/Sizer ( Horizontal)
    document.write('<DIV Name="ZSP1" Id="ZSP1" style="border-top:6px solid #999; position:absolute; visibility:hidden; zIndex:999; height:6px; fontSize:1px; "></DIV>');
//document.getElementById('ZSP1').style.left = '250px';

    var ZSP1 = document.getElementById('ZSP1');
    var Zp = document.getElementById('pane2');
    var ZSplit_MinTop=100;
    var ZSplit_Y;
    var ZXp = document.getElementById('Flx3');
         
    attachEvent(document.getElementById('pane2'),'onmousedown', ZsplitDown);

    function ZsplitDown(e){
if (!document.addEventListener) {e=event}
   if (e.clientY > ( ZXp.offsetTop - 5 ) && e.clientY < ( ZXp.offsetTop + 2) ) {

            ZSplit_Y        = e.clientY;
 //           ZSP1.style.left    = 0;
 //          ZSP1.style.marginLeft    = SP1.style.left;
            ZSP1.style.top    = ZSplit_Y-6;
            ZSP1.style.height    = 6;
          ZSP1.style.width    = 3000;
//            ZSP1.style.width    = Zp.style.width;
            ZSP1.style.visibility='visible';
            attachEvent(document,'onmousemove', ZsplitMove);
            attachEvent(document,'onmouseup', ZsplitUp);
        }
    }
    function ZsplitMove(e){
        if (!document.addEventListener) {e=event}
        ZSP1.style.top= (e.clientY >= ZSplit_MinTop) ? e.clientY : ZSplit_MinTop;
    }
    function ZsplitUp(e){
        if (!document.addEventListener) {e=event}
        Zp.height = Zp.offsetHeight + (parseInt(ZSP1.style.top) - ZSplit_Y);
        ZSP1.style.visibility='hidden';

        detachEvent(document, 'onmousemove', ZsplitMove);
        detachEvent(document, 'onmouseup', ZsplitUp);
    }

//////////////////////////////////////////////////////
    /* attach/detach Event for IE and FireFox */
    function attachEvent(obj, eventName, eventHandler){
        if (obj){
            if (obj.addEventListener){
                if (eventName.substring(0,2)=='on'){
                    eventName=eventName.substring(2,eventName.length);
                }
                obj.addEventListener(eventName, eventHandler, false);
            } else if (obj.attachEvent) {
                obj.attachEvent(eventName, eventHandler)
            }
        }
    }
    function detachEvent(obj, eventName, eventHandler){
        if (obj){
            if (obj.removeEventListener){
                if (eventName.substring(0,2)=='on'){
                    eventName=eventName.substring(2,eventName.length);
                }
                obj.removeEventListener(eventName, eventHandler, false);
            } else if (obj.attachEvent) {
                obj.detachEvent(eventName, eventHandler)
            }
        }
    }
    </script>
</body>
</html>
Carlos
June 15,
thanks carlos...it's very well...
Serkan Eksi
June 18,
hi serkan

how can i use this splitter with min-max width and height, and more vertical splitter ?
Daniel-S
June 26,

This topic is archived.

See also:


Back to support forum