3.2.0

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
May 6,
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)
May 6,
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
May 7,
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
May 12,
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
May 13,
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
May 14,
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
May 14,
Never mind, I read in another post that you guys already figured that out.
gbegley
May 14,
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)
May 14,
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
May 15,
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
May 15,
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
May 16,
it's sloppy too.. so, if anyone cleans it up, lemme know!
;)
-m
Matt
May 16,
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
May 16,
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
May 16,
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
May 16,
And comment out this line:

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


Would it modify the data array for me?
Matt
May 16,
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
March 24,
How to get the check box value.
Leonard
May 11,
Why not just use the ADODB Libraries and modify the tohtml.php file??
Jarret
September 30,
And then use Ajax to call php to update the database and then the page...
Jarret
September 30,

This topic is archived.

See also:


Back to support forum