Saving updates to a database when using an input template.

Hi,

I am generating a grid from a database and can use the input template (described in other threads on this site) to edit the values. This works great, however I want to write the changes back to the database.

Does anyone know how to do this or have any code that does it.

Also on a slightly different note does anyone know how to show the cursor when editing cells.

Thanks in advance for any responses.

Rag!

February 25,

Problem with cursor seem to be mozilla bug, but there is a workaround:

css:

.active-edit-mode {
            overflow: auto;
            padding: 0px;
            vertical-align: top;
        }

        .active-templates-input {
            width: 100%;
            height: 100%;
            margin: -1px 0px;
            padding: 0px 5px;
            border: 1px solid #666;
            font: menu;
            line-height: 1.4em;
        }

        .active-templates-input.gecko {
            margin: 0px;
        }

        .active-templates-row, .active-controls-grid {
            -moz-user-select: text;
        }

small change in edit template (className += " active-edit-mode "):

function switchToEditMode(){
        if (template) {
            switchToTextMode()
        }
        template = this;
        template.element().className += " active-edit-mode ";
        template.element().innerHTML = editor;
        editor.element().focus();
    }

Alex (ActiveWidgets)

February 25,

I'm guessing you will have to save the data into html parameters with a javascript routine. (eg: create like: "<input type=hidden name=mydata>" Then pass param/submit to php, jsp, ect for db insert.

February 25,

Thanks for patch, I now have a cursor! :o)

Thanks also for the hint on saving data, as you say I can push all the data into an input and parse it server side.

Rag!

February 26,

Hi rag! or alex,
This subject is important for me. I cant do any working example.
Please send me any simple working example.
An editable gird, user changes it, then save it back into database.
Thanks.

debdebe

May 5,

<? 
include("./functions.inc");
$con=connect();

$value = $_REQUEST['val'];
$rowid = $_REQUEST['row'];
$action = $_REQUEST['action'];

if ($action == 1){
$sql = "UPDATE table1 set cc=$val where c=$rowid";
$stmt=ociparse($con,$sql);
ociexecute($stmt);
}
?>
<html>
<head>
    <title>Hob's editable grid example</title>
    <style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>

    <!-- ActiveWidgets stylesheet and scripts -->
    <link href="./grid.css" rel="stylesheet" type="text/css" ></link>
    <script src="./grid.js"></script>

    <!-- grid format -->
    <style>
        .active-controls-grid {height: 100%; font: menu;}

        .active-column-0 {width:  80px;}
        .active-column-1 {width: 200px;}
        .active-column-2 {text-align: right;width: 200px;}

        .active-grid-column {border-right: 1px solid threedlightshadow;}
        .active-grid-row {border-bottom: 1px solid threedlightshadow;}
        .active-templates-input { 
            overflow: hidden; 
            width: 100%; 
            height: 100%; 
            padding: 0px 5px; 
            margin: -1px 0px; 
            border: 1px solid #666; 
            vertical-align: middle; 
            font: menu; 
            line-height: 1.4em; 
        } 

        .active-templates-input.gecko { 
            display: block; 
            margin: 0px; 
        } 

    </style>

    <!-- grid data -->
    <script>
    if (!window.My) My=[]; 
if (!My.Templates) My.Templates=[]; 

My.Templates.Input = Active.Templates.Text.subclass(); 

My.Templates.Input.create = function() 
{ 
    var obj = this.prototype; 

//    editor is not part of the template, 
//    there is only one single instance of editor object. 
    var editor = new Active.HTML.INPUT; 
    editor.setClass("templates", "input"); 
    editor.setAttribute("type", "text"); 
    editor.setAttribute("value", function(){ 
        return template.getItemProperty("text"); 
    }); 

//    template variable provides temporary reference 
//    to the parent template during edit mode. 
    var template; 

    function switchToEditMode(){ 
        if (template) { 
            switchToTextMode() 
        } 
        template = this; 
        template.element().style.padding = 0; 
        template.element().innerHTML = editor; 
        editor.element().focus(); 
    } 

    obj.setEvent("ondblclick", switchToEditMode); 

    function switchToTextMode(){ 
        var value =    editor.element().value; 
        template.setItemProperty("text", value); 
        template.refresh(); 
        template = null; 
    } 

    editor.setEvent("onblur", switchToTextMode); 
}; 

My.Templates.Input.create(); 

var myData = new Array();

<?


$name = array("c","cc", "ccc");
$sql = "SELECT c , cc, ccc  FROM table1";
$stmt=ociparse($con,$sql);
ociexecute($stmt);
OCIFetchStatement($stmt,$row,0,-1,OCI_FETCHSTATEMENT_BY_ROW);
    foreach($row as $key=>$value){
        echo "myData.push([";
        foreach ($name as $k1=>$v1){
        echo "\"".$value[$v1]."\",";
        }
        echo " ]);";
    }
?>		
var myColumns = [
            "Ticker", "Company Name", "Market Cap."
        ];

    </script>
</head>
<body>
<form name="form" method="POST">
    <script>
    
//    create ActiveWidgets Grid javascript object 
    var obj = new Active.Controls.Grid; 

    //    create editable text template 
    var template = new My.Templates.Input; 

    //    assign new template to all columns 
    obj.setColumnTemplate(template); 

    //    provide methods for getting and setting data 
    obj.getDataText = function(i, j){return myData[i][j]}; 
    obj.setDataText = function(value, i, j){myData[i][j] = value}; 

    //    set number of rows/columns 
    obj.setRowProperty("count", 20); 
    obj.setColumnProperty("count", 3); 
    
var row = obj.getTemplate("row");
row.setEvent("onkeydown",function(){this.action("myAction")});
obj.setAction("myAction",function(src){
    														if (event.keyCode==13) {
                                                                    var i= obj.getProperty("selection/index");
                                                                    document.form.val.value=obj.getDataProperty("text",i , 1) ;
                                                                    alert ("c will be "+obj.getDataProperty("text",i , 1));
                                                                    document.form.submit();
                                                            }
                                                         });
    
    //   write grid html to the page 
    document.write(obj); 

    </script>
    <input type="hidden" value="" name="val" id="val">
    <input type="hidden" value="1" name="action" id="action">
    </form>
</body>
</html>

hob

May 5,

oups missed a bit there...

obj.setAction("myAction",function(src){ 
                                                            if (event.keyCode==13) { 
                                                                    var i= obj.getProperty("selection/index"); 
                                                                    document.form.val.value=obj.getDataProperty("text",i , 1) ; 
document.form.row.value=obj.getDataProperty("text",i , 0) ; 
                                                                    alert ("c will be "+obj.getDataProperty("text",i , 1)); 
                                                                    document.form.submit(); 
                                                            } 
                                                         }); 
     
    //   write grid html to the page 
    document.write(obj); 
</script> 
    <input type="hidden" value="" name="val" id="val"> 
    <input type="hidden" value="" name="row" id="row"> 
    <input type="hidden" value="1" name="action" id="action"> 
    </form> 
</body> 
</html>

hob

May 5,

it works with php with oracle conn...
you must change the the cells in second column. not first...
well guess its up to you to implement the rest...

hob

hob

May 5,

Hallo,

we also want to make changes on the server.
In our case we want to assemble changes in the grid to realise a undo by each cell-value.

So what about MSXML2.XMLHTTP instead of Form.submit()?
Any experiences?

Karsten

Karsten

May 18,

Hi,

I prove this example to save the grid vars in database and this example run perfect in IE but not work in Mozilla.

I have Mozilla 1.7.7 and IE 6.0

I'm interested to use this js in Mozilla navigator, In my company we used all mozilla.

Mario Nunes

June 23,

Sorry,

This example work Ok in Mozilla and IE.

it did not work to me, because the <form> is in <td> tag, if you put the <form> before <table> and close </form> after </table> the example runs ok.

<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>


<link href="js/runtime/styles/xp/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="js/runtime/lib/grid.js"></script>
<script src="js/source/lib/system/template.js"></script>

<link type="text/css" rel="StyleSheet" href="js/calendar/calendar-system.css" />
<script type="text/javascript" src="js/calendar/calendar.js"></script>

<script type="text/javascript" src="js/calendar/lang/calendar-en.js"></script>
<script type="text/javascript" src="js/calendar/calendar-setup.js"></script>

<style>

.active-controls-grid {height: 100%; font: menu;}
#ddgrid .active-controls-grid {height: 200; width: 160;}
#ddgrid .active-column-0 {width: 80px;}
#ddgrid .active-column-1 {width: 80px;}
#ddgrid .active-grid-column {border-right: 1px solid threedlightshadow;}

#maingrid .active-column-0 {width: 80px; vertical-align: middle;}
#maingrid .active-column-1 {width: 80px; vertical-align: middle;}
#maingrid .active-column-2 {width: 50px; vertical-align: middle;}
#maingrid .active-column-3 {width: 25px; vertical-align: middle;}
#maingrid .active-grid-column {border-right: 1px solid threedlightshadow;}
#maingrid .active-grid-row {border-bottom: 1px solid threedlightshadow;}

.active-templates-input {
overflow: hidden;
height: 100%;
padding: 0px 5px;
margin: -1px 0px;
border: 1px solid #666;
vertical-align: middle;
font: menu;
line-height: 1.4em;
}

.active-templates-input.gecko {
display: block;
margin: 0px;
}

.active-input-checkbox {
overflow: hidden;
width: 100%;
height: 100%;
padding: 0px 5px;
margin: 0px 0px 1px 0px;
vertical-align: middle;
}

.active-templates-ddgrid {
width: 100%;
height: 100%;
padding: 0px 5px;
margin: 0px 0px;
border: 0px solid #666;
vertical-align: top;
font: menu;
line-height: 1.4em;
OVERFLOW: auto;
POSITION: absolute;
background-color: white;
}

.active-templates-ddgrid.gecko {
display: block;
margin: 0px;
}

.active-edit-mode {
overflow: auto;
padding: 0px;
vertical-align: top;
}

.active-templates-input {
width: 100%;
height: 100%;
margin: -1px 0px;
padding: 0px 5px;
border: 1px solid #666;
font: menu;
line-height: 1.4em;
}

.active-templates-input.gecko {
margin: 0px;
}

.active-templates-row, .active-controls-grid {
-moz-user-select: text;
}
</style>


<script>
var myData = [
["02/09/2005"," "," "," ","Una vez"],
["02/09/2005"," "," "," "," "],
["02/09/2005"," "," "," "," "],
["02/09/2005"," "," "," "," "],
["02/09/2005"," "," "," "," "],
["02/09/2005"," "," "," "," "],
["02/09/2005"," "," "," "," "],
["02/09/2005"," "," "," "," "],
["02/09/2005"," "," "," "," "],
["02/09/2005"," "," "," "," "],
["02/09/2005"," "," "," "," "],
["02/09/2005"," "," "," "," "],
["02/09/2005"," "," "," "," "],
["02/09/2005"," "," "," "," "],
["02/09/2005"," "," "," "," "],
["02/09/2005"," "," "," "," "]
];

var myColumns = [
"Date", "Grid Dropdown", "Text", "Chk", "Select"
];
</script>
</head>
<body>

<form name="form" method="POST">
<table ALIGN="center" height="200" width="500"><tr><td style="border: 1px solid #000000">

<script>
var obj = new Active.Controls.Grid;

obj.setId("maingrid");
obj.setRowProperty("count", myData.length);
obj.setColumnProperty("count", myColumns.length);
obj.setRowHeaderWidth("0px");
obj.setColumnHeaderHeight("20px");

/* Need to add this so objects edited in grid customization don't get change if user cancels */
function clone (deep) {
var objectClone = new this.constructor();
for (var property in this)
if (!deep)
objectClone[property] = this[property];
else if (typeof this[property] == 'object')
objectClone[property] = this[property].clone(deep);
else
objectClone[property] = this[property];
return objectClone;
}
Object.prototype.clone = clone;
/**************************************/

/* Code for making column ordering work */
var indices = [];
for(i=0; i<obj.getColumnProperty("count");i++) indices[i] = i; // populate from db
obj.setColumnTexts(myColumns);
obj.setColumnValues(indices);
/************************************/

obj.getDataText = function(i, j){return myData[i][j]};
obj.setDataText = function(value, i, j){myData[i][j] = value};

var dateTemplate = new My.Templates.Date;
obj.setColumnTemplate(dateTemplate,0);

var ddgridTemplate = new My.Templates.GridSelect;
ddgridTemplate.setGridProperty("rows", [['0001','Test 1'],['0002','Test 2'],['0003','Test 3']]);
ddgridTemplate.setGridProperty("columns", ["Code", "Name"]);
obj.setColumnTemplate(ddgridTemplate,1);

var textTemplate = new My.Templates.Input;
obj.setColumnTemplate(textTemplate,2);

var chkTemplate = new My.Templates.Checkbox;
chkTemplate.setCheckedProperty("true", "Yes")
chkTemplate.setCheckedProperty("false", "No")
obj.setColumnTemplate(chkTemplate,3);

var selectTemplate = new My.Templates.StatusSelect;
selectTemplate.addOption("Un vez",1);
selectTemplate.addOption("dos veces",2);
selectTemplate.addOption("tres veces",3);
selectTemplate.addOption("Cuatro veces",4);
//selectTemplate.__debug=true;
obj.setColumnTemplate(selectTemplate,4);

/**** Column dragging ************/
var header = obj.getTemplate("top/item");
var mousedown = false;
var startX;
var startY;
var startElement;
var startElementChild;

var dragStart = function(event) {
startX=event.screenX;
startY=event.screenY;
startElementChild=event.srcElement;
startElement=startElementChild.parentNode;
startElement.width=startElement.offsetWidth;
startElement.height=startElement.offsetHeight;
if (startElement.height==0) startElement.parent.offsetHeight;

var offsetObj = startElement;
startElement.x = 0;
startElement.y = 0;
while(offsetObj.offsetParent.tagName!='BODY') {
startElement.x += offsetObj.offsetLeft
startElement.y += offsetObj.offsetTop
offsetObj = offsetObj.offsetParent
}
mousedown = true;
}

var drag = function(event) {
var x=event.screenX;
var y=event.screenY;
var dragHeaderDiv = document.getElementById('dragHeaderDiv');
if(dragHeaderDiv) dragHeaderDiv.style.left = x;
else if(mousedown && (x<startElement.x || x>(startElement.x+startElement.width))) {
var dragHeaderDiv = startElement.cloneNode(true)
dragHeaderDiv.id = "dragHeaderDiv";
dragHeaderDiv.className = dragHeaderDiv.className.replace(RegExp("sort-(ascending|descending)", "g"), "sort-none");
dragHeaderDiv.className += " active-header-over";
dragHeaderDiv.setAttribute("onmouseleave","")
dragHeaderDiv.setAttribute("onmouseenter","")
dragHeaderDiv.style.position = "absolute";
dragHeaderDiv.style.left = x;
dragHeaderDiv.style.top = startElement.y;
dragHeaderDiv.style.width = startElement.width;
dragHeaderDiv.style.height = startElement.height;
dragHeaderDiv.style.zIndex = 10000;
dragHeaderDiv.style.MozOpacity = 0.7;
dragHeaderDiv.style.filter = "alpha(opacity=70)"
startElement.parentNode.appendChild(dragHeaderDiv);
}
}

var getIndexFromId = function(id) {
var colonPos = id.indexOf(":");
var slashPos = id.indexOf("/");
var index = id.substring(colonPos+1);
if(slashPos!=-1) index = id.substring(0,slashPos);
var indices = obj.getColumnValues();
for(i=0;i<indices.length;i++) if(indices[i]==Number(index)) {index=i; break;}
return index;
}

var getHeaderIndexAt = function(x) {
var headersDiv = document.getElementById(obj.getId()+".layout/top");
var offsetObj = headersDiv;
var offsetX = 0;
while(offsetObj.offsetParent.tagName!='BODY') {
offsetX += offsetObj.offsetLeft
offsetObj = offsetObj.offsetParent
}

var headers = headersDiv.childNodes;
var column = 0;
for(i=0;i<headers.length;i++) {
if(x>=offsetX && x<(headers[i].offsetWidth+offsetX)) { column=i; break; }
offsetX+=headers[i].offsetWidth;
}
return column;
}

var dragEnd = function(event) {
mousedown = false;
var dragHeaderDiv = document.getElementById('dragHeaderDiv');
if(dragHeaderDiv) {
startElement.parentNode.removeChild(dragHeaderDiv);
var x=event.screenX;
var dragIndex = getIndexFromId(startElement.id);
var dropIndex = getHeaderIndexAt(x);
var indices = obj.getColumnValues();
dropIndex = dropIndex>(indices.length-1)?(indices.length-1):dropIndex;
var move = false;
var dragValue = indices[dragIndex];
if(dragIndex<dropIndex) for(i=dragIndex;i<dropIndex;i++) indices[i]=indices[i+1];
else for(i=dragIndex;i>dropIndex;i--) indices[i]=indices[i-1];
indices[dropIndex] = dragValue;
obj.setColumnValues(indices);
obj.refresh();
}
else if(event.srcElement==startElementChild) {
header.setClass("header", "pressed");
window.status = "Sorting...";
header.timeout(function(){header.action("columnSort")});
}
}

header.setEvent("onmousedown", dragStart);
obj.setEvent("onmouseup", dragEnd);
obj.setEvent("onmousemove", drag);
/*******************************/
//document.write(obj);

function gridCustomizer(obj) {
var gc = window.open(
'gridCustomizer.htm'
,''
,'dependent,location=no,toolbar=no,resizable=no,scrollbars=no,width=340,height=330'
);
if(gc.attachEvent) gc.attachEvent('onload',function(){gc.setGrid(obj);});
else if(gc.addEventListener) gc.addEventListener('load',function(){gc.setGrid(obj);},false);
}

var row = obj.getTemplate("row");
row.setEvent("onkeydown",function(){this.action("myAction")});
obj.setAction("myAction",function(src)
{
if (event.keyCode==13) {
var i= obj.getProperty("selection/index");
document.form.val.value=obj.getDataProperty("text",i , 1) ;
document.form.row.value=obj.getDataProperty("text",i , 0) ;
alert ("c will be "+obj.getDataProperty("text",i , 1));
document.form.submit();
}

});
// write grid html to the page
document.write(obj);
</script>
</td></tr></table>
<input type="hidden" value="" name="val" id="val">
<input type="hidden" value="" name="row" id="row">
<input type="hidden" value="1" name="action" id="action">
</form>
</body>
</html>

Mario Nunes

June 24,

Hi Everybody,,, Congratulations for this Job,, I need to know how I can Update my BD from my Editable Grid if I working with ASP,, ??? Thanks for all...

Arturo D. Wiliams - From: PanamÃ¡, David-ChiriquÃ

June 29,

Hi,
I have used the same code, to update data via form post, but now i dont see the grid in the browser at all. Earlier before insertion of this code, I did see the grid and I could edit it too .. How do I debug this and diagnose the error ? Can anybody help ?

Thanks !

July 13,

Hi,
i am also beginner with the Widget, but i am happy about this. In 2 days i can collect such alot of informations about JavaScript that my brain seems to run fully loaded :-)
If you dont see the grid, please test with ALERT messages to debug your code. Its quiet simple, if you analyze the script-code.
Its much harder, if you dont speak another script-language.

Daniel

Daniel

October 1,

This topic is archived.

Saving updates to a database when using an input template.

See also:

Search

New Data Grid

Version 2