Forum Stats

  • 3,837,271 Users
  • 2,262,245 Discussions
  • 7,900,244 Comments

Discussions

Is it possible to show/hide columns in oj-table based on a bind variable ?

User799099-Oracle
User799099-Oracle Member Posts: 5 Employee

I have an oj-table with many columns. I would like to implement a slider or checkbox that allows the user to show or hide a (set of) columns in the oj-table.

Answers

  • The columns attribute of an oj-table component can be bound to a variable that returns the appropriate array with column data, yes.

    The only thing to watch out for with this, is if you are using inline templates to define the row or cell data, then you will want to adjust those as well if you remove a column.

  • User799099-Oracle
    User799099-Oracle Member Posts: 5 Employee

    Thanks John,

    my html looks like this:

         <oj-table

           id="table"

           data="[[dataprovider]]"

           columns="{{columnArray}}"


    and javascript defines the columns like this:

       this.columnArray = [

             { headerText: 'Department Id',  

                           renderer: this.highlightingCellRenderer,

                           id: 'DepartmentId',

                           frozenEdge:'start',

                           footerTemplate: 'footerLabelTemplate'

                           },

             { headerText: 'Department Name',

                           renderer: this.highlightingCellRenderer,

                           id: 'DepartmentName',

                           headerClassName: 'oj-sm-only-hide',

                           className: 'oj-sm-only-hide',

                           resizable: 'enabled'

                           },

    etc.

    The idea is that there is a checkbox displayed above the table that will show Department Name column when checkbox is checked, and hide it when the user unchecks it. Should I change the className and headerClassName values in the columns definition (and to what value then?), or is there a different attribute I should be using ?

  • This jsFiddle will show you and example of how it can be done. This is using an oj-buttonset-many instead of checkboxset, but the code would be the same.

    https://jsfiddle.net/peppertech/8d1sqyr9/

  • User799099-Oracle
    User799099-Oracle Member Posts: 5 Employee

    This works brilliantly, thanks for the info !!

    One more question: when showing/hiding columns I see in the console this error:

    Uncaught TypeError: this._appliedColumnWidths is undefined

    Can you point me to the documentation where is explained how to solve this kind of error?

  • It would appear that you're trying to control the column width in some way that I don't have in my sample. I don't see the error in my fiddle.

    Since you are an Oracle employee, please take this question to the internal resources available to you, as it is against Oracle security policy to discuss product development in public forums.

    Thanks :-)