aui datatable sortable select rows

225 views Asked by At

I'm using the aui library to make a sortable datatable. I would like the cells to be selectable (normally, plain text, no javascript event binding).

With columns defined as

var columns = [
    {
        key: "col1",
        label: "Column 1",
        sortable: true
    },
    {
        key: "col2",
        label: "Column 2",
        sortable: true
    },
    ...
];

If I use something like

var myDatatable = new A.DataTable.Base({
    columnset : columns,
    recordset : data
});

I can select individual rows but there is no sorting.

If I use

var myDatatable = new A.DataTable({
    columnset : columns,
    recordset : data
});

The table is sortable but I can't select the data with a normal mouse press + drag.

What am I missing here?

I have tried adding the following plugins

plugins: [{
    cfg: {
        type: "rows"
    },
    fn: A.Plugin.DataTableHighlight
},
{
    cfg: {
        selectRow: true,
        selectColumn: true
    },
    fn: A.Plugin.DataTableSelection
}]

but no luck with a plain simple select. For reference, the aui documentation is here. Note that the basic example does what I need minus sort and the real-world example requires double clicking (with editing allowed) on the cells to be able to select / copy the contents.

Please help. Thanks!

1

There are 1 answers

0
geco17 On BEST ANSWER

I managed to solve it after rendering the table by purging mousedown and mouseup events and overriding the getEditor function and the sorting still works.

/* text is not selectable otherwise */
myDatatable.get("contentBox").purge(true, "mousedown");
myDatatable.get("contentBox").purge(true, "mouseup");
/* suppress getEditor */
A.DataTable.prototype.getEditor = function() {};