cannot add row to Alex's checkbox example

In checkbox example of Alex.
In order to use checkbox we should use

obj.setCellText(function(c,r){return myData[r][c]} );
instead of
obj.setCellText( myData );

its ok with this, but if I want to use the

obj.addRow(myData.length++); I got a javascript error pointing to line
obj.setCellText(function(c,r){return myData[r][c]} );

giving the error myData[....] is null or not an object.

an example with adding row to grid with checkbox will be very useful.
Thanks.

Ozgur

February 22,

What I do, (taking from Alex's editing DEMO) that comes with the New Examples..)

Is:

// starting NEW row index
    var serial = 100;

    function add(){
        obj.addRow(serial++);
    }

    obj.onRowAdded = function(row){
        window.status = "Row added: " + row;
        this.setCellText("*New Record*",0, row);
        for (k = 1; k <= 14; k++){this.setCellText("-",k, row);}
        obj.setCellText(function(col, row){return new Date()}, 1, row);
    }
Note: the loop is hard coded to 14 but needs fixing to num of cols!!!

NOTE: If your looking at the basic knowledge demo... (which are basicly expansions on Alex's snippets here and there)
It does say use the function method for populating cells, however that is only One way to do this. Further that is to allow ROW only functions to work. eg
obj.setCellTemplate(new AW.Templates.Combo, 1);
obj.setCellTemplate(new AW.Templates.Combo, 3);
in this particular demo.

Note: If you want a NICE yes/ No ON Check, in the added row, you will have to to add that to this new row, just as you did to original checkboxes....

Let me know.. if this helps or confuses...

G CAYMAN

February 22,

Thank you for the reply.. I tried but cannot suceed.. Better one is examining an example taken from forum. I simplify it for only checkboxes.

I cannot achieve to work addRow with checkboxes.

<html> <head>  
   	<script src="../../runtime/lib/aw.js"></script>
    <link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>

<style> 
    .aw-column-1 {text-align: right;} 
    .aw-grid-row {border-bottom: 1px solid threedlightshadow;}  
</style> 
</head> <body>  

<script>  

    var HeaderText = ["Last Changed col","Best way?","Auto send","Dispose"];  

    var CellData = [  
        ["aa","USPS","f","reconciled"],  
        ["bb","Email","t","unreconciled"],  
        ["cc","FedEX","t","reconciled"],  
        ["cc","FedEX","f","hopeless"],  
        ["dd","Phone","f","unreconciled"] 
    ];  

    var obj = new AW.UI.Grid; 
    obj.setHeaderText(HeaderText); 

    obj.setCellText(function(c,r){return CellData[r][c]} );  
    //obj.setCellText(CellData); // this makes col setting impossible isBUG ? bug : feature!!! 
    
    obj.setSize(450, 120); 
    obj.setColumnCount(4);  
    obj.setRowCount(5);  
    obj.setColumnWidth(120, 0);  // set the width wide first col (c0) 

    obj.setCellTemplate(new AW.Templates.Checkbox, 2); 
   
    obj.setCellValue(function(col, row){return CellData[row][2]=="t" ? true : false}, 2); 

    obj.setCellText(function(col, row){return this.getCellValue(col, row) ? "Yes" : "No!"}, 2); 



    obj.onCellValueChanged = function(value, col, row){ 
        this.setCellText("c"+col+" r"+row+ " v="+value, 0, row); // show last new value in first col (c0) 
      if(col == 1)alert("value:"+value+"  Column:"+col+"  Row:"+row); // alert for second col (c1) only 
    }  


    document.write(obj); 

    function add(){
        obj.addRow(CellData.length++);
    }

// I add this according to your response.. Please check if I understand correct.
obj.onRowAdded = function(row){ 
    this.setCellTemplate(new AW.Templates.Checkbox, 2,row);
 	this.setCellValue(false, 2,row); 
    	this.setCellText(function(col, row){return this.getCellValue(col, row) ? "Yes" : "No!"}, 2,row); 

    } 


</script> 
<BR>
<INPUT type="button" id="addbutton" value="add" onclick="add()">
</body> </html>

Ozgur

February 22,

Ozgur,
I am sorry, Im away from home right now (in Alta, Utah!!!) SO don't have access to easy set up AND code to test.
But i do have that exact example working with Add a row back home.

I took that code from it. It does work fine, and i CAN'T READILY SEE the error.
Try again with the exact additional code i showed above.. In the sample.

Also tell me what error your getting...??
I will improve the demo this weekend when i GET TIME.

I'll look at it tonight when I get in, If I don't fall asleep first!
-g

G Cayman

February 22,

Ok I found the example. I.m pretty sure this does what you want,
and on quick look I don't see what is different about your exampl..

If you do find the diff, please TELL us all.
I didn't quite finish the onAdded code to put in the yes no function..
but I think you can go from here!

-g

<html>
<head>
    <script src="runtime/lib/aw.js"></script>
    <link href="runtime/styles/xp/aw.css" rel="stylesheet"></link>

<script>
        var columnHead = [
            "Acct No.", "Subcode", "Dpt Atr", "Form type"
        ];

    var CellData = [  
        ["aa","USPS","f","reconciled"],  
        ["bb","Email","t","unreconciled"],  
        ["cc","FedEX","t","reconciled"],  
        ["cc","FedEX","f","hopeless"],  
        ["dd","Phone","f","unreconciled"],
    ];  

</script>

</head>
<body>

<script>

    var obj = new AW.UI.Grid;

    obj.setCellText(function(c, r){return CellData[r][c]});
    obj.setHeaderText(function(c){return columnHead[c]});

    obj.setColumnCount(4);
    obj.setRowCount(5);
    obj.setSize(425, 150);


// add a checkbox to col 
    obj.setCellTemplate(new AW.Templates.Checkbox, 2);
    obj.setCellValue(false, 2);

    //  to get "checked" state put a function in cell text, which follows the checks!
    obj.setCellText(function(col, row){return this.getCellValue(col, row) ? "yes" : "no"}, 2);

    document.write(obj);
    document.write("<br>");


//START ADD DELETE ROW
    obj.onRowAdded = function(row){
        window.status = "Row added: " + row;
        this.setCellText("*New Record*",0, row);
        for (k = 1; k <= 14; k++){this.setCellText("-",k, row);}
        obj.setCellText(function(col, row){return new Date()}, 1, row);
    }

   // row index
    var serial = 100;

    function add(){
        obj.addRow(serial++);
    }
</script>

<br><button onclick="add()">add row</button>

</body>
</html>

G Cayman

February 22,

Thanks Cayman, I got it working by looking at your example.
The difference is, in your onrowadded function there is

for (k = 1; k <= 14; k++){this.setCellText("-",k, row);}

I placed it in my own code, and it's ok now. Thanks again..

Ozgur

February 23,

I had the same problem, but I couldnt solve it with any of the code above.

obj.setCellText(CellData); 
    obj.setCellTemplate(new AW.Templates.Checkbox, 2);

    obj.setCellValue(function(col, row){return CellData[row][2]=="0" ? true : false}, 2);

    obj.setCellTemplate(new AW.Templates.Checkbox, 4);  
  	obj.setCellValue(function(col, row){return CellData[row][4]=="0" ? true : false}, 4);
        var celldatalength= CellData.length;
        for (k = 0; k <= celldatalength-1; k++){obj.setCellText(CellData[k][4]=="0"? "Yes" : "No",4,k);};
        for (k = 0; k <= celldatalength-1; k++){obj.setCellText(CellData[k][2]=="0"? "Yes" : "No",2,k);};


    obj.onCellValueChanged = function(value, col, row){ 
                 window.status=value;
                 obj.setCellText(value ? "Yes" : "No",col,row);
    }

JT

June 21,

I forgot to mention the code snippet above is working for me

JT

June 21,

Ok left out one small think now its really working

for (k = 0; k <= celldatalength-1; k++){obj.setCellValue(CellData[k][4]=="0"? true : false,4,k);};
        for (k = 0; k <= celldatalength-1; k++){obj.setCellValue(CellData[k][2]=="0"? true : false  ,2,k);};
        for (k = 0; k <= celldatalength-1; k++){obj.setCellText(CellData[k][4]=="0"? "Yes" : "No",4,k);};
        for (k = 0; k <= celldatalength-1; k++){obj.setCellText(CellData[k][2]=="0"? "Yes" : "No",2,k);};

JT

June 21,

This topic is archived.

cannot add row to Alex's checkbox example

See also:

Search

New Data Grid

Version 2