3.2.0
Forum Demo Guide API Store

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:

Basic Knowledge Demo #3 Checkboxes and Two Combo lists (set and get values) G Cayman (13)
Basic Knowledge Demo #2 (Link to URL list, or Drill to DB Record data) G Cayman (5)
Mac Firefox 1.5.0.6 usually fails to bring up grid demos on your site Scott McDaniel (4)
Basic Knowledge Demo, (LastRow value) and more. G Cayman (3)
Basic Knowledge Demo #4 Get data from DB Edit-Update -Using Php/PEAR DB into Access or mySQL (full round trip) EXAMPLE G. Cayman (1)
Demo version for development purpose? Ronny J (1)
Error on demo code miguelc (1)
Free Trial Demo has incorrect sorting Jeff (1)
Row repaint or refresh demo, Why it is not working?, very usefull for beginners, pls help desperate developer (0)
Scrolling Grid Offset Way Out Chad (6)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us