CODEWITHSUNDEEP
javascripthtmldojo
Endophage
Endophage

Reputation: 21473

Select all on dojo checkbox group

I currently have a dojo checkbox group (dijit.form.CheckBox with names in the form "some_name[]") It works exactly as desired however I need to add a select all button/link, preferably not another checkbox (this shouldn't be necessary given the functionality will be implemented in js).

Is the a "dojo" way to do this as using standard js seems to get the elements fine but setting element.checked=true has no effect. For the purposes of testing, I've disabled the dijit.form.CheckBox (so I have regular bog standard checkboxes) and I am able to mark all the boxes checked with the code that is failing when dojo'ified.

I'm running dojo 1.5 if that makes any difference

UPDATE:

OK, it seems to be setting the checkbox to be checked/unchecked but not re-rendering the dojo widget. I'm also being told that the checkboxes don't have any of the method I would expect them to have as dijit.form.CheckBox objects (like the set() method).

Upvotes: 2

Views: 9540

Answers (3)

James Irwin
James Irwin

Reputation: 1191

In case anyone is looking at this for the answer, and there is now (4 years later) another way to do this:

var checkboxes = registry.findWidgets(dom.byId('checkGroupWrapper'));

checkboxes.forEach(function (checkboxWidg) {
    checkboxWidg.set('checked', true);
});

See this documentation.

Upvotes: 0

Endophage
Endophage

Reputation: 21473

So I found out what the problem was. I was doing dojo.query() to get the checkbox group dom nodes. This however doesn't return the dijit widget. To get those I had to do:

nodes = dojo.query('[name=\"checkbox_group[]\"]'); 
dojo.forEach(nodes,function(node)   
  {dijit.getEnclosingWidget(node).set("checked",true);});

By manipulating the widget it visually updates correctly. Also, I wasn't aware that the checkbox input element isn't the widget itself so dijit.byNode(node) returns undefined because the checkbox node doesn't match any of the initialised dijit widgets.

Upvotes: 6

Stephen P
Stephen P

Reputation: 14800

We do this something like show below. This is trimmed down from a lot of other things that get hooked up as handlers in an "addHandlers" function that gets called when the page is loaded.

The selectall and clearall are the links that we're hooking up to.

var selectall = dojo.byId('selectall');
var clearall  = dojo.byId('clearall');

var checklist = getCheckboxList(); // Magic happens here (1)

dojo.connect(selectall, "onclick",
    function(evt) {
        allClick(evt, checklist, true);
    }
);

dojo.connect(clearall, "onclick",
    function(evt) {
        allClick(evt, checklist, false);
    }
);

(1) We get a list of the checkboxes that will be affected based on some ugly criteria, and we use the list for more than this check/clear-all -- you could probably do something much simpler to get yours.

The "allClick" function just checks or unchecks the list of things you pass it

function allClick(evt, list, checkstate)
{
    dojo.forEach(list,
        function(el, idx, ary) {
            el.checked = checkstate;
        }
    );
    evt.preventDefault(); // keep the link from firing
}

Upvotes: 0

Related Questions