How can I get the checked state of a CheckBox in a YUI DataTable to be set by the data in the datasource?

Question

I've been googling this all day and can't seem to find an answer. Also searched here of course, and also didn't find it, but please forgive me if I've missed the answer somewhere. I did try!

I have a YUI DataTable that contains a CheckBox field. I would like to have this box checked or unchecked based in the incoming JSON data that I'm using as the DataSource for the table. What's happening is that the checkbox is checked for all rows, and I don't know what to do to tell it to only check the box if the field value is 'true'. Here's my code as of now:

createDataTable : function (data) {
        var columnDefs =  [
                            { key: "Well", width : 30 },
                            { key: "Value", field: "ReducedValue", width : 100 },
                            { key: "Hit", width : 30, formatter:YAHOO.widget.DataTable.formatCheckbox},
                            { key: "Reason", field: "reason", width : 200 }                                
                          ];
        var dataSource = new YAHOO.util.DataSource(data);
        dataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        dataSource.responseSchema = {
          fields : [ "Well", "ReducedValue", "Hit", "reason" ]
        };

        var dataTable = new YAHOO.widget.ScrollingDataTable("data-table", columnDefs, dataSource, {height:"10em"});
        $(".yui-dt table").css( { width : imageW } );

      }

The 'Hit' field is the one I'm concerned with here. Incoming data with a value of 'true' for this field should have the checkbox checked, otherwise it should be unchecked.

Thanks for any help!

William

score 1 · Accepted Answer · answered Nov 09 '10 at 13:20

The actual code for formatCheckbox is below. I'm just guessing, but maybe you're passing in the string 'false' or the string '0' which are actually true in value.

 /**
     * Formats a CHECKBOX element.
     *
     * @method DataTable.formatCheckbox
     * @param el {HTMLElement} The element to format with markup.
     * @param oRecord {YAHOO.widget.Record} Record instance.
     * @param oColumn {YAHOO.widget.Column} Column instance.
     * @param oData {Object | Boolean} Data value for the cell. Can be a simple
     * Boolean to indicate whether checkbox is checked or not. Can be object literal
     * {checked:bBoolean, label:sLabel}. Other forms of oData require a custom
     * formatter.
     * @static
     */
    formatCheckbox : function(el, oRecord, oColumn, oData) {
        var bChecked = oData;
        bChecked = (bChecked) ? " checked=\"checked\"" : "";
        el.innerHTML = "<input type=\"checkbox\"" + bChecked +
                " class=\"" + DT.CLASS_CHECKBOX + "\" />";
    },

So what can I pass in a JSON string to indicate false? I did just try the object literal approach in the comments from the code you posted, and that didn't work either. I've also tried passing an empty string '' and that doesn't work. Confused ... — William Graham, Nov 09 '10 at 18:28
I just re-checked my code, and I was indeed passing strings instead of booleans. It works now, thanks!!! — William Graham, Nov 09 '10 at 18:51

How can I get the checked state of a CheckBox in a YUI DataTable to be set by the data in the datasource?

1 Answers1