This is a great article.

Unfortunately, the source code does not seem to be available.

Is it possible to download it somewhere?

Thank you,
Have a great day!
Sébastien

Just thought I’d share my workaround for the problem just in case others are grapling with it. I removed insertion of the $create statement buy not returning anything in the GetScriptDescriptors() function. Instead I wired up an event on the server for the imagebutton:

checkBox.Attributes.Add(“onclick”, “ThreeStateCheckBox_onButtonClick(event, this)”)

Then added a function to the javascript file to handle the creation and disposal of the javascript ThreeStateCheckbox object which passes the event to the object for handling. Let me know if you see any issues with this workaround.

function ThreeStateCheckBox_onButtonClick(event, eventElement) {

//use the create function here rather than using the GetScriptDescriptors as the event is tied to the checkbox at the server
var hiddenElementId = eventElement.id.substring(0, eventElement.id.length – ‘_CheckBox’.length) + “_hidden”;
var CheckState = eventElement.getAttribute(‘checked’);
var NullCheckBox = $create(ChadScharf._ThreeStateCheckBox, { “buttonId”: eventElement.id, “hiddenFieldId”: hiddenElementId, “checked”: CheckState }, null, null, eventElement);

//pass the event to the object, then dispose to avoid duplicate objects and memory leaks
NullCheckBox._onButtonClick(event);
NullCheckBox.dispose();
}

The problem with the $Create being placed in the header is that if the user reloads a certain section of the page (by clicking the same link which causes the partial postback) and the same CheckBoxes get loaded, you get duplicate ids and ajax throws an exception. There’s also no guarantee that the Checkboxes get loaded on the initial display of the page as it depends on what section they are looking at. Is there a way to use the control without generating the $Create statement (i.e. no GetScriptDescriptors).

The best way might be to wire up the javascript click event on the server which would change the image for the check box.

<script type=”text/javascript”>
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
if (prm.get_isInAsyncPostBack) {
$addHandler($get(“…_p_90_ctl00_LeftLowerLimbSelection_checkBox”), “checkChanged”, function() {
alert(“This is a test…”);
});
}
});
</script>

I’ll have to play with this a little more later on, it’s been a long time since I’ve used this control now with MVC out .

~ Chad

I’m having an issue hosting the checkbox in an update panel. The ChadScharf$_ThreeStateCheckBox$_onButtonClick event doesn’t fire (which means that a postback is generated on each click). I’ve narrowed the reason down to the position of the rendering of the $create method for the control on the client side. For some reason it is being rendered in the head section of the html. This means that the script is run before the control is rendered on the client and therefore the event doesn’t wire up. Is there any way to force the create method to render elsewhere? Thanks in advance.

Sys.Application.add_init(function () {
$create(ChadScharf._ThreeStateCheckBox, { “autoPostBack”: false, “buttonId”: “EvaluationWizard1_QuestionSection1_SectionQuestionList_EvaluationWizard1_QuestionSection1_SectionQuestionList_p_90_ctl00_LeftLowerLimbSelection_checkBox”, “checked”: “Blank”, “dataKey”: “”, “hiddenFieldId”: “EvaluationWizard1_QuestionSection1_SectionQuestionList_EvaluationWizard1_QuestionSection1_SectionQuestionList_p_90_ctl00_LeftLowerLimbSelection_hidden”, “imgBlank”: “/CPReview.WebUi/WebResource.axd?d=QEBJ-MkVr9cLW8K4ZDydlhzT3yBZD0xSTptHhHNB-cLbApc4M3fflYB8i6Vm8P-Y7C-L0Mbtskf_4Bwkib5SSYIe9cKREehIPYNESaQgjiGNUIlDvef6gBY-qzxtGZfCEnLOYS2irHyieTVG8BbTgQ2&t=634383084076491083″, “imgChecked”: “/CPReview.WebUi/WebResource.axd?d=2ZejVv3OrvYY9FnpydKPFXnMS2jAMj3Q8p3D8F55NuSXLnQJC4EAiEZ1Se4IBv0brxcq2iYiie8DofDoTrZgdvbTMmYxzJX9IbmhGW1cmJOuaiPlTJfarEqFreVf6wXq5k2RuEp6Keosa6zalv27hA2&t=634383084076491083″, “imgUnchecked”: “/CPReview.WebUi/WebResource.axd?d=hWTJsDUBPgUDCUEeq3Dagd4FDCRzJJdB6CRnrn2zWDFaxLdylQUhSPWYt1Om7dL2w7XSvrY0_b4cPBj0Qy82iU4VguvhTw0vYoA6KzIE2Gy48KDDRIpkUnFOLwsqz8BykTrkKo7l2NE48CD9gRQepw2&t=634383084076491083″ }, null, null, $get(“EvaluationWizard1_QuestionSection1_SectionQuestionList_EvaluationWizard1_QuestionSection1_SectionQuestionList_p_90_ctl00_LeftLowerLimbSelection”));
});

body content here

get
{
switch (Checked)
{
case CheckedState.Checked: return true;
case CheckedState.Unchecked: return false;
case CheckedState.Blank:
default: return null;
}
}
set
{
Checked = value == null ? CheckedState.Blank : value.Value ? CheckedState.Checked : CheckedState.Unchecked;
}

#endregion
}

As far as setting the 3-way state using a nullable boolean value, that should be easy as well. Something like this should suffice; (where myBitField is a nullable boolean, (bool? myBitField)):

myCheckBox.Checked = myBitField == null ? CheckedState.Blank : myBitField.Value ? CheckedState.Checked : CheckedState.Unchecked;

And then just reversing that the other way to get the value back out. You could also scrap the enumeration and simply use a Nullable property instead, blank = null, checked = true, unchecked = false. It should be fairly simple to switch the binding from the enumeration with the hidden field (which can have a blank string as its value anyway).

Thanks,
Chad