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();

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(){ 
...

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.

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.

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

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?

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

Never mind, I read in another post that you guys already figured that out.

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.

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.

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)

?>

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

it's sloppy too.. so, if anyone cleans it up, lemme know!
;)
-m

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..

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

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

And comment out this line:

alert(thisRowB[i]);

How could this help me?

this.setItemProperty("text", value);

Would it modify the data array for me?

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.

How to get the check box value.

Why not just use the ADODB Libraries and modify the tohtml.php file??

And then use Ajax to call php to update the database and then the page...