:: Forum >>

Input template that provides onchange callback events

This is a template for Editable cells that provides callbacks when the cell value has changed.

Enjoy!

Active.Templates.Input = Active.System.Template.subclass();

Active.Templates.Input.create = function(){

/****************************************************************
    Input Cell template.
*****************************************************************/


    var obj = this.prototype;
    var _super = this.superclass.prototype;

obj.getName = function() {
var r = this.$owner.$index;
var c = this.getColumnProperty("index");
return "item_"+r+"_"+c;
}

obj.setTag("input");
obj.setClass("templates","input");
obj.setClass("input",function(){return this.getColumnProperty("index")});
obj.setAttribute("type","text");
obj.setAttribute("value",function(){return this.getItemProperty("text");});
obj.setAttribute("name", function(){return obj.getName.call(this);})
obj.setEvent( "onblur", function(event, src) { this.onBlurAction( event, src ); } );

obj.onBlurAction = function( event ) {
var name = this.element().name;
var row = this.getRowProperty("index");
var col = this.getColumnProperty("index");
var originalVal = this.getItemProperty("text");
var currentVal = this.element().value;
if (currentVal!=originalVal) {
this.onChangeAction( currentVal, name, row, col );
}
}

/**
* This function can be overridden to receive change events from the
* rendered grid input elements
*/

obj.onChangeAction = function( newVal, name, row, col ) {
alert("Changed "+name+" ("+row+":"+col+") to "+newVal );
}

};

Active.Templates.Input.create();
gbegley
Thursday, May 6, 2004
I would just recommend using different 'library' name to avoid possible name conflict in case I also release Input template in the future:
var My = new Object;
My.Templates = new Object;
My.Templates.Input = Active.System.Template.subclass();
My.Templates.Input.create = function(){
...
Alex (ActiveWidgets)
Thursday, May 6, 2004
No problem, I actually had been using a different name, and modifying it to post here, but I will skip this step in the future, or use "My" as you suggested.
gbegley
Friday, May 7, 2004
This may be obvious to others, but here's a sample of using the onChangeAction function to write the change back to the data model:

obj.onChangeAction = function( newVal, name, row, col ) {
alert("Changed "+name+" ("+row+":"+col+") to "+newVal );
myData[row][col]=newVal;
}

Note: this works if the grid's data property has been set earlier to an array called "myData" using the function

obj.setDataProperty("text", function(i, j){return myData[i][j]});

However, if the grid's data is set to a table (csv or xml), then I don't think this function will work: it would refer to an array which doesn't exist. ;-) I'm not sure how to make this onChangeAction function smart enough to find the object's own data model (using this?), rather than hard-code it (using "myData"). Furthermore, even if I could get a handle to that table model object, I'm not sure if there's a public method to setText in a table model yet. Or even if that's such a good idea.
kfretwell
Wednesday, May 12, 2004
Great Idea.

A first pass for making modifications back to the XML Data Model is


obj.onChangeEvent = function(newVal, name, row, col) {
var node = this._xmlModel.getNode( row, col );
removeOldValue( node );
node.appendChild( node.ownerDocument.createTextNode( newVal ) );
}


But, as you said, this requires that the template be given a reference to the template._xmlModel point to the Active.XML.Table Object

My implementation of this also solved some problems I was having with sorting (refreshing, actually). Thanks for the input 8D
gbegley
Thursday, May 13, 2004
Awesome!

Curious, upgraded to .3.2, the text box won't allow me to edit..
anything changed? tested w/ sending html straight through as well, same result...

Has this code been tested in .3.2?
Matt
Friday, May 14, 2004
I am running under 0.3.2, but I have disabled grid's capture of onkeydown events. That may be the trick. If you need them, you could probably filter out the array keys (for row selection) and pass other key's events through to the next component, but I am not sure how to do this
gbegley
Friday, May 14, 2004
Never mind, I read in another post that you guys already figured that out.
gbegley
Friday, May 14, 2004
If you are building editable cell templates the call to
this.setItemProperty("text", value);
in theory should bring data back to the data model. In reality I've found several bugs which block this. But I will fix it in 1.0 - should be easier then.
Alex (ActiveWidgets)
Friday, May 14, 2004
That must be the fix gbeg.. :)

I've actually got a working editable template model layed out.. using gbeg's (and yours, Alex) code.. and replaced my model of passing HTML to the data array... doesn't reset when sorted etc.

Does the trick! TY both btw.

What bugs?

Currently looking at adding a template for a checkbox.
Matt
Saturday, May 15, 2004
I also have some PHP back-end code for dealing with data arrays (from SQL) and headers.... kinda.. just calling one function to create a grid.. with support for multiple grids per page.. if interested Alex..

Call looks like:
<?php
activegrid( unique grid number,
width,
height,
border,
$dataarray,
$headerarray)

?>
Matt
Saturday, May 15, 2004
grid.php
<?php
// GRID Function

function activegrid($gridnumber, $width, $height, $background, $border, $headers, $dataarray, $DblClickJS){
// $border = '2px inset'
if ($gridnumber) {

    if ($DblClickJS == '')
    {
        $DblClickJS = '\'\'';
    }
?>

<style>
#grid<?php print($gridnumber)?> {height: <?php print($height)?>px; width: <?php print($width)?>px; border: <?php print($border)?>; background: <?php print($background)?>}

#grid<?php print($gridnumber)?>
.active-scroll-data {left:0px; top: 0px}
.active-controls-grid {height: 100%; font: menu;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
.active-grid-column {border-right: 1px solid threedlightshadow;}

    .active-controls-grid {height: 100%; font: menu; border: 3px double black; }

<?php
    $str = "";
    foreach($headers as $header)
    {
        if(strtoupper($header["Display"]) == "NONE")
        {
            $str .= "\n.active-column-" . $header["ID"] . " {display: none;}
";
        } else {
            $str .= "\n.active-column-" . $header["ID"] . " {
                            width:" . $header["Width"] . "px;
                            text-align: " . $header["Align"] . ";
                            background-color: " . $header["BGColor"] . ";
                }

            ";
        }
    }
    print $str;

?>
    .active-grid-column {border-right: 1px solid threedshadow;}
    .active-grid-row {border-bottom: 1px solid threedlightshadow;}

    .active-template-input-<?php print($gridnumber)?>
    { text-align: top; border-style: none; font-family: Arial; font-size: 8pt; }
    .grid-input-1 { text-align: top; height: 30px; border-style: none; font-family: Arial; font-size: 8pt; }
    .grid-select-1 { text-align: top; height: 15px; border-style: none; font-family: Arial; font-size: 8pt; }

</style>

<script>

var datalist<?php print($gridnumber)?> = [
<?php
$str = "";

if (!is_array($dataarray))
{
    if ($dataarray == "EMPTY")
    {
        $strcol = "";
        foreach($headers as $header)
        {
            
            if (!$strcol == "") {
                $strcol .= ",";
            } else {
                $strcol .= "[";
            }

$strcol .= "\"";
$strcol .= "";
$strcol .= "\"";
            

        }
        $str .= $strcol;
    }

} else {
foreach($dataarray as $data)
{
        $strcol = "";

        if (!$str == "")
        {
            $str .= "],";
        }

     foreach($headers as $header)
{
            if (!$strcol == "")
            {
                $strcol .= ",";
            } else {
                $strcol .= "[";
            }

            if (strchr($header["Columns"], ","))
            {
                $ColArr = split(",", $header["Columns"]);
                $stradd = "";
                foreach ($ColArr As $ColHeader)
                {
                    if ($stradd == "")
                    {
                        $stradd .= "\"";
                    } else {
                        $stradd .= " ";
                    }
                    $stradd .= $data[$ColHeader];
                }
                $stradd .= "\"";
                $strcol .= $stradd;
            } else {
                
                $strcol .= "\"";
                $strcol .= $data[$header["Columns"]];
                $strcol .= "\"";
            }
        }
        $str .= $strcol;
    }
}
print $str;
?>

]];


    var headlist<?php print($gridnumber)?> = [<?php

$str = "";
foreach($headers as $header)
{
        if (!$str == "") {
            $str .= ",\n";
        }
        $str .= "\"" . $header["Name"] . "\"";
}
print $str;

    ?>

    
    ];

var G<?php print($gridnumber)?> = new Object;
G<?php print($gridnumber)?>.Templates = new Object;
G<?php print($gridnumber)?>.Templates.Input = Active.System.Template.subclass();
G<?php print($gridnumber)?>.Templates.Input.create = function(){

/****************************************************************
Input Cell template.
*****************************************************************/

var obj = this.prototype;
var _super = this.superclass.prototype;

obj.getName = function() {
var r = this.$owner.$index;
var c = this.getColumnProperty("index");
//return "item_"+r+"_"+c;
    <?php
        foreach($headers as $header)
        {
            if (isset($header["Edit"]) && isset($header["EditType"])) {

                if (strtolower($header["EditType"]) == "input") {
                    print "if (c == " . $header["ID"] . ") { ";
                        print "return '" . $header["Columns"] . "_'+r;";
                    print "}\n";
                }

            }
        }
    ?>

}

obj.setTag("input");
obj.setClass("template","input-<?php print($gridnumber)?>");
obj.setClass("input",function(){return this.getColumnProperty("index")});
obj.setAttribute("type","text");
obj.setAttribute("value",function(){return this.getItemProperty("text");});
obj.setAttribute("name", function(){return obj.getName.call(this);})
obj.setEvent( "onblur", function(event, src) { this.onBlurAction( event, src ); } );

obj.onBlurAction = function( event ) {
var name = this.element().name;
var row = this.getRowProperty("index");
var col = this.getColumnProperty("index");
var originalVal = this.getItemProperty("text");
var currentVal = this.element().value;
if (currentVal!=originalVal) {
this.onChangeAction( currentVal, name, row, col );
}
}

/**
* This function can be overridden to receive change events from the
* rendered grid input elements
*/
obj.onChangeAction = function( newVal, name, row, col ) {
//alert("Changed "+name+" ("+row+":"+col+") to "+newVal );
    datalist<?php print($gridnumber)?>[row][col]=newVal;
}

};

    G<?php print($gridnumber)?>.Templates.Input.create();

    var grid<?php print($gridnumber)?> = new Active.Controls.Grid;

        grid<?php print($gridnumber)?>.setId("grid<?php print($gridnumber)?>");
        grid<?php print($gridnumber)?>.setRowCount(<?php print(count($dataarray)); ?>);
        grid<?php print($gridnumber)?>.setColumnCount(<?php print(count($headers)); ?>);
        grid<?php print($gridnumber)?>.setDataText(function(i, j){return datalist<?php print($gridnumber)?>[i][j]});
        grid<?php print($gridnumber)?>.setColumnText(function(i){return headlist<?php print($gridnumber)?>[i]});

        // set headers width/height
        grid<?php print($gridnumber)?>.setRowHeaderWidth("0px");
        grid<?php print($gridnumber)?>.setColumnHeaderHeight("20px");

        // Double Click Functionality
     var row = new Active.Templates.Row;
     row.setEvent("ondblclick", function(){this.action("DblClick")});
     grid<?php print($gridnumber)?>.setTemplate("row", row);
     grid<?php print($gridnumber)?>.setAction("DblClick", <?php print($DblClickJS)?>);

        // Input Box Test
        //var input = new Active.HTML.INPUT;
        //input.setClass("box", "input");
        //input.setAttribute("value", function(){return this.getItemProperty("text")});
<?php
foreach($headers as $header)
{
if (isset($header["Edit"]) && isset($header["EditType"])) {
                if (strtolower($header["EditType"]) == "input") {
                    print "grid" . $gridnumber . ".setTemplate('column', new G" . $gridnumber . ".Templates.Input, " . $header["ID"] . ");";
                }
            }
        }
    ?>


        document.write(grid<?php print($gridnumber)?>);



function addRow<?php print($gridnumber)?>(rowData){
//var rowData = ["GGL", "Google, Inc", "9,999.999", "765.432", "10000"];
datalist<?php print($gridnumber)?>.unshift(rowData);
grid<?php print($gridnumber)?>.setRowProperty("count", datalist<?php print($gridnumber)?>.length);
grid<?php print($gridnumber)?>.refresh();
//alert(grid<?php print($gridnumber)?>.getProperty("row/count") + '-' + datalist<?php print($gridnumber)?>.length);
}

function remRow<?php print($gridnumber)?>() {
    robj = grid<?php print($gridnumber)?>;
    var srow = robj.getProperty("selection/index");
    var nrow = robj.getProperty("row/count");
    var thisRowB = robj.getProperty("row/values",nrow);
    var thisRow=[];
    var tmpArr=[];
    var ind,k=0;
    robj.setProperty("selection/index",-1);
    if (nrow==1) thisRow='';
    if (srow!=-1 && nrow>0)
    {
        for (i=0;i<nrow-1;i++)
        {
            if (thisRowB[i]==srow) {
                k++;ind=i;
                alert(thisRowB[i]);
                datalist<?php print($gridnumber)?>.splice(thisRowB[i],1);
            }
        }

        if (ind<nrow) robj.setProperty("selection/index",thisRow[ind]);

        grid<?php print($gridnumber)?>.setRowProperty("count", datalist<?php print($gridnumber)?>.length);
        grid<?php print($gridnumber)?>.refresh();
    }
//alert(grid<?php print($gridnumber)?>.getProperty("row/count") + '-' + datalist<?php print($gridnumber)?>.length);

}






</script>

    <?php
        $colstr = "";
        $inpstr = "";
foreach($headers as $header)
{
if (isset($header["Edit"]) && isset($header["EditType"])) {
if (strtolower($header["EditType"]) == "input") {
                    if ($colstr != "") {
                        $colstr .= ",";
                    }
$colstr .= $header["Columns"];
                    $inpstr .= "<input type='hidden' name='D_Grid_Count_" . $header["Columns"] . "' value='" . count($dataarray) . "'>";
    
}
}
}
        if ($colstr != "") {
            print "<input type='hidden' name='D_Grid_Columns' value='" . $colstr . "'>";
            print $inpstr;
        }
    ?>



<?php


}

}

?>


usage:
<?php
$headers = array(
array(
"ID" => "0",
"Columns" => "CustomerID",
"Name" => "CustomerID",
"Width" => "0",
"Align" => "left",
"BGColor" => "",
"Display" => "none"
),
array(
"ID" => "1",
"Columns" => "Company",
"Name" => "Company",
"Width" => "150",
"Align" => "left",
"BGColor" => "threedlightshadow",
"Display" => ""
)
);

$DblJS = 'function(src){var i = src.getProperty("item/index");document.location.href = "./index.php?A=SetCust&CrID="+this.getDataText(i, 0)}';
activegrid('1', '1000', '475', 'grey', 'none', $headers, $recordset, $DblJS);
activegrid('2', '1000', '475', 'grey', 'none', $headers, 'EMPTY', $DblJS);

?>


and for editing:
$headers = array(
array(
"ID" => "0",
"Columns" => "CPE_Desc",
"Name" => "Description",
"Width" => "150",
"Align" => "left",
"BGColor" => "",
"Display" => ""
,"Edit" => "1","EditType" => "input"
),
array(
"ID" => "1",
"Columns" => "CPE_ExtDesc",
"Name" => "Extended Desc",
"Width" => "175",
"Align" => "left",
"BGColor" => "",
"Display" => ""
,"Edit" => "1","EditType" => "input"
)
);


<a href="#" onclick="remRow1();">Remove Selected Row</a>
<a href="#" onclick="remRow2();">Remove Selected Row</a>


<script language="javascript">
function inAdd(data, rec) {
if (rec == 1) {
addRow1(data);
} else {
addRow2(data);
}
}

function postme(numb, rec) {
var x = parent.eval("inventoryAdd(["+numb+"], "+rec+");");
}

</script>
<input onclick="var x='\'asdf1\', \'desc\', \'2\', \'99\', \'\', \'\', \'1\', \'MP1\', \'Me1\', \'99\'';postme(x,1);" type="checkbox" name="inv_1" value="1">


thx gbeg!

not sure if any of that is of any use to anyone.. but it has 'add' and 'remove' and 'edit cells' ability... a pits!

hmm.. enjoy.. ;)

-m
Matt
Sunday, May 16, 2004
it's sloppy too.. so, if anyone cleans it up, lemme know!
;)
-m
Matt
Sunday, May 16, 2004
oh yeah and..

$headers = array(
array(
"ID" => "0",
"Columns" => "NameFirst,NameMiddle,NameLast",
"Name" => "Contact",
"Width" => "0",
"Align" => "left",
"BGColor" => "",
"Display" => "none"
)
)


combines recordset columns for you into one grid column..
Matt
Sunday, May 16, 2004
oops... that's what I get for copying/pasting without looking :)
Display => "", Width=>"35"
My display also only works in IE, moding to work cross browser... simple CSS change..

Anyway, bed time..

-m
Matt
Sunday, May 16, 2004
Also note:
When submitting to a print_r post URL, I left out functionality to tell the number of rows per grid. I also left out functionality to uniquely identify the columns+rows on a per grid basis. Not hard stuff. Simple modifications to the code, i.e. making the grid input names 'G1_CPE_Desc' instead of 'CPE_Desc' and then passing through a G1_RowCount which is modified every time a row is added or removed. It is a starting point for anyone interested in a PHP Grid that manages your data sets for you, edit and display. Which was lacking as an example previously.

-m
Matt
Sunday, May 16, 2004
And comment out this line:

alert(thisRowB[i]);
Matt
Sunday, May 16, 2004
How could this help me?
this.setItemProperty("text", value);

Would it modify the data array for me?
Matt
Sunday, May 16, 2004
is there no way for someone to post FULL source files, either by copy/paste or download link...

This stuff gets really confusing, especially when code parts are ommitted or interjected randomly.
A Fan
Thursday, March 24, 2005
How to get the check box value.
Leonard
Wednesday, May 11, 2005
Why not just use the ADODB Libraries and modify the tohtml.php file??
Jarret
Friday, September 30, 2005
And then use Ajax to call php to update the database and then the page...
Jarret
Friday, September 30, 2005

This topic is archived.


Back to support forum

Forum search