Updating Columns Dynamically - Alloy UI

Question

I'm trying to change columns dynamically in my Alloy UI DataTable - depending on what button is selected, columns are changed depending on which data is returned.

My columns get updated, however the actual data is never included in the table. When I don't define any columns both the columns and data are returned - I of course want control of how my columns are displayed and want to set their attributes

Below is my code:

 var dataTable = new Y.DataTable({ //Defining Datatable with no columns preset
    editEvent: 'dblclick',
    plugins: [{
        cfg: {
            highlightRange: false
    }]
});

button.on(
    'click', //On Click...
    function() {
        var category = $(this).attr("id"); //value retrieved from id of button selected 
        dataSource = new Y.DataSource.IO({source: '/searchMyData
        dataSource.sendRequest({
            dataType: 'json',
            on: {
                success: function(e) {
                    response = e.data.responseText;
                    setColumnNames(category); //Set the Columns...
                    data = Y.JSON.parse(response);
                    dataTable.set('data', data);//Then the Data
                    dataTable.render('#my-container');
                },
                failure: function() {
                    alert(e.error.message);
                }
            }
       });

function setColumnNames(tabName){ //Defining Columns
    var columns1 = [
        { key: 'id', label: 'ID', width: '70px' },
        { key: 'name', label: 'Name', width: '70px' } 
     ];
     var columns2 = [
        { key: 'id', label: 'ID', width: '70px' },
        { key: 'addr', label: 'Address', width: '70px' } 
     ];
     switch (category) {
         case "person":
            dataTable.set('columns', columns1);
            break;
        case "address":
            dataTable.set('columns', columns2);
             break;
        default:
             console.log('');
}

There's no issue with the data returning from the ajax request, only when it comes to loading it to the table with a new set of columns defined. I've tried the reset() method on both columns and data on each click, but no luck.

score 0 · Answer 1 · answered Jun 14 '15 at 19:08

It turns out the keys returned from my request were being capitalized and included underscores (just how they're defined in the database) - I've also noticed defining the columns key is case sensitive. If I changed a single character from lower case to upper than the column would not display data.

Updating Columns Dynamically - Alloy UI

1 Answers1