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

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

[code]<html>
<head>
<title>ActiveWidgets Grid :: Examples</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>


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


<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>


<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>[code]

Carlos

December 3,

<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>

December 3,

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

Carlos, you a good guy also!

Paul

December 3,

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

December 3,

Carlos You are The Best

Josh

December 5,

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

Pooja

December 5,

This topic is archived.

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

See also:

Search

New Data Grid

Version 2