CODEWITHSUNDEEP
javascriptyuievent-bubblingyui-datatable
Mashmagar
Mashmagar

Reputation: 2664

How do I cancel event bubbling in a YUI DataTable?

I am trying to create a YUI 2.8.1 DataTable with a checkbox column. When the user selects the row it should highlight, but not when the user checks the checkbox.

I'm trying to suppress the rowClickEvent by setting cancelBubble = true in the checkboxClickEvent, but the YUI library ignores this. How do I prevent the rowClickEvent from firing?

this.testDataTable.subscribe("checkboxClickEvent", function (oArgs)
{
    var elCheckbox = oArgs.target;
    var oRecord = this.getRecord(elCheckbox);
    oRecord.setData("check", elCheckbox.checked);
    oArgs.event.cancelBubble = true; //Event bubbles anyway
});

Upvotes: 2

Views: 389

Answers (2)

Luke
Luke

Reputation: 2581

return false from the checkboxClickEvent

Upvotes: 1

Mashmagar
Mashmagar

Reputation: 2664

I've worked around the issue by setting a flag to suppress row click, but I'd still like to know how to cancel the bubble "properly."

suppressHighlight = false;

this.testDataTable.onEventRowClick = function (oArgs)
{
    ...

    if (!suppressHighlight)
    {
        ...
    }
    suppressHighlight = false;
};
this.testDataTable.subscribe("rowClickEvent", this.testDataTable.onEventRowClick);

this.testDataTable.subscribe("checkboxClickEvent", function (oArgs)
{
    var elCheckbox = oArgs.target;
    var oRecord = this.getRecord(elCheckbox);
    oRecord.setData("Check", elCheckbox.checked);

    suppressHighlight = true;
});

Upvotes: 0

Related Questions