:: Forum >>

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
Wednesday, June 13, 2007
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
Thursday, June 14, 2007
- 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
Thursday, June 14, 2007

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
Thursday, June 14, 2007
Very good demo - thank you very much!
Alex (ActiveWidgets)
Thursday, June 14, 2007
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
Friday, June 15, 2007
thanks carlos...it's very well...
Serkan Eksi
Monday, June 18, 2007
hi serkan

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

This topic is archived.


Back to support forum

Forum search