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

See in action:

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

I'm wondering how you can onclick event on this model ?

Sorry the response is in the code (toggleValue)

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.

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.

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>

bump.

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.

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?

Hi Sudaker,

How do you set the disable property for this checkbox template

Hi,

i also would like to know how to disable the the checkbox!

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();
}

After Clicking some checkboxes and sorting. All the column grid fields are filled with the last ckicked label text.

Solution ?

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);
}

About disabling the checkbox:
I found that the following works:
checkbox.setAttribute('disabled',true);

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

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.

i am not getting check box.
please give me example code for check box.

thanks n advance

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)

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)

The gurus seem strangely silent on this problem. Perhaps it doesn't work ? A little help will go a long way for us mortals.

are you linking to ActiveWidget 1.0 runtime libraries in your HTML?