ActiveWidgets • 2.0b3 Checkbox Template

Based on Sudhaker Raj's post "Checkbox template of my dream":
/javascript.forum.2388.20/checkbox-template-of-my-dream.html
I created this "old-style" basic checkbox-template for version 2, didn't test it in all situations/browsers yet, but as some of you seems to need ... and... (untill Alex finished the new templates) .
Working on some other basic-templates
HTH

ActiveWidgets Grid :: Examples [code]

<html>

<head>

<title>ActiveWidgets Grid :: Examples</title>

<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>



<!-- ActiveWidgets stylesheet and scripts -->

<link href="../../runtime/styles/xp/aw.css" rel="stylesheet" type="text/css" ></link>

<script src="../../runtime/lib/aw.js"></script>



<!-- grid format -->

<style>

.aw-grid-control {height: 100%; width: 100%; margin: 0px; border: none; font: menu;}

.aw-row-selector {text-align: center}



.aw-column-0 {width:  80px;}

.aw-column-1 {width: 200px;}

.aw-column-2 {text-align: right;}

.aw-column-3 {text-align: right;}

.aw-column-4 {text-align: right;}



.aw-grid-cell {border-right: 1px solid threedlightshadow;}

.aw-grid-row {border-bottom: 1px solid threedlightshadow;}

</style>



<!-- grid data -->

<script>

var myData = [

["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],

["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],

["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],

["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"],

["ERTS", "Electronic Arts Inc.", "14,490.895", "2,503.727", "4000"],

["SFTBF", "Softbank Corp. (ADR)", "14,485.840", ".000", "6865"],

["KNM", "Konami Corporation (ADR)", "3,710.784", ".000", "4313"]

];



var myColumns = [

"Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"

];

</script>

</head>

<body>

<script>



//    create ActiveWidgets Grid javascript object

var obj = new AW.UI.Grid;



//    define data formats

var str = new AW.Formats.String;

var num = new AW.Formats.Number;



obj.setCellFormat([str, str, num, num, num]);



//    provide cells and headers text

obj.setCellText(myData);

obj.setHeaderText(myColumns);



//    set number of rows/columns

obj.setRowCount(7);

obj.setColumnCount(5);



//    enable row selectors

obj.setSelectorVisible(true);

obj.setSelectorText(function(i){return this.getRowPosition(i)+1});



//    set headers width/height

obj.setSelectorWidth(28);

obj.setHeaderHeight(20);



//    set row selection

obj.setSelectionMode("single-row");



//    set click action handler

obj.onCellClicked = function(event, col, row){window.status = this.getCellText(col, row)};







//************************************************

// *********************************************** 

//    Custom Checkbox UI  for AW Cell Template. 

// *********************************************** 

AW.UI.OldCheckbox=AW.UI.ImageText.subclass();

AW.UI.OldCheckbox.create=function() {

AW.Templates.Input.create.call(this);

var obj=this.prototype;

obj.setClass("ui","input");



obj.defineModel("checked");

obj.defineCheckedProperty("istrue", "Y");

obj.defineCheckedProperty("isfalse", "N");



var checkbox = new AW.HTML.INPUT;

checkbox.setClass("item","text");

checkbox.setAttribute("type","checkbox");

checkbox.setAttribute("checked", function(){

return (this.getControlProperty("text") == this.getCheckedProperty("istrue"))

});



function toggleValue(){

var originalVal = this.getControlProperty("text");

var newValue = (originalVal == this.getCheckedProperty("istrue")) ? this.getCheckedProperty("isfalse") : this.getCheckedProperty("istrue");

this.setControlProperty("text", newValue);

}



checkbox.setEvent("onclick", toggleValue);



obj.setContent("box/text", checkbox); 



};

////////////////////////////////////////////////////////////



var MyInput = new AW.UI.OldCheckbox; 





///// BLOCK-1 //// (FOR ALWAYS VISIBLE -- IF USED DISABLE BLOCK-2)

//  /*

obj.setCellTemplate(MyInput, 2);

obj.setCellTemplate(MyInput, 3);

obj.setCellTemplate(MyInput, 4);

//  */

///////////////////////////////////////







///// BLOCK-2 //// (FOR SINGLE CELL -- IF USED DISABLE BLOCK-1)

/*

var lastcol=0;

var lastrow=0;

var defaultcelltemplate = obj.getCellTemplate(0,0);

var NrColumns = obj.getColumnCount()



obj.onCellClicked = function(event, col, row){ 

obj.setCellTemplate(defaultcelltemplate, lastcol, lastrow); 

obj.getCellTemplate(lastcol, lastrow).refresh(); 

obj.setCellTemplate(MyInput , col, row); 

obj.getCellTemplate(col, row).refresh(); 

obj.setCurrentColumn(col);

obj.setCurrentRow(row);

lastcol = col;

lastrow = row;

}

*/

/////////////////////



//    write grid html to the page

document.write(obj);



</script>

</body>

</html>

Great, this is exactly what I have been looking for this the release of b1!!!

Carlos, you a good guy also!

Glad to give some help, also found a way to simulate (double-click edition functionality) by replacing the second block with:

var lastcol=0;

var lastrow=0;

var defaultcelltemplate = obj.getCellTemplate(0,0);

var NrColumns = obj.getColumnCount()



obj.onCellDoubleClicked = function(event, col, row){ 

obj.setCellTemplate(MyInput , col, row); 

obj.getCellTemplate(col, row).refresh(); 

obj.setCurrentColumn(col);

obj.setCurrentRow(row);

lastcol = col;

lastrow = row;

}



obj.onCellClicked = function(){

obj.setCellTemplate(defaultcelltemplate, lastcol, lastrow); 

obj.getCellTemplate(lastcol, lastrow).refresh(); 

lastcol = col;

lastrow = row;

}

Need to add the line:

obj.setCellEditable(false);

Carlos You are The Best

Hi Carlos

Its Great . and I really appreciate u have given a good workaround for the
checkbox template which every one was badly looking for .. But I need
One More Help I would Like TO know How To use the same for a
AW.XML.Table

My Problem Is I have Got A grid In Which i needs data from Xml. But For the
first column i need to set checkbox as the template . and for the rest of the cells data should be from xml .

Thank You Very Much

2.0b3 Checkbox Template - Experiment-1.....

Forum search