Adding a checkbox to a grid

G'day-

As many have said before myself, most excellant development. I've got an instantiation of the grid, generated dynamically from a database (.jsp queries database and generates js array for grid). I've rigged a double click to populate a seperate (ie, not in the grid structure) multi-select drop down on the page. I'd like to include a couple of checkboxes in the grid, and pass the values over to the multi-select box on double click. Generating the checkboxes isn't an issue (generating them in the SQL statement that generates the js array - SELECt "<input type='checkbox' class='width20' name='copies' >" AS Copies FROM Documents), and I can place a tick in the box. However, when I retrieve the value via the double click, I am passed the <input type="checkbox" ... code as opposed to the actual status of the checkbox.

var obj = new Active.Controls.Grid;
// count the number of header rows as defined in a .jsp result set
<% lm.rs.last(); %>
obj.setRowCount(<%=lm.rs.getRow()%>);
obj.setColumnCount(<%=lm.listColumns.size()%>);

obj.setDataText(function(i, j){return myData[i][j]});
obj.setColumnText(function(i){return myColumns[i]});

// dblclick setup
var row = obj.getTemplate("row");
row.setEvent("ondblclick", function(){this.action("dblClickAction")});
  obj.setAction("dblClickAction", function(src){
    var i = src.getProperty("item/index");
    alert(this.getDataText(i,0) + ' ' + this.getItemProperty("text"));
    });

document.write(obj);

Hoping that you've got a quick and easy wheel already invented for this issue so I don't have to reinvent....

Again, love your work.

Cheers

This is it a java function that I call from JSP, perhaps this can help you. Variable names are in spanish, (how I :) ) then for get the values that user check you can make how explain code in the second point.

Greetings, Miguel Burgos.

1. Servlet Code:

public String getGridLibreriaMedidasProductosQuimicos  (String nombreGrid, String nombreColumnas, String nombreArray, String nombreCheckBox)
    {
        String codigo = "";
        int i = 0;
        
        boolean primera_linea = true;
        codigo = "var " + nombreArray + " = [";
        try
        {
             BD bd = new BD();
             String sql = "SELECT * FROM cod_medidas_producto ORDER BY descripcion";
             ResultSet rs = bd.getConjuntoResultados(sql);
             while(rs.next())
             {
     			if(primera_linea) primera_linea = false;
     			codigo += "\n[\"<input type='checkbox' name='" + nombreCheckBox + "[]' value='" + i + "'> " +  rs.getString("descripcion") + "\",\"" + rs.getString("id_cod_medidas") + "\",\"" +  rs.getString("descripcion") + "\"],";
                i++;
            } 
            if(!primera_linea) codigo = codigo.substring(0,(codigo.length()-1));
            codigo += "\n];\n";
            codigo += "var " + nombreColumnas + " = [\"Medida\"];";
            codigo += "\n" + nombreGrid + ".setRowCount(" + i+ ");";
            codigo += "\n" + nombreGrid + ".setColumnCount(1);";
            rs.close();
            bd.close();					
        }
        catch (Exception e) 
        {
            System.out.println("@Presupuesto@getGridLibreriaMedidasProductosQuimicos: " + e.getMessage ());
        }
            return codigo;
    }

2. JS Code:

<script>
var misDatos = new Array(200);
misDatos[0] = new Array(3);
misDatos[0][0] = "NAN";
misDatos[0][1] = "NAN";
misDatos[0][2] = "NAN";
var longitud = 0;
 function insertarProducto()
 {
 	valido = true;
    var d=document.forms[0].elements['chkProductosEmpresa[]'];
    var posMatriz = 0;
    for(i=0;i<d.length;i++)
    {
        // El valor del checkbox se corresponde con la posición del array en su posicion [2] de forma que sirve como 
        // indice de la matriz
        
        if(d[i].checked)
        {
            posMatriz = d[i].value;
            misDatos[longitud] = new Array(3);
            texto = "";
            misDatos[longitud][0] = arrayProductosEmpresa[posMatriz][3];
            misDatos[longitud][1] = arrayProductosEmpresa[posMatriz][1];
            misDatos[longitud][2] = arrayProductosEmpresa[posMatriz][2];
            longitud++;
        }
    }
    for(i=0;i<longitud;i++)
    {
        texto += "<input type=\"hidden\" name=\"valores_producto\" value=\"" + misDatos[i][2] + "\">";
    }
    
    obj.setRowCount(longitud);
    obj.refresh();
    document.all["valores_ocultos"].innerHTML = texto;
 }

I solved this by creating a checkbox template. This template has a lot of customized stuff to manipulate the Grid's model that it expects to be using XML.Table. Nevertheless it should get you started.

Note that this template will post different values in the containing form for checked and unchecked states of the cell's checkbox (Somebody said they needed a seperate value posted when the check box was not checked...).

(IMO the xml datamodel is much easier to deal with than the JS array.)

SDI.Templates.Checkbox = Active.System.Template.subclass();

SDI.Templates.Checkbox.create = function(){

/****************************************************************
    Checkbox Cell template.
*****************************************************************/
    var obj = this.prototype;
    var _super = this.superclass.prototype;

    obj.setTag("div");
    obj.setClass("templates","input");

    obj.getName = function() {
         return this.getCellName();
    }

    obj.getCellName = function() {
        var r = this.getRowProperty("index");
        var c = this.getColumnProperty("index");
        if (!r) r = 0;
        if (!c) c = 0;
        return "grid_item_"+r+"_"+c;
    }

    obj._checkedStatus = false;
    obj._checkedValue = "true";
    obj.setCheckedValue = function( v ) { this._checkedValue = v; }
    obj.getCheckedValue = function(  ) { return this._checkedValue; }

    obj._uncheckedValue = "";
    obj.setUncheckedValue = function( v ) { this._uncheckedValue = v; }
    obj.getUncheckedValue = function(  ) { return this._uncheckedValue; }

    obj.hidden = new Active.HTML.INPUT;
    obj.hidden.setAttribute("type", "hidden");
    obj.hidden.setAttribute("name", function(){ return this.getName(); });
    obj.hidden.setAttribute("value", function(){
        var v = this.isChecked() ? this.getCheckedValue() : this.getUncheckedValue();
        return v;
    });

    obj.checkbox = new Active.HTML.INPUT;
    obj.checkbox.setClass("input","checkbox");
    obj.checkbox.setClass("checkbox",function(){return this.getColumnProperty("index");});
    obj.checkbox.setAttribute("type","checkbox");
    obj.checkbox.setAttribute("checked", function(){return this.isChecked() ? "true" : null;} );
    obj.checkbox.setEvent("onclick", function( event, src ){
        this.checkboxClicked( event, src );
    });
    obj.getCheckbox = function() {return checkbox;}

    obj.label = new Active.HTML.SPAN;
    obj.label.setClass("checkbox","label");
    obj.label.setContent("text", function() { return this.getItemProperty("text"); });
    obj.setLabel = function( text ) {
        this.label.setContent( "text", text );
    }



    obj.checkboxClicked = function( event ) {
        var b = event.srcElement.checked;
        if (this._sdiGrid) {
            var r = this.getRowProperty("index");
            var c = this.getColumnProperty("index");
            var node = this._xmlModel.getNode( r, c );
            node.setAttribute( "change", b ? this.getCheckedValue() : this.getUncheckedValue() );
            node.setAttribute( "ognl", this.getName() );
            if (c && c.length>0) mv = c;
        }
        this.refresh();
    }

    obj.isChecked = function(){
        var ipt = this.getItemProperty("text");
        var mv = ModelUtils.getModelValue(this);
        var cv = this.getCheckedValue();
        var b = ( mv == cv );
        if (this._xmlModel) {
            var r = this.getRowProperty("index");
            var c = this.getColumnProperty("index");
            var node = this._xmlModel.getNode( r, c );
            var change = node.getAttribute( "change" );
            if (change && change.length>0) b = (change == cv);
        }
        return b;
    }




    obj.setContent("checkbox", obj.checkbox );
    obj.setContent("label", obj.label);
    obj.setContent("hidden", obj.hidden);


};

SDI.Templates.Checkbox.create();

I hope this gets you started

Hi!!

How can I implement this template in my GRID already build.. can I get an Example??

Luis Islas

Sorry..

I found how to implement it.

Thanx

should you write a small example for explainign how to use your template, please?

Well, I think I understood few of your template code.
what ModelUtils means?
Thanks

ModelUtils meant "Do some magic to find the model value for this cell"
What I did was very hackish and would require several more pages of explanation, and still wouldn't be relevant to your situation. This is just an example of how I built a checkbox, and that particular piece of code was part the determination I used to figure out whether or not the checkbox should be checked.

I should have had better comments.

Anyway after you define an ischecked, this should work

var grid = ...
var cbTemplate = new SDI.Templates.Checkbox;
cbTemplate.setCheckedValue("Y");
cbTemplate.setUncheckValue("N");
grid.setColumnTemplate( cbTemplate, cbIndex );

By the way, I wrote this back when I was first learning ActiveWidgets and javascript, so I wouldn't recommend it. I will fix when I have some more time.

Sorry Im newbie using this awesome tool, bue
I have problems with the double click event.
This is what I do:

<script>

var obj = new Active.Controls.Grid;

obj.setModel("row", new Active.Rows.Page);

obj.setProperty("row/count", 10);
obj.setProperty("column/count", 4);
obj.setProperty("data/text", function(i, j){return myData[i][j]});
obj.setProperty("column/texts", myColumns);

// set page size
obj.setProperty("row/pageSize", 10);


// dblclick setup
var row = obj.getTemplate("row");
row.setEvent("ondblclick", function(){this.action("dblClickAction")});
obj.setAction("dblClickAction", function(src){
var i = src.getProperty("item/index");
alert(this.getDataText(i,0) + ' ' + this.getItemProperty("text"));
});


// write grid html to the page
document.write(obj);

</script>

When the page is loaded it gives 2 errors.
I really need this double click event.
Thanks in advanced.