Google Visualization - Hide Column in a table that is part of a dashboard but still be able to use the underlying data for a StringFilter

Question

edit: Solved thanks to asgallant. See below for the answer.

---

this is my first question, I'm fairly new to programming and I'm hoping to find some answers on here.

I'm trying to create a dashboard with the Google Visualization API to show a table and a search box to search for usernames which is working fine.

But I would like to keep the first and last name separated in 2 columns so that they can be sorted by either first or last name but in the searchbox I want to be able to search for either name.

Since the StringFilter cannot search multiple columns, I've created another column which combines the 2 names and bound it to the StringFilter. So far so good.

Now I want to hide the column that combines first and last name in the table but still be able to use the StringFilter to search that hidden column.

After searching quite a bit on this website as well as others, I couldn't find a solution to my problem. It seems like this should be possible with the DataView but I couldn't get it to work. The hiding works fine with a DataView but as soon as the column is hidden, I get an error saying that the StringFilter option 'filterColumnIndex' should be in the range 0-4 because column 5 is hidden.

I've tried it already with dashboard.draw(view, options: {view: [0,1,2,3,4]}); and dashboard.draw(view, options: {data: [0,1,2,3,4]});

Is this even possible? Any help would be appreciated! Thanks for your time.

Here is my code so far:

function DrawDashboard() {
            $.ajax({
                url: "/report/toverview/rest/router.php/user/",
                dataType: 'json'
            }).done(function (result) {

                //------------------------------------------------------------------//
                // Create and populate the data table.
                //------------------------------------------------------------------//
                var data = new google.visualization.DataTable();
                data.addColumn('number', 'ID');
                data.addColumn('string', 'TU-ID');
                data.addColumn('string', 'Vorname');
                data.addColumn('string', 'Nachname');
                data.addColumn('string', 'E-Mail');
                data.addColumn('string', 'FullName')
                var array = new Array();
                result = result.Records;
                //console.log(result);
                $.each(result, function(id, felder) {
                    //console.log(felder);

                    var subarray = new Array();
                    subarray.push(parseInt(felder.id));
                    subarray.push(felder.username);
                    subarray.push(felder.firstname);
                    subarray.push(felder.lastname);
                    subarray.push(felder.email);
                    subarray.push(felder.firstname + ' ' + felder.lastname);
                    array.push(subarray);
                });
                data.addRows(array);

                //------------------------------------------------------------------//
                // Create a search box to search for the user name.
                //------------------------------------------------------------------//
                var stringFilter = new google.visualization.ControlWrapper({
                    controlType: 'StringFilter',
                    containerId: 'string_filter_div_nutzer',
                    options: {
                        filterColumnIndex: 5,
                        matchType: 'any',
                        ui: {
                            label: 'Nutzer suchen:'
                        }
                    }
                });

                //------------------------------------------------------------------//
                // Create the table to display.
                //------------------------------------------------------------------//
                var table = new google.visualization.ChartWrapper({
                    chartType: 'Table',
                    containerId: 'table_div_nutzer',
                    options: {
                        showRowNumber: false,
                        page: 'enable',
                        pageSize: 25
                    }
                });

                var view = new google.visualization.DataView(data);
                //view.setColumns([0,1,2,3,4]);
                //view.hideColumns([5]);


                //------------------------------------------------------------------//
                // Create a dashboard.
                //------------------------------------------------------------------//
                var dashboard = new google.visualization.Dashboard(document.getElementById('dashboardUser'));

                //------------------------------------------------------------------//
                // Establish dependencies.
                //------------------------------------------------------------------//
                dashboard.bind([stringFilter], [table]);

                //------------------------------------------------------------------//
                // Draw the dashboard.
                //------------------------------------------------------------------//
                dashboard.draw(view);
            });
        };

Answer 1

You need to set the view in the Table's ChartWrapper, not when calling dashboard.draw:

var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table_div_nutzer',
    options: {
        showRowNumber: false,
        page: 'enable',
        pageSize: 25
    },
    view: {
        columns: [0, 1, 2, 3, 4]
    }
});

then draw the Dashboard with your DataTable:

dashboard.draw(data);