3.2.0

Checkbox template of my dream ;-)

Checkbox template of my dream ;-)

Following is my attempt to make ideal checkbox template and I made by subclass-ing Active.System.Control so it has got improvements over any earlier suggested solution. The main benefit is - grid is managing checked/unchecked values automatically :-) Tell template that it is “Y/N” or “Yes/No” or “True/False” or “Active/Inactive” or whatever your checked/unchecked values are.

Looking for some feedback – especially from those who appreciate OO programming and cleaner APIs.

JS Code:

if (!window.My) My=[];
if (!My.Templates) My.Templates=[];


// **************************************************************** 
//     Checkbox Cell Template. 
// ****************************************************************

My.Templates.Checkbox = Active.System.Control.subclass(); 

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

  var obj = this.prototype;
  
  obj.defineModel("checked");
  obj.defineCheckedProperty("true", "Y");
  obj.defineCheckedProperty("false", "N");
  
  obj.setClass("templates","checkbox"); 

  var checkbox = new Active.HTML.INPUT; 
  checkbox.setClass("input","checkbox"); 
  checkbox.setClass("checkbox", function(){return this.getColumnProperty("index")}); 
  checkbox.setAttribute("type","checkbox"); 
  checkbox.setAttribute("checked", function(){
    return (this.getItemProperty("text") == this.getCheckedProperty("true"))
  }); 

  function toggleValue(){
    var originalVal = this.getItemProperty("text");
    var newValue = (originalVal == this.getCheckedProperty("true")) ? this.getCheckedProperty("false") : this.getCheckedProperty("true");
    this.setItemProperty("text", newValue);
    this.refresh();
  }
  
  checkbox.setEvent("onclick", toggleValue);

  obj.setContent("checkbox", checkbox); 

}; 

My.Templates.Checkbox.create(); 

// **************************************************************** 
//     CheckboxLabel Cell Template. 
// ****************************************************************

My.Templates.CheckboxLabel = My.Templates.Checkbox.subclass(); 

My.Templates.CheckboxLabel.create = function(){ 

  var obj = this.prototype; 

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

  obj.setContent("label", label); 
}; 

My.Templates.CheckboxLabel.create();


CSS Code:

.active-input-checkbox {vertical-align: middle; padding: 0px 5px; margin: -1px 0px 0px;}
.active-checkbox-label {margin-left: 5px;}


Sample Code:

//  create checkbox template (or checkbox with label)
  // var checkbox = new My.Templates.Checkbox;
  var checkbox = new My.Templates.CheckboxLabel;
  // set checked/unchecked values
  checkbox.setCheckedProperty("true", "Yes")
  checkbox.setCheckedProperty("false", "No")
  //  assign this template to columns 5
  obj.setColumnTemplate(checkbox, 5);


Cheers,
Sudhaker
Sudhaker Raj
October 14,

See in action:

http://thej2ee.com/awdemo/examples/myexamples/checkbox_editable_cell_and_tricks.html
October 14,
I'm wondering how you can onclick event on this model ?
Antony Guilloteau
October 25,
Sorry the response is in the code (toggleValue)
October 25,
In FireFox 1.0 Preview Release when you check a checkbox :-P
The checkedbox apears on the right overlaping the first column (Ticker)

When you refresh the problem is solved ... but until then it doesn't look pretty.
DrAkE
October 26,

I should have checked on FireFox too. Never tested it on anything other than IE6. Will try to resolve it and post the modified code ASAP.
Sudhaker Raj
October 29,

Alex, any input on this?

Adding follwoing code stops jumping but column width is screwed ;-(

<code>
.active-templates-checkbox.gecko {display: inline; margin: 0px;}
</code>
Sudhaker Raj
November 5,

bump.
November 23,
I see the same problem reported by DrAkE with Firefox and Mozilla

Also, click on your "See in Action" link above, Click on "Active" to sort. Now check or unched a couple of checkboxes and click on "Active. Column does not sort correctly.

Click on any other column heading, then on "Active" again and it sorts properly.
Steve Beaver (sbeaver@columbus.rr.com)
December 21,
Sudhaker,

Nice example - and how would one go about submitting the changed data back to the server for updating a database from whence it came?
Mobasoft
January 26,
Hi Sudaker,

How do you set the disable property for this checkbox template
April 29,
Hi,

i also would like to know how to disable the the checkbox!
Ruud
May 4,
Hi Sudhaker,

I used you dream checkbox and found an error in toggleValue().

When you click a checkbox, and than click another checkbox in that coulmn, this.getCheckedProperty still contains the state of the first checkbox clicked and so sets the second clicked checkbox with the state of the first clicked (wrong!).

Sounds complicated I hope you understood me. I didn't now how to fix that error cause I ain't sharp on constructors and inner function, so i used basic dom technic, etc:

function toggleValue()
{
//fix - locate object clicked instead of this
var src = event.srcElement;

//preserve checkbox state once
var trueState = this.getCheckedProperty("true");
var falseState = this.getCheckedProperty("false");

var newValue = (src.checked) ? trueState:falseState;
this.setItemProperty("text", newValue);
this.refresh();
}
InonI
May 5,
After Clicking some checkboxes and sorting. All the column grid fields are filled with the last ckicked label text.

Solution ?
InonI
May 5,
hi i faced the same problem as InonI.
Found a solution by changing the toggleValue method. Here's how my method looks:

function toggleValue(){
var originalVal = this.getItemProperty("text");
var newValue = (originalVal == this.getCheckedProperty("true")) ?this.getCheckedProperty("false") : this.getCheckedProperty("true");
this.setItemProperty("text", newValue);
//this.setColumnProperty("text", newValue, this.getColumnProperty("index"));
this.setRowProperty("value", newValue, this.getRowProperty("index"));
this.refresh();
}

To retrieve All the values set in the row property:

var i = "", max = this.getRowProperty("count");
for (i=0; i<max; i++){
var s = this.getRowProperty("value", i);
alert(i + "=" + s);
}
Asif Iqbal
June 8,
About disabling the checkbox:
I found that the following works:
checkbox.setAttribute('disabled',true);

Henry
June 8,
Hi Asif,

Your logic this.setRowProperty("value", newValue, this.getRowProperty("index"));
won't solve the issue as we have say 5 rows and then click the fourth row thereafter if you remove all the unchecked rows you have to reset the row value
Greg
June 16,
Hello All,

I have been trying to get the toggleValue function to work, with little success. I'm pretty new to activewidgets grid, but I have been able to use the forum to help a great deal. When selecting the checkbox within my grid I keep getting the error "object doesn't support this property or method". I'm pretty sure it is within the "this.setItemProperty("text", newValue);" line. Any assistance would be greatly appreciated.
Steve
July 20,
i am not getting check box.
please give me example code for check box.

thanks n advance
jeeva
October 19,
Hi,
I am trying to use the above My template version for checkbox. But it is giving javascript error saying object Active not defined. I tried using the link

http://thej2ee.com/awdemo/examples/myexamples/checkbox_editable_cell_and_tricks.html

But since i am not registered and even the site is currently not allowing new registerations I am unable to see it working live.

Can someone kindly share some user id and password to me once so that i can see the demo :)

Thanks,
- Manoj. (m4manoj@gmail.com)
Manoj
October 24,

Hi,
I am trying to use the above My template version for checkbox. But it is giving javascript error saying object Active not defined. I tried using the link

http://thej2ee.com/awdemo/examples/myexamples/checkbox_editable_cell_and_tricks.html

But since i am not registered and even the site is currently not allowing new registerations I am unable to see it working live.

Can someone kindly share some user id and password to me once so that i can see the demo :)

Thanks,
- Manoj. (m4manoj@gmail.com)
()
November 2,
The gurus seem strangely silent on this problem. Perhaps it doesn't work ? A little help will go a long way for us mortals.
The Fox
January 22,
are you linking to ActiveWidget 1.0 runtime libraries in your HTML?
Dmitry
January 22,

This topic is archived.

See also:


Back to support forum