Checkbox example

Some hints about checkbox template:

The checkbox template can display cell value (true, false or mixed), cell text and cell image at the same time.

obj.setCellTemplate(new AW.Templates.Checkbox, 1);
obj.setCellText("some text", 1);
obj.setCellImage("favorites", 1);
obj.setCellValue(false, 1);

Whether the checkbox is checked or clear depends on cell value property (true=checked, false=clear, everything else=mixed). If you want your cell text to correspond the checkbox state - you have to write a function which translate one to another (at some point I am planning to add AW.Formats.Boolean class for this).

Complete example:

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

<input type=button value="See What's Checked" onClick="getChecked();"><br>

<script>

    var obj = new AW.UI.Grid;

    obj.setControlSize(600, 250);
    obj.setCellText(function(i, j){return j + "-" + i});
    obj.setHeaderText("header");

    obj.setColumnCount(10);
    obj.setRowCount(15);

    //	this is 'normal' checkbox
    //	it changes cell 'value', not selection
    obj.setCellTemplate(new AW.Templates.Checkbox, 2);

    //	set initial value for column 2
    obj.setCellValue(false, 2);

    //	needed to get "checked" state
    obj.setCellText(function(col, row){return this.getCellValue(col, row) ? "yes" : "no"}, 2);

    document.write(obj);

    obj.onCellValueChanged = function(value, column, row){
        window.status = "Cell " + column + "." + row + " changed to " + value;
    }

    function getChecked() {
        for(var i=0;i<obj.getRowCount();i++) {
            if(obj.getCellValue(2,i)) {
                alert(i);
            }
        }
    }

</script>
</body>
</html>

Alex (ActiveWidgets)

December 5,

Thanks for the example, the retrieval information is useful. There still seems to be some issues. The example you showed does not seem to work the same as when the data is coming from an array or file. I modified the Basic.htm example to include an additional field called Status with some trues and falses.
- You cannot seem to use setCellText() to change the true/false text
- If you use the template for the editor, it still returns a js error when you go into edit mode and the checkbox will not toggle
- Is there a way to have the checkbox disabled until you are in edit mode?

Rick Villela

December 5,

Alex,

I need a little help with a change to your sample above (which works fine for me).

I tried to get it to work from an array data source but I can't get the the "yes" and "no" toggle text to work.

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

<input type=button value="See What's Checked" onClick="getChecked();"><br> 

<script> 

  var myData = [["1","2","function(col, row){return this.getCellValue(col, row) ? \"yes\" : \"no\"}","4","5","6","7","8","9","10"],
                ["1","2","help","4","5","6","7","8","9","10"],
                ["1","2","help","4","5","6","7","8","9","10"],
                ["1","2","help","4","5","6","7","8","9","10"],
                ["1","2","help","4","5","6","7","8","9","10"],
                ["1","2","help","4","5","6","7","8","9","10"],
                ["1","2","help","4","5","6","7","8","9","10"],
                ["1","2","help","4","5","6","7","8","9","10"],
                ["1","2","help","4","5","6","7","8","9","10"],
                ["1","2","help","4","5","6","7","8","9","10"],
                ["1","2","help","4","5","6","7","8","9","10"],
                ["1","2","help","4","5","6","7","8","9","10"],
                ["1","2","help","4","5","6","7","8","9","10"],
                ["1","2","help","4","5","6","7","8","9","10"],
                ["1","2","help","4","5","6","7","8","9","10"]
  ];


    var obj = new AW.UI.Grid; 

    obj.setControlSize(600, 250); 
//    obj.setCellText(function(i, j){return j + "-" + i}); 
    obj.setCellText(myData);  // 2-dimensional js array  // NEW LINE

    obj.setHeaderText("header"); 

    obj.setColumnCount(10); 
    obj.setRowCount(15); 

    //    this is 'normal' checkbox 
    //    it changes cell 'value', not selection 
    obj.setCellTemplate(new AW.Templates.Checkbox, 2); 

    //    set initial value for column 2 
    obj.setCellValue(false, 2); 

    //    needed to get "checked" state 
    obj.setCellText(function(col, row){return this.getCellValue(col, row) ? "yes" : "no"}, 2); 

    document.write(obj); 

    obj.onCellValueChanged = function(value, column, row){ 
        window.status = "Cell " + column + "." + row + " changed to " + value; 
    } 

    function getChecked() { 
        for(var i=0;i<obj.getRowCount();i++) { 
            if(obj.getCellValue(2,i)) { 
                alert(i); 
            } 
        } 
    } 

</script> 
</body> 
</html>

I need help figuring out the initial value of the array where it says "help". I think that needs to be the function which I tried to do in the first row but it doesn't accept it as a function (instead it displays my text in the field).

Please help.

Thanks,
Rob

Rob Francis

December 6,

Hi I Have Change You r Function To this Way . So that i can delete the selected Rows

function getChecked() {
for(var i=0;i<obj.getRowCount();i++) {
if(obj.getCellValue(2,i)) {
alert(i);
obj.deleteRow(i);
}
}
}

Fine It Works Well .. But Select 2 more check boxes now . Then It Retains the value
of previous deleted checkboxes Ids .. and shows it is trying to delete allready
deleted ids .. I have tried this Modification . But Couldn't Succeed ..

obj.onRowDeleted = function(row){
window.status = "Row deleted: " + row;
obj.refresh();
}
Plz give A solution

Jyothish

December 7,

And Just Try One More Thing .. Try Selecting all the check boxes and try deleting
in a loop and You Can see .. Things going wrong after deleting the 7 th row ... Please
Have A check On this .. IS It Some Kind Of A Bug ? .. Just CHeck Out This

Jyothish

December 7,

Does any body know...

How to put a checkbox in the header that checks or unchecks all check boxes of that column?

yamyam

January 19,

Very confused about the checkbox template...

I tried to modify your example to make it use real data (not function-generated data), but the yes/no template didn't work anymore.
I does work if I use a function to access the same data (!). Is that normal?

Complete test code follows, keep an eye for CHANGES/END CHANGES.

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

<input type=button value="See What's Checked" onClick="getChecked();"><br>

<script>

    var obj = new AW.UI.Grid;

    obj.setControlSize(600, 250);
    obj.setHeaderText("header");
//    obj.setCellText(function(i, j){return j + "-" + i});
/********** CHANGES ****************/
var data = [
    ["0-0", "0-1", false],
    ["1-0", "1-1", false],
    ["2-0", "2-1", false]
];
//    obj.setCellText(data);
    obj.setCellText(function(i, j){return data[j][i]});
/********** END CHANGES ************/

    obj.setColumnCount(3);
    obj.setRowCount(3);

    //    this is 'normal' checkbox
    //    it changes cell 'value', not selection
    obj.setCellTemplate(new AW.Templates.Checkbox, 2);

    //    set initial value for column 2
    obj.setCellValue(false, 2);

    //    needed to get "checked" state
    obj.setCellText(function(col, row){return this.getCellValue(col, row) ? "yes" : "no"}, 2);

    document.write(obj);

    obj.onCellValueChanged = function(value, column, row){
        window.status = "Cell " + column + "." + row + " changed to " + value;
    }

    function getChecked() {
        for(var i=0;i<obj.getRowCount();i++) {
            if(obj.getCellValue(2,i)) {
                alert(i);
            }
        }
    }

</script>
</body>
</html>

Ben

October 13,

I got it... kinda. The template work with real data if I use setCellData() instead of setCellText() (doesn't work with setCellValue()... still don't get the difference between data and value but that's not the point here).

There's still a problem though... my original data[] array isn't updated (it wasn't updated either with my function accessing the data but that seems more normal).
That's a shame because accessing the array (ie for filtering) is MUCH faster than accessing the data (I ran some tests on a grid with 1500 lines: accessing one column's data using the original array is quasi instantaneous ~10ms, using getCellText(): slight pause ~40ms, using getCellValue() and getCellData: big pause ~120 and 160ms).

So I have to monitor both onCellTextChanged and onCellValueChanged (for text and boolean columns - textbox and checkbox templates), and update the data[] then.

I find it a pity, everything is near perfect but the model lacks homogeneity, for example when compared to the .NET datagrid (winform). By default, boolean columns are rendered as checkboxes (with no text), and checking them updates the data, just as text columns do.
IMO, it shouldn't take more than that:

grid.setCellTemplate(new AW.Templates.Checkbox, myBooleanColumn);

and the rest should be consistent with the text template (data[] update).

BTW, it's no big deal but by default the checkbox displays "false", which isn't very interesting and isn't updated when clicked, and just getting it to not display any text at all isn't very intuitive (or maybe I missed a property):

grid.setCellText(function(col, row){return ""}, myBooleanColumn);

Maybe something like

myTemplate.setTextVisible(false)

would be nice?

Ben

October 17,

Hi,

I'm also having difficulty getting the 'yes'/'no' toggle to work when the grid is populated from an array. The example works fine, but as soon as you change

obj.setCellText(function(i, j){return j + "-" + i});

to something like this

obj.setCellText(myArray);

The toggle no longer works.

Does anyone know how to resolve this issue?

thanks

Stuart

February 11,

To show 'Yes' and 'No' after checkbox :-)

obj.setContent("box/text", function() {return this.getControlProperty("value") ? 'Yes' : 'No'});

Cheers,
Sudhaker
http://thej2ee.com (active again)

Sudhaker Raj

February 13,

Hi Sudhaker,

That doesn't seem to work for me. Could you please provide a complete example?

Thanks,
Stuart

Stuart

February 13,

For solution, see post:
http://www.activewidgets.com/javascript.forum.18378.2/tips-for-checkbox-template.html

Stuart

February 14,

This topic is archived.

Checkbox example

See also:

Search

New Data Grid

Version 2