This is a cool little code snippet that you might find useful. In my previous post, I talked about the creation of a custom Atlas image button control and the refactoring that was required to get the eventing to work correctly. Well in addition to that, I need to take an existing check box control that was built in a similar way to the button control. "And" I hear you say ...... Well I needed to build a select all check box that would activate any child checkboxes associated with its parent. Atlas makes this really straight forward for us to implement in our code.
//Create the custom image check box control
this.createImageCheckboxElement = function(id, className, value, parentCheckbox) {
var element = this.createHtmlElement("td", id, className, value);
var imageCheckbox = new AtlasStuff.UI.ImageCheckbox(element);
imageCheckbox.set_checked(false);
//setup the properties on the checkbox
if (parentCheckbox != null){
//create a new binding object
var binding = new Sys.Binding();
binding.set_dataContext(parentCheckbox);
//image checkbox has a property called checked so bind up to it
binding.set_dataPath("checked");
binding.set_property("checked");
//wire it up
imageCheckbox.get_bindings().add(binding);
}
imageCheckbox.initialize();
return imageCheckbox;
}
And we are done. We are using the parent Checkbox as the binding source and the child checkboxes as the target using their checked property. The simple design means that we don't have to change any of the existing code in the checkbox control. We can bind the imagecheckbox outside of the control itself as we would not want to have the parent and child restrictions enforced on the checkbox control or another developer may just want a check box control and would not require the functionality that I need.
No gotcha's ??? Well, take a closer look at the parameters that I am passing into the function and you maybe thinking why am I having to pass in the parentCheckbox as I should be able to use the $object("myCoolCheckbox"). Well it turns out that atlas has not completely initialised the control and when we try and use the $object function all we get back is null. I am uncertain as to why this actually happens but it could well have something to do with using the client side JavaScript to create the elements dynamically.