Forums

I'm having an issue using YUI's example for adding a checkbox column to a Datatable. I used the example supplied on the website and what is happening is that the checkbox changes state and then seems to be immediately set back to the previous state by YUI.

table.delegate("click", function(e){
e.preventDefault();

// undefined to trigger the emptyCellValue
var checked = e.target.get('checked') || undefined;

this.getRecord(e.target).set('11', checked);

}, ".yui3-datatable-data .yui3-datatable-col-11 input", table);


.....
}, {
key: "11",
allowHTML: true,
label: 'Check Box',
formatter: chkbox
}];


function chkbox(o) {
return '<input type="checkbox" checked/>'; //Also, tried without checked. This way defaults it to checked.. undesired
}

I've also wrote my own event which checks the state of 'checked' and switches it...but again YUI switches it back giving it the appearance that the check box is doing nothing.

Example this was taken from: http://yuilibrary.com/yui/docs/datatabl ... elect.html

Things to note on this. I am using YUI 3.5.1. The example uses recordType: ['select', 'port', 'pname', 'ptitle'] in the datatable configuration. My datatable:

//Create a new DataTable
var table = new Y.DataTable({
columnset: columns,
scrollable: 'y',
data: initial_load,
width: "900px",
height:table_height+"px"
}).render(selector);

where initial_load is JSON data. I feel like there is some kind of disconnect between my data set and YUI's data table checkbox functionality.


Thanks

Todd,

Thank you for the repsonse.

I have corrected this issue. I had delegated an event to 'td' on this table in 'domready'. In this it was calling preventDefault() which was causing the checkbox to not work properly.

So now I have functioning checkboxes on my datatable, however, this datatable can also have data added to its modelList at some point which is clearing the state of the check boxes each time data is added.

When data is added to the table the following is called:

table.get('data').add(new_data, { silent: true});
table.syncUI();

Any direction on what this might be?